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.

Useful Accessibility Tools - WP Pompey April 2019


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 @coolfields Useful Accessibility Tools Graham Armfield Web Accessibility Consultant WordPress Developer @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: @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: 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: 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: Notes: NVDA is free, other desktop screen readers aren't – eg JAWS. User guide: da/documentation/userGuide.html @coolfields
  25. 25. Voiceover – Screen Reader Type: Part of Mac OS User guide: de/10.8/English.lproj/index.html Type: Part of iOS Notes: Voiceover behaves very differently on iOS to Mac OS User guide: 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: ity/android/answer/6283677?hl=en- GB @coolfields
  27. 27. WordPress plugins
  28. 28. WP Accessibility Type: WordPress Plugin URL: 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: 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: 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: Chrome extensions: Focus order favlet: NVDA screen reader: WordPress plugins: aXe Core: @coolfields
  35. 35. Thanks for listening Any questions? @coolfields 38