World Wide Web Consortium (W3C) do a great job of not only tirelessly researching ways of making the web better, but also go to great lengths to explain advice in the form of Web Content Accessibility Guidelines (WCAG).
As good as these guidelines are, including their how to Meet WCAG (quick reference), here are some tools which I've found great to break these guidelines down.
Do note that automated tools can only go so far and not a replacement for understand the guidelines.
Browser plugins
- To quote NoCoffee, "vision problems are more pervasive than most of us realise. Upwards of 285 million people worldwide are visually impaired. Many more have low or moderate visual difficulties". NoCoffee can help understand problems such as: Low Acuity, Low Contrast Sensitivity, Colour-blindness, visual snow, glare ghosting and cataracts, Nystagmus or Obscructed visual field
- As engineers it's sometimes preferable to develop in Chrome. However in the case of Mac; VoiceOver works best with Safari and not so great with Chrome. For those times when you want to quickly check how a screen reader would perceive something ChromeVox is an option. Although I would always recommend re-checking with a recommended browser + screen reader at the end
- AXE do a range of great tools to verify accessibility, including axe for Firefox or axe for Chrome
- tota11y "helps visualise how your site performs with assistive technologies... In many cases, developers must have some prior accessibility knowledge in order to make sense of the results. Instead, tota11y aims to reduce this barrier of entry by helping visualize accessibility violations (and successes), while educating on best practices."
- Within Chrome DevTools there is the ability to audit a page's accessibility. Chrome states that it helps to determine if: "a page is properly marked up for screen readers. The text elements on a page have sufficient contrast ratios."
- Probably one people are more familiar with, WAVE Evaluation Tool
HTML validators
- HTML_CodeSniffer "is a client-side script that checks HTML source code and detects violations of a defined coding standard. HTML_CodeSniffer is written entirely in JavaScript, does not require any server-side processing and can be extended by developers to enforce custom coding standards by creating your own 'sniffs'."
Colour
- Colour Contrast Analyser is a great accessibility tool for when you need to do pixel picking to test colour contrast ratios. It also simulates certain visual impairments, including colourblindness
- The Contrast Triangle which helps breakdown link contrast guidelines
- People who have colorblindness are sensitive to certain colors such as reds and greens. Color Oracle is one tool that can be used to test web page designs for effective color usage. Color Oracle is a free colorblindness simulator that can be used for Windows, Mac, or Linux. It applies a color filter on the web page that simulates how a person with colorblindness may see a design. Testers and designers can use the tool to determine whether colors used in the design may cause issues for people who have colorblindness
Keyboard accessibility
- A guide to most of the common online interactions, the standard keystrokes for the interaction, and additional information on things to consider during testing
Code snippets
- Deque University have a growing code library where you can find complete code snippets for common snippets
Hope that helps!
Top comments (2)
Nice work Vicki that's a great post. Have you heard about the cool inspector options in Chrome 84? The "name" feature (on inspect) is a great step-up for an easy way of finding the accessible name: developers.google.com/web/updates/...
Ah yes! Another great tool.
Thanks for sharing.