WordCamp 2015
June 13th
#wcphilly
What we're going to cover today
Why is this important?
We'll look at some examples
Quick overview
Introduce some tools & techniques
WordPress specific accessibility
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
Expand our potential audience! 54 million people in the US have a disability, 1.8 million are unable to see printed words, and 16.1 million have a cognitive or mental illness that impedes daily functioning
Be in compliance with legal guidelines, like Section 504 and 508 compliance.
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.
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.
Hiding content
.hide {display : none } .hide {visibility : hidden } .hide {width :0 px, height:0 px} .hide {text-indent : -10000 px } Recommended:
.hidden {
position :absolute left :-10000 px top :auto width :1 pxheight :1 pxoverflow :hidden } More info on hiding content
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.
WordPress alternatives to Captchas
Dealing with cognitive disabilities
Not a lot of research in this area.
Minimize cognitive load.
Use common icons to mark important tasks.
WordPress & Accessibility Resources
