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.

Making Popular WordPress Plugins More Accessible

52 views

Published on

A presentation at WordCamp Edinburgh on 23.07.17.

I demoed various plugins to test their accessibility with keyboard alone and VoiceOver screen reader:
- NextGEN Gallery
- MailMunch
- Sumo
- Gravity Forms

For the video demos please visit the YouTube version of this presentation at https://www.youtube.com/watch?v=kR1R300OL-c

Published in: Internet
  • Be the first to comment

  • Be the first to like this

Making Popular WordPress Plugins More Accessible

  1. 1. Making Popular WordPress Plugins More Accessible Claire Brotherton WordCamp Edinburgh, July 2017 @abrightclearweb
  2. 2. Why Does Plugin Accessibility Matter? • WordPress is used by 28.3% of all websites 
 
 (https://w3techs.com/technologies/details/cm-wordpress/all/ all) • Over 51,000 plugins are available on WordPress.org • 1 in 5 people in the UK have a disability
 
 (https://www.gov.uk/government/uploads/system/uploads/ attachment_data/file/600465/family-resources- survey-2015-16.pdf)
  3. 3. How To Test Plugins For Accessibility? • Keyboard (motor disability) • Screen reader (visual impairment). Free ones are: • NVDA (Windows) - best with Firefox 
 https://www.nvaccess.org • VoiceOver (Mac & iOS, built-in) - best with Safari

  4. 4. If We Find Plugin Accessibility Issues, How Can We Fix Them? • Leave a message on WordPress.org forums
 • Premium plugins: contact their support
 • Use a plugin to improve the accessibility of the one we want to use
 • Find alternative plugins without accessibility issues
  5. 5. What Is Keyboard Focus?
  6. 6. Which Are The Main Focusable HTML Elements? • Links <a> • Form elements e.g. <input> • Buttons <button> • https://allyjs.io/data-tables/focusable.html
  7. 7. Making Other HTML Elements Focusable The tabindex value can allow for some interesting behaviour. • If given a value of "-1", the element can't be tabbed to but focus can be given to the element programmatically (using element.focus()).
 • If given a value of 0, the element can be focused via the keyboard and falls into the tabbing flow of the document.
 • https://snook.ca/archives/accessibility_and_usability/ elements_focusable_with_tabindex
  8. 8. Visible Focus Styles
  9. 9. Visible Focus Styles Mac users - blue focus ring VoiceOver users - black border
  10. 10. Chrome User? • Focus Indicator (Chrome extension) • https://chrome.google.com/webstore/detail/focus-indicator/ heeoeadndnhebmfebjccbhmccmaoedlf
  11. 11. How To Navigate With The Keyboard • Tab key to go forwards • Shift + Tab to go backwards • Enter to click link/button • Space to activate buttons / check checkboxes
  12. 12. How To Navigate With The Keyboard • Arrow keys to navigate radio
 buttons • Esc key to close dialogs • If something is accessible via keyboard, it’s normally accessible via a screen reader too
  13. 13. LIGHTBOX
  14. 14. How Should An Accessible Lightbox Work? • The trigger to open the lightbox must get keyboard focus. • There should be a warning that a new window will open. • Focus must go to the lightbox when opened, and be visible. • Lightbox image(s) must have alt text. • Tabbing must cycle round the links within the lightbox until dismissed. • Focus must return to the element on the page which the lightbox was opened from. • http://www.coolfields.co.uk/2011/12/specification-for-an-accessible-lightbox/
  15. 15. NextGEN Gallery https://wordpress.org/plugins/nextgen-gallery/ Over 1 million active installs
  16. 16. NextGEN Gallery Demo (1)
  17. 17. Nextgen Gallery Test Results (Keyboard) • No instructions given that clicking on a thumbnail will open a larger image. • The focus style on the thumbnails is very hard to see. • Opens the lightbox but the focus remains in the window below. So tabbing through I could return to an unexpected place. • Can’t focus on the lightbox X to close. Only the Esc key works. • Arrow keys move the lightbox images forward/back - but is this obvious to users?
  18. 18. NextGEN Gallery Demo (2)
  19. 19. NextGEN Gallery Test Results (VoiceOver) • Focus style is better thanks toVoiceOver’s default style. • We had the same issues with the focus not moving to the lightbox. • VoiceOver read out the filename for most of the thumbnail images. It’s not enough to add the alt text in WordPress Media Library - you must add it in Next Gen Gallery’s settings too. • Image links should tell the user the destination of the link, so should read something like “Open a panel with larger version of figure holding a bunch of grapes in close-up”.
  20. 20. NextGEN Gallery Test Results • The trigger to open the lightbox must get keyboard focus. ✅ • There should be a warning that a new window will open. ❌ • Focus must go to the lightbox when opened, and be visible. ❌ • Lightbox image(s) must have alt text. ❌ • Tabbing must cycle round the links within the lightbox until dismissed. ❌ • Focus must return to the element on the page which the lightbox was opened from. ❌
  21. 21. What We Can Do To Fix Lightbox Accessibility Issues? • Add alt text to images (the NextGEN Gallery way) and use descriptive filenames. • Raise issues with the plugin’s developer on the WordPress.org forums. • No suitable replacement plugin, unfortunately. • Lity is an accessible lightbox but isn’t in the form of a WordPress plugin. It doesn’t show multiple images. • http://sorgalla.com/lity/
  22. 22. MODAL WINDOW
  23. 23. MailMunch https://wordpress.org/plugins/mailmunch/ Over 20,000 active installs
  24. 24. MailMunch Demo
  25. 25. MailMunch Test Results • Not keyboard accessible - focus remains behind the modal, on the page. • Even the Esc key didn’t work. • No email subscribers for you!
  26. 26. Sumo https://wordpress.org/plugins/sumome/ Over 100,000 active installs
  27. 27. Sumo Demo
  28. 28. Sumo Test Results • The trigger to open the modal must get keyboard focus. ✅ • There should be a warning that a new window will open. ❌ • Focus must go to the modal when opened, and be visible. ✅ • Tabbing must cycle round the links within the modal until dismissed. ❌ • Focus must return to the element on the page which the modal was opened from. ❌
  29. 29. FORMS
  30. 30. How Should Accessible Forms Work? • All inputs should have a form label, and the label should be associated with the form control via an id attribute. • Related form elements e.g. radio buttons or checkboxes should be grouped in a <fieldset> with a <legend>. • Error messages should be highlighted. For screen reader users it helps if the errors are listed above the form.
  31. 31. Gravity Forms http://www.gravityforms.com Over A Million WordPress Sites Are Already Using Gravity Forms
  32. 32. Gravity Forms Demo
  33. 33. Fixing Gravity Forms (1) • WCAG 2.0 form fields for Gravity Forms • https://en-gb.wordpress.org/plugins/gravity-forms-wcag-20-form-fields/
  34. 34. Fixing Gravity Forms (1)
  35. 35. Fixing Gravity Forms (2) • Gravity Fieldset for Gravity Forms • https://en-gb.wordpress.org/plugins/gravity-fieldset-for-gravity-forms/
  36. 36. Fixing Gravity Forms (2)
  37. 37. Gravity Forms + Plugins • All inputs should have a form label, and the label should be associated with the form control via an id attribute. ✅ • Related form elements e.g. radio buttons or checkboxes should be grouped in a <fieldset> with a <legend>. ✅ • Error messages should be highlighted. For screen reader users it helps if the errors are listed above the form. ✅
  38. 38. Summary • Plugin developers have a responsibility to code their plugins for everyone • These plugins are used on millions of sites • Accessible features are better coded in from the start, but problems can be fixed if you know how • Accessible plugins = more accessible sites = better for all!
  39. 39. Thank You! • www.abrightclearweb.com • claire@abrightclearweb.com • @abrightclearweb Questions?

×