Updated version of my presentation showing some useful tools people can use to test out the accessibility of their site. The tools range from hardware - ie using a keyboard, through browser extensions and favlets, to a couple of WordPress plugins that can help improve the accessibility of a WordPress website. Some of the tools can also be used by those with disabilities or impairments to more easily access and deal with websites that are not fully accessible.

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 plugins

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. Content Author Accessibility Preview
Type: WordPress Plugin
URL: https://wordpress.org/plugins/content-author-accessibility-preview/
Notes: Plugin shows up some potential accessibility issues when content authors
preview pages and posts.
Uses techniques I outlined in a presentation 'Accessibility Hacks' at WordCamp
Manchester 2018.
@coolfields

31. Demo of Content Author
Accessibility Preview
@coolfields

32. Accessibility testing in dev

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

34. 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 plugins:
https://wordpress.org/plugins/wp-accessibility/
https://wordpress.org/plugins/content-author-accessibility-preview/
aXe Core:
https://www.deque.com/products/axe-core/
@coolfields

35. Thanks for listening
Any questions?
graham.armfield@coolfields.co.uk
@coolfields 38