1. Coolfields Consulting www.coolfields.co.uk
@coolfields
Useful Accessibility Tools
Graham Armfield
Web Accessibility Consultant
WordPress Developer
graham.armfield@coolfields.co.uk
@coolfields

2. A bit about me
2
I’m a…
• Web
Accessibility
Consultant
• WordPress
Developer Photo by Mike Pead
@coolfields

3. Types of tools I'm going to cover
• Hardware tools
• Browser extensions and favlets
• Downloadable tools
• Assistive Technology
• WordPress Plugins
• Development automation
@coolfields

4. What are the tools for?
• To help evaluate
accessibility of web pages
• To help improve the
accessibility of web pages
@coolfields

5. Hardware tools

6. Keyboard
In conjunction with Enter key, Space bar and Arrow keys
@coolfields

7. Browser extensions and favlets

8. Browser extensions and favlets
Extensions from Chrome Web Store at:
https://chrome.google.com/webstore/category/extensions
@coolfields

9. Browser extensions and favlets
• Shown in Chrome
@coolfields

10. WAVE
Type: Chrome/Firefox Extension
Purpose: Various accessibility tests on single page – shows results
graphically.
Notes: Results can be cluttered on some pages. No real interpretation of
results
@coolfields

11. Demo of WAVE
@coolfields

12. aXe
Type: Chrome/Firefox Extension
Purpose: A selection of accessibility tests on single page. With
explanation of issue and suggestions for fixing
Downsides: None really.
@coolfields

13. Demo of aXe
@coolfields

14. Focus Indicator
Type: Chrome Extension
Purpose: Briefly shows a focus ring around each focusable elements
on page when that element gets focus.
Notes: Useful if site has suppressed browser focus indication. Colour
and width of focus ring can be changed.
@coolfields

15. Demo of Focus Indicator
@coolfields

16. Focus Order Favlet
Type: Favlet (Bookmarklet)
URL: https://labs.ssbbartgroup.com/index.php/Focus_Order_Favlet
Purpose: Shows focus order of all focusable elements on page.
Notes: Saves having to tab to every element to check focus order. But,
careful when things are revealed on focus, as they won't initially visible.
@coolfields

17. Demo of Focus Order Favlet
@coolfields

18. Landmark Navigation
Type: Chrome/Firefox Extension
Purpose: Allows keyboard/mouse users to move to regions on a page.
Also useful for testing for accessibility as it highlights selected region.
@coolfields

19. Demo of Landmark Navigation
@coolfields

20. Demo of Landmark Navigation
@coolfields

21. Colour Contrast Analyser
Type: Download for Mac and Windows
URL: https://developer.paciellogroup.com/resources/contrastanalyser/
Purpose: Analyze contrast ratio between foreground and background.
Useful at design stage too – not just within a web page.
@coolfields

22. Demo of Colour Contrast Analyser
@coolfields

23. Screen readers
Screen readers are used by:
a) People who are blind or have poor vision.
b) Sighted people who have cognitive impairments who
need/want/like the audible reinforcement of what they are seeing
on the page.

24. NVDA – Screen Reader
Type: Download for Windows
URL: https://www.nvaccess.org/
Notes: NVDA is free, other
desktop screen readers aren't – eg
JAWS.
User guide:
https://www.nvaccess.org/files/nv
da/documentation/userGuide.html
@coolfields

25. Voiceover – Screen Reader
Type: Part of Mac OS
User guide:
https://help.apple.com/voiceover/info/gui
de/10.8/English.lproj/index.html
Type: Part of iOS
Notes: Voiceover behaves very differently
on iOS to Mac OS
User guide:
https://www.applevis.com/guides/ios-
voiceover/complete-list-ios-gestures-
available-voiceover-users
@coolfields

26. Talkback – Screen Reader
Type: App for Android devices
Notes: Talkback is sometimes pre-
installed in devices, but sometimes
needs to be downloaded separately.
User guide:
https://support.google.com/accessibil
ity/android/answer/6283677?hl=en-
GB
@coolfields

27. WordPress plugin

28. WP Accessibility
Type: WordPress Plugin
URL: https://wordpress.org/plugins/wp-accessibility/
Notes: Plugin attempts to fix some common accessibility defects in WordPress
sites – eg lack of skip link, links with no underlines, etc.
Can also add toolbar that offers font resizing and high(er) contrast colour
scheme.
@coolfields

29. Demo of WP Accessibility
@coolfields

30. Accessibility testing in dev

31. aXe Core
Type: Javascript library
URL: https://www.deque.com/products/axe-core/
Notes: Built for inclusion in development environments, to automate accessibility
testing as a part of your development process. It's open-source, and free.
@coolfields

32. Useful URLs
Colour contrast analyser:
https://developer.paciellogroup.com/resources/contrastanalyser/
Chrome extensions:
https://chrome.google.com/webstore/category/extensions
Focus order favlet:
https://labs.ssbbartgroup.com/index.php/Focus_Order_Favlet
NVDA screen reader:
https://www.nvaccess.org/
WordPress plugin:
https://wordpress.org/plugins/wp-accessibility/
aXe Core:
https://www.deque.com/products/axe-core/
@coolfields

33. Thanks for listening
Any questions?
graham.armfield@coolfields.co.uk
@coolfields 36