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

14,104 views
13,851 views

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: http://www.coolfields.co.uk

Published in: Technology, Design

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

  1. 1. Coolfields Consulting www.coolfields.co.uk @coolfields So, how do I know if my WordPress website is accessible? Slides at: tinyurl.com/wpa001 Graham Armfield Web Accessibility Consultant WordPress Developer graham.armfield@coolfields.co.uk @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 http://www.w3.org/TR/WCAG20/ 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 www.coolfields.co.uk @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 www.coolfields.co.uk @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 www.coolfields.co.uk @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 www.coolfields.co.uk @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 www.coolfields.co.uk @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 www.coolfields.co.uk @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 www.coolfields.co.uk @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 • http://paciellogroup.com/resources/contrastAnalyser Wave Toolbar/Website • standalone (http://wave.webaim.org/) • 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 • http://owl.li/pGtKC Coding forms for accessibility • http://owl.li/pDLMQ Creating text for screen readers only • http://owl.li/qzOGj 41
  42. 42. Thanks for listening Any questions? graham.armfield@coolfields.co.uk @coolfields 42
  43. 43. Video From http://a11ymemes.tumblr.com
  44. 44. eo From http://a11ymemes.tumblr.com
  45. 45. Video From http://a11ymemes.tumblr.com
  46. 46. Video From http://a11ymemes.tumblr.com
  47. 47. From http://a11ymemes.tumblr.com
  48. 48. From http://a11ymemes.tumblr.com
  49. 49. From http://a11ymemes.tumblr.com
  50. 50. From http://a11ymemes.tumblr.com
  51. 51. From http://a11ymemes.tumblr.com
  52. 52. From http://a11ymemes.tumblr.com
  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

×