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

1. Making Popular WordPress
Plugins More Accessible
Claire Brotherton
WordCamp Edinburgh, July 2017
@abrightclearweb

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. 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. 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. What Is Keyboard Focus?

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. 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. Visible Focus Styles

9. Visible Focus Styles
Mac users
- blue focus ring
VoiceOver users
- black border

10. Chrome User?
• Focus Indicator (Chrome extension)
• https://chrome.google.com/webstore/detail/focus-indicator/
heeoeadndnhebmfebjccbhmccmaoedlf

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. 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. LIGHTBOX

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. NextGEN Gallery
https://wordpress.org/plugins/nextgen-gallery/
Over 1 million active installs

16. NextGEN Gallery Demo (1)

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. NextGEN Gallery Demo (2)

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. 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. 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. MODAL WINDOW

23. MailMunch
https://wordpress.org/plugins/mailmunch/
Over 20,000 active installs

24. MailMunch Demo

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. Sumo
https://wordpress.org/plugins/sumome/
Over 100,000 active installs

27. Sumo Demo

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. FORMS

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. Gravity Forms
http://www.gravityforms.com
Over A Million WordPress Sites Are Already Using Gravity Forms

32. Gravity Forms Demo

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. Fixing Gravity Forms (1)

35. Fixing Gravity Forms (2)
• Gravity Fieldset for Gravity Forms
• https://en-gb.wordpress.org/plugins/gravity-fieldset-for-gravity-forms/

36. Fixing Gravity Forms (2)

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. 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. Thank You!
• www.abrightclearweb.com
• claire@abrightclearweb.com
• @abrightclearweb
Questions?