SlideShare a Scribd company logo

Useful Accessibility Tools - WordCamp Brighton

•Download as PPTX, PDF•
•
Graham Armfield
Graham Armfield

Graham Armfield of Coolfields Consulting provides an overview of useful accessibility tools. These include hardware tools like keyboards, browser extensions that evaluate accessibility like WAVE and aXe, screen readers like NVDA and VoiceOver, the Color Contrast Analyzer tool, and WordPress plugins like WP Accessibility and Content Author Accessibility Preview. He demonstrates several of the tools and provides links to learn more. The tools are meant to help evaluate and improve the accessibility of web pages.

1 of 35
Coolfields Consulting www.coolfields.co.uk @coolfields Useful Accessibility Tools Graham Armfield Web Accessibility Consultant WordPress Developer graham.armfield@coolfields.co.uk @coolfields
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 Technology • WordPress Plugins • Development automation @coolfields
What are the tools for? • To help evaluate accessibility of web pages • To help improve the accessibility of web pages @coolfields
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 @coolfields
Browser extensions and favlets • Shown in Chrome @coolfields
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
Demo of WAVE @coolfields
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
Demo of aXe @coolfields
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
Demo of Focus Indicator @coolfields
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
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 useful for testing for accessibility as it highlights selected region. @coolfields
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/contrastanalyser/ Purpose: Analyze contrast ratio between foreground and background. Useful at design stage too – not just within a web page. @coolfields
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 cognitive impairments who need/want/like the audible reinforcement of what they are seeing on the page.
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 From http://a11ymemes.tumblr.com
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
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
WordPress plugins
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
Demo of WP Accessibility @coolfields
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
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 environments, to automate accessibility testing as a part of your development process. It's open-source, and free. @coolfields
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
Thanks for listening Any questions? graham.armfield@coolfields.co.uk @coolfields 36

More Related Content

Useful Accessibility Tools - WordCamp Brighton

  • 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
  • 6. Keyboard In conjunction with Enter key, Space bar and Arrow keys @coolfields
  • 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
  • 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
  • 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 From http://a11ymemes.tumblr.com
  • 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
  • 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
  • 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 36

Editor's Notes

  1. 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.
  2. Use this as an example: https://security.stackexchange.com/questions/124532/what-triggers-googles-recaptcha
  3. Use this as an example: https://security.stackexchange.com/questions/124532/what-triggers-googles-recaptcha
  4. Use this as an example: https://security.stackexchange.com/questions/124532/what-triggers-googles-recaptcha