So, How Do I Know if my WordPress Website is Accessible?


Published on

Slides for a presentation I gave originally to WordCamp London on Saturday 23rd November 2013 and at many subsequent Wordcamps and WordPress meetups. The most recent occasion being WordPress User Group London on October 20th 2015 for which I revamped some of the slides to remove outdated examples.

The WCAG 2 guidelines provide a comprehensive list of best practices for creating accessible websites. But there is a lot of information and the success criteria can be a bit impenetrable in places.

I've distilled down some common accessibility issues into a series of 16 yes/no questions that anyone can ask about their own website. If you can answer these questions correctly, your website will be more accessible than many.

The presentation poses the questions and shows some examples of problems that accessibility testers find, as well as pointing out some of the best practices to achieve good web accessibility.

Visit my website for some useful posts on accessibility techniques:

Published in: Technology, Design

So, How Do I Know if my WordPress Website is Accessible?

  1. 1. Coolfields Consulting @coolfields So, how do I know if my WordPress website is accessible? Slides at: Graham Armfield Web Accessibility Consultant WordPress Developer @coolfields
  2. 2. What I’m going to cover Web Content Accessibility Guidelines (Version 2) published by the Web Accessibility Initiative of the World Wide Web Consortium A.K.A. WCAG2.0 • Good resource for accessibility • But can be hard to interpret @coolfields
  3. 3. What I’m going to cover So how about a simple yes/no checklist? Easy to check – with free tools @coolfields
  4. 4. Health warning In time available I can only cover some common accessibility issues. But, if you can answer these questions correctly, your site will be more accessible than many. 4@coolfields
  5. 5. Coolfields Consulting @coolfields Keyboard Interaction
  6. 6. Keyboard interaction You need to answer Yes to these: 1) Can I easily access all parts of the site with the keyboard only? 2) Can I easily see where keyboard focus is? 6@coolfields
  7. 7. Keyboard interaction 7 Hover states Keyboard focus
  8. 8. Keyboard interaction CSS a:hover {background:#fff, color:#000} a:hover, a:focus {background:#fff, color:#000} Don't do this: a:focus {outline:none} jQuery $(selector).hover(inFunction,outFunction); $(selector).focusin(inFunction); $(selector).focusout(outFunction); 8@coolfields
  9. 9. Keyboard interaction 9@coolfields Using 2014 theme in 3.8 All default themes since 2014 have keyboard accessible dropdown menus
  10. 10. Keyboard interaction 10 You need to answer Yes to these: 3) Can I easily access all functionality with the keyboard only? 4) Does the keyboard tab order make sense? @coolfields
  11. 11. Keyboard interaction 11 Img of Lightbox When lightbox opens, focus remains on page below
  12. 12. Coolfields Consulting @coolfields Photo: Links
  13. 13. Links Can you answer Yes to this one? 5) Are the links obviously links? 13@coolfields
  14. 14. Links Can you answer Yes to this one? 6) Do all links provide enough information to state where they lead to?
  15. 15. Links 15 Elements list in NVDA
  16. 16. Coolfields Consulting @coolfields Media
  17. 17. Media Can you answer Yes to these? 7) Do all images have appropriate alternate text? (appropriate may mean empty ie alt="") 17 8) Do all videos have captions? @coolfields
  18. 18. Coolfields Consulting @coolfields Signposting Content Photo: thepicturedrome
  19. 19. Signposting content Can you answer Yes to all these? 9) Are the page titles unique and meaningful? 10) Do pages have appropriate headings and subheadings? 11) Are ARIA landmark roles present? 19@coolfields
  20. 20. Using headings 20 Headings list from NVDA screen reader Note: NVDA exposes heading hierarchy Heading are used as a navigation feature
  21. 21. Introducing WAVE 21 Also available as a Firefox add-on
  22. 22. Using headings 22
  23. 23. ARIA landmark roles Banner 23 Navigation Footer Content Sidebar
  24. 24. ARIA landmark roles <header role="banner"> 24 <nav role="navigation"> <footer role="contentinfo"> <main role="main"> <aside role= "complementary">
  25. 25. ARIA landmark roles 25
  26. 26. Coolfields Consulting @coolfields Text
  27. 27. Text Can you answer Yes to this one? 12) Can I resize text in a page without breaking the layout? 27@coolfields
  28. 28. Normal size NB: Resizing and zooming are not the same thing Text 28@coolfields Larger size
  29. 29. Text Can you answer No to this one? 13) Is any of the text fully justified? 29@coolfields
  30. 30. "Rivers of white space" Text 30 Left aligned textFully justified text
  31. 31. Coolfields Consulting @coolfields User Input Photo: AlecCouros
  32. 32. User input Can you answer Yes to this one? 14) Do all form fields have an accompanying label? 32@coolfields
  33. 33. User input 33
  34. 34. Coolfields Consulting @coolfields Colour & Shape
  35. 35. Colour & shape Can you answer Yes to this one? 15) Is the colour contrast sufficient? 35
  36. 36. Colour contrast 36 Colour Contrast Analyzer Tool
  37. 37. Colour contrast 37@coolfields
  38. 38. Colour & shape Can you answer No to this one? 16) Is meaning conveyed by colour or shape only? 38@coolfields
  39. 39. Colour & shape 39 Project Name Status Fully Resourced? Easy peasy project a Quite a tricky project a So glad I'm not on that project r Going OK a @coolfields
  40. 40. Useful resources 1 Colour Contrast Analyzer • Wave Toolbar/Website • standalone ( • or as Chrome/Firefox add-ons Browser Tools • Chrome - Inspect element • Firefox – Firebug inspect element 40
  41. 41. Useful resources 2 Getting alternate text right • Coding forms for accessibility • Creating text for screen readers only • 41
  42. 42. Thanks for listening Any questions? @coolfields 42
  43. 43. Video From
  44. 44. eo From
  45. 45. Video From
  46. 46. Video From
  47. 47. From
  48. 48. From
  49. 49. From
  50. 50. From
  51. 51. From
  52. 52. From
  53. 53. Some things I didn't cover • Links that open new windows/panels • Form submission errors • Movement/flashing on pages • Audio on pages • Updating content after page loaded • Timeouts • Data tables 53@coolfields • Keyboard traps • CAPTCHAs • Skip links • Alternate navigation • Indicating language • Triggering actions • Automated page refreshing • PDFs