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.
Coolfields Consulting www.coolfields.co.uk
@coolfields
Useful Accessibility Tools
Graham Armfield
Web Accessibility Consul...
A bit about me
2
I’m a…
• Web
Accessibility
Consultant
• WordPress
Developer Photo by Mike Pead
@coolfields
Types of tools I'm going to cover
• Hardware tools
• Browser extensions and favlets
• Downloadable tools
• Assistive Techn...
What are the tools for?
• To help evaluate accessibility of web pages
• To help improve the accessibility of web pages
@co...
Hardware tools
Keyboard
In conjunction with Enter key, Space bar and Arrow keys
@coolfields
Browser extensions and favlets
Browser extensions and favlets
Extensions from Chrome Web Store at:
https://chrome.google.com/webstore/category/extensions...
Browser extensions and favlets
• Shown in Chrome
@coolfields
WAVE
Type: Chrome/Firefox Extension
Purpose: Various accessibility tests on single page – shows results
graphically.
Notes...
Demo of WAVE
@coolfields
aXe
Type: Chrome/Firefox Extension
Purpose: A selection of accessibility tests on single page. With
explanation of issue a...
Demo of aXe
@coolfields
Focus Indicator
Type: Chrome Extension
Purpose: Briefly shows a focus ring around each focusable elements
on page when tha...
Demo of Focus Indicator
@coolfields
Focus Order Favlet
Type: Favlet (Bookmarklet)
URL: https://labs.ssbbartgroup.com/index.php/Focus_Order_Favlet
Purpose: Sho...
Demo of Focus Order Favlet
@coolfields
Landmark Navigation
Type: Chrome/Firefox Extension
Purpose: Allows keyboard/mouse users to move to regions on a page.
Also...
Demo of Landmark Navigation
@coolfields
Demo of Landmark Navigation
@coolfields
Colour Contrast Analyser
Type: Download for Mac and Windows
URL: https://developer.paciellogroup.com/resources/contrastana...
Demo of Colour Contrast Analyser
@coolfields
Screen readers
Screen readers are used by:
a) People who are blind or have poor vision.
b) Sighted people who have cogniti...
NVDA – Screen Reader
Type: Download for Windows
URL: https://www.nvaccess.org/
Notes: NVDA is free, other
desktop screen r...
Voiceover – Screen Reader
Type: Part of Mac OS
User guide:
https://help.apple.com/voiceover/info/gui
de/10.8/English.lproj...
Talkback – Screen Reader
Type: App for Android devices
Notes: Talkback is sometimes pre-
installed in devices, but sometim...
WordPress plugins
WP Accessibility
Type: WordPress Plugin
URL: https://wordpress.org/plugins/wp-accessibility/
Notes: Plugin attempts to fix...
Demo of WP Accessibility
@coolfields
Content Author Accessibility Preview
Type: WordPress Plugin
URL: https://wordpress.org/plugins/content-author-accessibilit...
Demo of Content Author
Accessibility Preview
@coolfields
Accessibility testing in dev
aXe Core
Type: Javascript library
URL: https://www.deque.com/products/axe-core/
Notes: Built for inclusion in development ...
Useful URLs
Colour contrast analyser:
https://developer.paciellogroup.com/resources/contrastanalyser/
Chrome extensions:
h...
Thanks for listening
Any questions?
graham.armfield@coolfields.co.uk
@coolfields 38
Upcoming SlideShare
Loading in …5
×

Useful Accessibility Tools - WP Pompey April 2019

127 views

Published on

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.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Useful Accessibility Tools - WP Pompey April 2019

  1. 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. 2. A bit about me 2 I’m a… • Web Accessibility Consultant • WordPress Developer Photo by Mike Pead @coolfields
  3. 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. 4. What are the tools for? • To help evaluate accessibility of web pages • To help improve the accessibility of web pages @coolfields
  5. 5. Hardware tools
  6. 6. Keyboard In conjunction with Enter key, Space bar and Arrow keys @coolfields
  7. 7. Browser extensions and favlets
  8. 8. Browser extensions and favlets Extensions from Chrome Web Store at: https://chrome.google.com/webstore/category/extensions @coolfields
  9. 9. Browser extensions and favlets • Shown in Chrome @coolfields
  10. 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. 11. Demo of WAVE @coolfields
  12. 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. 13. Demo of aXe @coolfields
  14. 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. 15. Demo of Focus Indicator @coolfields
  16. 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. 17. Demo of Focus Order Favlet @coolfields
  18. 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. 19. Demo of Landmark Navigation @coolfields
  20. 20. Demo of Landmark Navigation @coolfields
  21. 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. 22. Demo of Colour Contrast Analyser @coolfields
  23. 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. 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. 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. 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. 27. WordPress plugins
  28. 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. 29. Demo of WP Accessibility @coolfields
  30. 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. 31. Demo of Content Author Accessibility Preview @coolfields
  32. 32. Accessibility testing in dev
  33. 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. 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. 35. Thanks for listening Any questions? graham.armfield@coolfields.co.uk @coolfields 38

×