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
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
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
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
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/
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?
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/
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!
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. ❌
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.
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!