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

932 views

Published on

Some useful accessibility tools to help test your site and development environment for accessibility, and can also potentially improve the accessibility of your website.

Published in: Internet
  • Be the first to comment

Useful Accessibility Tools

  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 plugin
  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. Accessibility testing in dev
  31. 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. 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. 33. Thanks for listening Any questions? graham.armfield@coolfields.co.uk @coolfields 36

×