Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Web Accessibility and WordPress - WordCamp SLC 2017

130 views

Published on

These are the slides that accompanied a talk given by Chris David Miles at WordCamp SLC in 2017. The title of the talk was Web Accessibility and WordPress.

Published in: Education
  • Be the first to comment

  • Be the first to like this

Web Accessibility and WordPress - WordCamp SLC 2017

  1. 1. Web Accessibility and WordPress
  2. 2. Web Accessibility
  3. 3. Impaired Motor Control
  4. 4. Why should I care?
  5. 5. Why should I care? Most common excuse: “It would be nice to have, but accessibility only affects a small percentage of people.”
  6. 6. Why should I care? 8.2% + 6.3% + 3.3% + 3.1% + = 20.9%
  7. 7. Why should I care? Short-term disabilities and impairments
  8. 8. Why should I care? SEO
  9. 9. Why should I care? Laws
  10. 10. Why should I care? Background Images
  11. 11. Why should I care? Ignoring Focus State
  12. 12. Why should I care? Tech debt
  13. 13. 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.
  14. 14. 3 Steps to Making and Keeping Your Projects Accessible 1. Make it accessible.
  15. 15. 3 Steps to Making and Keeping Your Projects Accessible 1. Make it accessible.
  16. 16. Why should I care? Tech debt
  17. 17. Common Pitfalls
  18. 18. Alt Text Done Right <img src="pancakes.png" alt="Pancakes with butter and syrup">
  19. 19. 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...
  20. 20. Decorative Images <img src="decoration.jpg" alt="">
  21. 21. Clickable Area for Links
  22. 22. Form Labels <label for="name">Name:</label> <input id="name" type="text" name="textfield">
  23. 23. Color Contrast Good Visibility Poor Visibility
  24. 24. Inaccessible Embeds
  25. 25. Tabindex Tomfoolery
  26. 26. Semantic HTML & Headers <article> <aside> <details> <figcaption> <figure> <footer> <header> <main> <mark> <nav> <section> <summary> <time> <h1> <h2> <h3> <h4> <h5> <h6>
  27. 27. Resources and Tools
  28. 28. codex.wordpress.org/accessibility
  29. 29. wave.webaim.org
  30. 30. colorsafe.co
  31. 31. “NoCoffee” Chrome Extension
  32. 32. Q. & A.
  33. 33. Web Accessibility and WordPress

×