Web Accessibility Guidelines

Make sure to check my blogpost Web Accessibility Guidelines 2022 Update

Ideally, applying a11y (accessibility) guidelines should be a part of the development process, rather than an afterthought.

I propose the following steps:

Steps to perform an a11y audit

1/ Automatic testing

There are a handful of these types of tools. All of them run an audit check and provide a list of things to change. These tools are described here in more detail: https://a11y.coffee/start-testing

  • WAVE Web Accessibility Evaluation Tool: in my opinion it is the tool that gives a quickest and most visual overview. I’d start here. https://wave.webaim.org/

  • Additional tools that provide similar information:

    • Firefox a11y audit in Firefox developer tools (recommended)

      • In a11y dev tools tab, select: “All issues”, “show tabbing order”, and color deficiency simulations

    • Chrome's lighthouse audit in chrome developer tools

    • Axe browser extension https://www.deque.com/axe/

    • Accessibility insights

In my opinion, running one of the above should be enough to cover this point.

2/ A11y checklist

Use an a11y checklist to discover issues that automated tools might have overlooked: https://www.a11yproject.com/checklist or https://webaim.org/standards/wcag/checklist

3/ Manual testing

Cross-check the following use cases:

  • Interactive elements should follow ARIA guidelines: https://www.w3.org/TR/wai-aria-practices/

  • Each page should be keyboard navigable

  • Each page should be screen reader navigable (navigate with closed eyes using keyboard and a screen reader)

  • Focus styles should be apparent

  • Touch points should have appropriate dimensions on touch device sizes: 48x48pt minimum for touchable areas, and 32pt of space in between touchable elements

  • View site in grayscale, make sure it is readable (use nocoffee from the resources section)

  • View site in high contrast mode, make sure it is readable (use nocoffee from the resources section)

  • View site at 200% magnification


General resources

Tools and extensions



The NoCoffee extension for Chrome seems gone. For high contrast mode, you can use this High Contrast extension for Chrome