Upload
chris-david-miles
View
116
Download
4
Embed Size (px)
Citation preview
Web Accessibilityand WordPress
Web Accessibility
Impaired Motor Control
Why should I care?
Why should I care?
Most common excuse:
“It would be nice to have, but accessibility only affects a small
percentage of people.”
Why should I care?
8.2% +6.3% +3.3% +3.1% +
= 20.9%
Why should I care?
Short-termdisabilities and
impairments
Why should I care?
SEO
Why should I care?
Laws
Why should I care?
BackgroundImages
Why should I care?
Ignoring Focus State
Why should I care?
Tech debt
3 Steps to Making and Keeping Your Projects Accessible
1. Make it accessible.2. Make it fancy.3. Make sure the fancy parts don’t break accessibility.4. Celebrate that you don’t have a ton of tech debt
and that your product doesn’t exclude millions of people or potentially violate international law.
5. Do what you want with all that extra free time and money that you’ve saved.
3 Steps to Making and Keeping Your Projects Accessible
1. Make it accessible.
3 Steps to Making and Keeping Your Projects Accessible
1. Make it accessible.
Why should I care?
Tech debt
Common Pitfalls
Alt Text Done Right
<img src="pancakes.png" alt="Pancakes with butter and syrup">
Alt Text Done Wrong
<img src="shakespearean_actor.jpg" alt="Now is the winter of our discontent; Made glorious summer by this sun of York; And all the clouds that lour'd upon our house In the deep bosom of the ocean buried. Now are our brows bound with wreaths; Our bruised arms hung up for monuments; Our stern alarums changed to merry meetings, Our dreadful marches to delightful measures. Grim-visaged war hath smooth'd his wrinkled front; And now, instead of mounting barded steeds...
Decorative Images
<img src="decoration.jpg" alt="">
Clickable Area for Links
Form Labels
<label for="name">Name:</label><input id="name" type="text" name="textfield">
Color Contrast
Good Visibility
Poor Visibility
Inaccessible Embeds
Tabindex Tomfoolery
Semantic HTML & Headers
<article><aside><details><figcaption><figure><footer><header><main><mark><nav><section><summary><time>
<h1><h2><h3><h4><h5><h6>
Resources and Tools
codex.wordpress.org/accessibility
wave.webaim.org
colorsafe.co
“NoCoffee” Chrome Extension
Q. & A.
Web Accessibilityand WordPress