Successfully reported this slideshow.
Your SlideShare is downloading. ×

Useful Accessibility Tools

Ad

Coolfields Consulting www.coolfields.co.uk
@coolfields
Useful Accessibility Tools
Graham Armfield
Web Accessibility Consul...

Ad

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

Ad

Types of tools I'm going to cover
• Hardware tools
• Browser extensions and favlets
• Downloadable tools
• Assistive Techn...

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Loading in …3
×

Check these out next

1 of 33 Ad
1 of 33 Ad

Useful Accessibility Tools

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

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

Advertisement
Advertisement

More Related Content

More from Graham Armfield (20)

Advertisement

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

Editor's Notes

  • I work with organisations to help them improve the accessibility of their digital offerings. Do accessibility testing and guide designers and developers in solutions to the issues found.

    WordPress developer – have built many accessible websites using WordPress.

    I've delivered presentations to WordCamps in London, Sheffield, Edinburgh, Lancaster, Bournemouth – and a number of WordPress meetup groups.

    This is me in Sheffield a couple of years ago. The presentation is called So, How Do I Know if My WordPress Website is Accessible and focusses on easy accessibility tests that you can do on your own WordPress website.

    If you've not seen me do that one – and I know that some of you have - the slides are still on Slideshare , and the deck has been viewed over 12,000 times now.
  • Use this as an example: https://security.stackexchange.com/questions/124532/what-triggers-googles-recaptcha
  • Use this as an example: https://security.stackexchange.com/questions/124532/what-triggers-googles-recaptcha
  • Use this as an example: https://security.stackexchange.com/questions/124532/what-triggers-googles-recaptcha

×