Accessibility tools I wish I knew about sooner
Tags: a11y, html, css, javascript
Published: 2020-08-21 19:01:37

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)](https://www.w3.org/WAI/WCAG21/quickref/?currentsidebar=%23col_customize), 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](https://chrome.google.com/webstore/detail/nocoffee/jjeeggmbnhckmgdhmgdckeigabjfbddl), "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](https://chrome.google.com/webstore/detail/chromevox-classic-extensi/kgejglhpjiefppelpmljglcjbhoiplfn?hl=en) 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](https://www.deque.com/axe/devtools/) to verify accessibility, including [axe for Firefox](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/) or [axe for Chrome](https://chrome.google.com/webstore/detail/axe/lhdoppojpmngadmnindnejefpokejbdd)
* [tota11y](https://khan.github.io/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](https://developers.google.com/web/tools/chrome-devtools/accessibility/reference#audits) 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](https://chrome.google.com/webstore/detail/wave-evaluation-tool/jbbplnpkjmmeebjpijfedlgcdilocofh)

## HTML validators
* [HTML_CodeSniffer](http://squizlabs.github.io/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](https://www.paciellogroup.com/resources/contrastanalyser/) 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](https://contrast-triangle.com) which helps breakdown link contrast guidelines
* People who have colorblindness are sensitive to certain colors such as reds and greens. [Color Oracle](http://www.colororacle.org/) 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](https://webaim.org/techniques/keyboard/#testing) 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](https://dequeuniversity.com/library/) where you can find complete code snippets for common snippets


Hope that helps!