Web Accessibility is a huge topic. It can be frightening to start working on that kind of challenge. No worries, there are many resources on the web to help start with it !

And many tools to help you improve the accessibility of your website.

Here are the ones I used to check some websites.

Guidelines for Web Accessibility

First thing first. It’s huge but we can not start working on a problem without knowing the specs :)

All the main guidelines can be found here:

W3C Web Accessibility Initiative WAI

There are organised around 4 principles.

Principle 1: Perceivable

Information and user interface components must be presentable to users in ways they can perceive.

Principle 2: Operable

User interface components and navigation must be operable.

Principle 3: Understandable

Information and the operation of user interface must be understandable.

Principle 4: Robust

Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.


It can be a bit stodgy to start with reading all guidelines, so I would recommend to start with their “Easy checks”.

Easy Checks – A First Review of Web Accessibility

From another source: I like this accessibility checklist where we can filter by tag. “JS, HTML, CSS” for example, or “forms”, “images and icons” to perform checks.

Accessibility checklist

checklist


Tools to work locally

Below, I link the extensions for Chrome, but most of these extensions have equivalent in other browsers:

WebDev Toolbar

They are many nice options to play with, for example, form checks to perform many checks locally.

Below, when clicking on "WebDev toolbar" > Forms > Populate Form Fields the form is automatically filled.

webdev toolbar

Or "WebDev toolbar" > Information > See document outilne option shows the heading structure of the page.

webdev toolbar outline

WCAG Color contrast checker allows you to check that the contrast of your website is compliant with the minimum required.

WCAG Color contrast checker

For information, the minimum contrast required between colors is at least 4.5:1 for normal-size text.

WCAG

I used it to check a simple form. It checked all elements: the 4 labels, 1 button and 1 title h1.

WCAG

For example, contrast is 9.66:1 for the grey text on white background. It complies with the minimum required. At the bottom, it is indicated that all checks are green for AA and AAA levels.

What are AA and AAA levels ?
WCAG 2.0 guidelines are categorized into three levels of conformance in order to meet the needs of different groups and different situations: A (lowest), AA (mid range), and AAA (highest). [...] UC recommends AA conformance for all Web-based information.

Source

Achecker.ca

This allows you to perform checks on forms with descriptive error messages.


Other tools

Dark Mode

The browser Dark Mode allows you to turn on and off the dark mode on your browser.

I will give more context about Dark Mode in an incoming post. But it is important to know that some users prefer the darkmode for eye-comfort: reduce luminance, inverted contrasts… so they activate by default the browser darkmode.

This extensions help you watch the rendering of your website in this mode.

Chrome Dark Mode

ChromeVox Classic Extension

ChromeVox allows you to have a voice reading the different sections of the page and check that everything important is covered and comprehensible. You can tab all over your website and have the audio version of your text read by the extension.

ChromeVox Mode

Colorblind - Dalton for Google Chrome

To test color from color-blind people perspective.


Audit your website

For these checks, you have to provide the URL of your website, so the changes have to be live.

WAVE Web Accessibility Evaluation Tool

WAVE is a suite of evaluation tools that helps authors make their web content more accessible to individuals with disabilities.

WAVE

Applied to my blog, there are many details on what goes wrong and can be improved:

WAVE details

Color Contrast Accessibility Validator

A11y

Applied to my own blog, there are good contrast-pairs except for one problem detected. The ratio of contrast of the approve button on my cookie banner is too low (2.9:1 instead of the minimum required: 4.5:1). This is something I can fix quickly.

A11y-bad contrast


Courses

Google Udacity

This is a course on Accessibility by Google

Fundamentals of web accessibility explained by Google

This is a text-based version of part of the content covered in the Udacity course

Final Word

There are many many tools to help improve Web Accessibility. Of course, I haven’t tested them all and I may have forgotten some important ones. But with these ones, I could already do some good work to perform checks on Web Accessibility :)

I will give more context on how to use these tools in the process of checking a website in incoming post(s)

Updated: