Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Useful Accessibility Tools - WordCamp Brighton

122 visualizaciones

Publicado el

A look at some useful accessibility tools.

These tools help test websites for accessibility, and there are a couple of WordPress plugins that can help improve a website's accessibility.

Publicado en: Tecnología
  • Sé el primero en comentar

Useful Accessibility Tools - WordCamp Brighton

  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 From http://a11ymemes.tumblr.com
  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 36

×