Net/Work
Web Accessibility
2.10.15
About me
- Front-end Developer
- GDI Philly Events Coordinator
- LadyHacks & WITS Organizer
- Web Accessibility Advocate
What we're going to cover today
- What web accessibility is.
- Why is this important?
- We'll look at some examples.
- Introduce some tools & techniques.
- Questions.
Virgin America
“The result is a site that gets flyers booked nearly twice as fast, on any kind of device.”
Wired Magazine
“After looking at how flyers were using its website to search and book flights, the airline sought to completely reinvent the web experience.”
Mashable
“I grudgingly admit, the new site not only looks far better, it works better too.”
Pando
Web accessibility is about:
- making your sites useful to as many people as possible.
- helping your users.
- awareness & accountability.
- leadership.
Why make our sites accessible?
source
A few more reasons...
- Expand your potential audience!
- Be in compliance with legal guidelines, like Section 504 and 508.
- Avoid potential lawsuits.
- Do the right thing.
Something to think about...
Benefits of Accessibility
- Keyboard shortcuts
- Using captions and transcripts
- Good alt text
- Many times, good design practices create accessibility as a side effect.
Types of Disability
- Visual disabilities: blind or low-sight, color blind
- Hearing disabilities: deaf or hard-of-hearing
- Physical disabilities: MS, ALS, paraplegic/quadriplegic, epilepsy
- Cognitive disabilities: dyslexia, low literacy, learning disabilities
- Seizures: prone to photoepileptic seizures
- An Alphabet of Accessibility Issues
Visual disabilities
Semantic HTML
- Gives the page meaning and structure.
- Don't use header tags out of order.
- Don't use HTML for presentation.
- That's what CSS is for!
Alt text
- Alternate text describes pictorial content in words.
- context.
- function not content.
- If an image is purely decorative, use "" to instruct a screen reader to skip it.
<p><img src="img/twitter-logo.png" alt="follow us on twitter"></p>
Use color wisely
Provide contrast
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
Color & contrast best practices
- Don't rely on color to indicate something.
- Red/green color blindness is the most common.
- Minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text. (Checker)
- Try zooming in your designs.
Links!
- Link text should make sense.
- Make sure the user can tell where it's going to take them.
- Don't open links in a new window (unless you let the user know first).
- Use :focus wisely.
- Don't rely on color to signify a link.
- Further reading on link text
Removing :focus
Hint: Don't do it. Ever.
Accessible Navigation
- "Skip to main content" links
- Hover navigation
- Make sure users can tab through each element
Dealing with Hearing Disabilities
- Provide captions or transcripts.
- Don't rely on sounds.
- Be especially careful if your site targets older users.
Dealing with Physical Disabilities
- Limited mobility users interact with the screen via keyboard.
- Other users use a mouse, but have trouble with fine motor control.
- Make clickable elements large.
- Avoid clickable page elements that move.
- Animations with rapid flickers.
Don't overwhelm
Provide plenty of time
If you have timed content (forms, image galleries, etc.) allow users to control extend time.
Dealing with cognitive disabilities
- Not a lot of research in this area.
- Minimize cognitive load.
- Use common icons to mark important tasks.
To sum it all up
Show your users some love!
