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.

Themes Plugins and Accessibility - WordCamp London March 2015

2,305 views

Published on

WordPress is used by over 20% of the world's websites. But how many accessible themes are there in the WordPress theme repository?

The answer is, "not many".

This presentation tries to demystify the recently introduced accessibility-ready tag within the theme review process. It's a tag that WordPress theme authors can use to indicate that their theme has good accessibility features. It's actually not that hard to achieve, and the web will be a better place if there were more accessibility-ready themes for people to choose from.

I also look at the impact WordCamp plugins can have on accessibility, and talk about whether the accessibility-ready principles could be used by plugin authors. The short answer, is that yes they can be useful.

Published in: Technology
  • Be the first to comment

Themes Plugins and Accessibility - WordCamp London March 2015

  1. 1. Coolfields Consulting www.coolfields.co.uk @coolfields Themes, graham.armfield@coolfields.co.uk @coolfields Plugins & Accessibility
  2. 2. What I’m Going to Cover • Why web accessibility matters • WP theme review process and the 'accessibility-ready' tag • Plugins and accessibility 2
  3. 3. A bit about me 3 I’m a… • Web Accessibility Consultant • WordPress Developer Photo by Mike Pead @coolfields
  4. 4. Coolfields Consulting www.coolfields.co.uk @coolfields Why is Accessibility Important? What's all the fuss about?
  5. 5. Coolfields Consulting www.coolfields.co.uk @coolfields
  6. 6. Why accessibility is important • More people than you think have disabilities or impairments • Populations are growing older • Those two groups combined have significant spending power • There are legal frameworks • And, morally it’s the right thing to do 6
  7. 7. Coolfields Consulting www.coolfields.co.uk @coolfields Theme reviews and accessibility
  8. 8. Coolfields Consulting www.coolfields.co.uk @coolfields Themes • for us • for our clients • for WordPress
  9. 9. Theme review guidelines 9 http://codex.wordpress.org/Theme_Review
  10. 10. The 'accessibility-ready' tag 10
  11. 11. The 'accessibility-ready' tag 11 https://make.wordpress.org/themes/handbook/review/accessibility/ Guide for reviewers: http://make.wordpress.org/accessibility/theme-accessibility-guide-for-reviewers/
  12. 12. Why 'accessibility-ready'? • A website's accessibility is not just down to the theme. • Admins add plugins… • Then they let content authors loose on it… 12
  13. 13. How many accessible themes? 13 3,048 themes in repository (as at 23rd February 2015) 9 results for 'accessibility' and 13 results for 'accessible' and 32 have 'accessibility-ready' tag
  14. 14. An accessible theme author writes… 14 http://davidakennedy.com/2014/07/08/accessible-wordpress-theme-lessons/
  15. 15. The 'accessibility-ready' sections: Required • Headings • ARIA landmarks • Link text • Controls • Keyboard navigation • Colour contrast • Skip links • Forms • Images • Media 15 Recommended • Zoomable text • Removal of title attributes Not Allowed • tabindex • accesskey • Popups without warning
  16. 16. Headings • semantic elements – not just for presentation • must use a 'reasonable' html heading structure • subsections defined by theme must use headings – eg widget titles, post titles, etc 16
  17. 17. ARIA Landmarks <header role="banner"> 17 <nav role="navigation"> <footer role="contentinfo"> <main role="main"> <aside role= "complementary"> role="search"
  18. 18. Link text • must supply context • no bare urls 18
  19. 19. Controls • anything that behaves like a button or a link should be marked up appropriately ie <button> or <a> or <input> • these elements need machine-readable text to indicate what they are for • dashicons (or similar) on their own are not enough 19
  20. 20. Keyboard navigation • keyboard focus must be visible everywhere • dropdown menus • intuitive (tab order) • tabindex? – use only 0 or -1 • accesskey – do not use 20
  21. 21. Colour contrast • background/foreground • WCAG 2.0 ratio - algorithm • theme colour schemes (http://www.paciellogroup.com/resources/contrastanalyser/) 21
  22. 22. Skip links • direct to content • direct to navigation • first focusable element(s) on a page 22
  23. 23. Forms • explicitly linked labels • error messages reachable by screen readers 23
  24. 24. Images • decorative via CSS • alt attributes 24
  25. 25. Media • includes: audio, video, sliders, carousels • no auto start without user action 25
  26. 26. Popups Without Warning • warn users first • warning should be visible and accessible to screen readers 26
  27. 27. Zoomable Text • in the recommended list • zooming and resizing are not the same thing 27
  28. 28. Removal of title Attributes • title attributes have been historically used in many places to provide 'tool tip' functionality • but in terms of accessibility, their use is never the right answer 28
  29. 29. Coolfields Consulting www.coolfields.co.uk @coolfields Plugins and accessibility
  30. 30. So what about plugins? • There is a plugin review process. • But no mention of accessibility. • Could there be an accessibility review? • Should there be? 30
  31. 31. Can plugins affect accessibility? Some examples: • Slider/carousel plugins • Lightbox plugins • Form generator plugins 31
  32. 32. Slider/carousel plugin example 32 Can I use or stop the slider using the keyboard? Can I attach alternate text to the images? Buttons or links or div? And do they label their purpose?
  33. 33. Lightbox plugin example 33 Can I attach alternate text to the large images? When lightbox opens, focus remains on page below
  34. 34. Form plugin example 34 Do screen reader users get to hear these error messages? Are these labels linked to input fields?
  35. 35. So plugins can affect accessibility Plugin authors should sensibly follow the theme accessibility guidelines, to avoid spoiling the accessibility of WordPress websites. 35
  36. 36. Remember… Every accessibility step you take makes the web easier for someone. Please take your next step soon. 36
  37. 37. Thanks for listening graham.armfield@coolfields.co.uk @coolfields 37
  38. 38. Video From http://a11ymemes.tumblr.com
  39. 39. Video From http://a11ymemes.tumblr.com
  40. 40. From http://a11ymemes.tumblr.com
  41. 41. From http://a11ymemes.tumblr.com
  42. 42. From http://a11ymemes.tumblr.com
  43. 43. From http://a11ymemes.tumblr.com
  44. 44. From http://a11ymemes.tumblr.com

×