web accessibility and wordpress - wordcamp slc 2017

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