Skip to content
Logo Theodo

Web Accessibility Check Using the RGAA Guidelines

Albéric Trancart10 min read

Web accessibility (a11y) can be a little disorienting for everyday developers. Here is a practical, down-to-earth guide with examples to help you make your websites more inclusive and comply with legislation.

Why is accessibility important?

There are three main reasons why you should make your apps and websites more accessible:

What is the RGAA?

The RGAA is the French government’s official guide to improving accessibility. It features a verification method, tests, and checks to enforce both the WCAG 2.1 AA standard and the EN 301 549 V2.1.2 norm.

You can download it here (link in french): Référentiel général d’amélioration de l’accessibilité.

However, it is not so easy to digest - there are 13 categories of criteria across 120 pages. Let’s break it down category by category to get the essential information.

I recommend that you audit one of your web pages while reading this article to put it to practice. I made a nice printable a11y checklist for you to follow along. You also may want the HTML tags reference page opened in another tab. That will come in handy for understanding the role of HTML tags you may not know or improve your knowledge of the ones you already know.

Disclaimer: following these rules will not guarantee that your site is 100% accessible. It will not replace real user tests. It will make your site easier to navigate for everyone, though.

RGAA check categories

Let’s go! To give some examples, I’ll use Falco, Theodo’s open-source WebPageTest runner and SpaceX Stats, my space-themed project as test dummies.

Warning: checking each category changes a lot from page to page and can take some time.


People using screen-readers should be able to understand the content without the visual information provided by the images.

ChooseMyCompany logo with an alt describing BNP's logo

Bad example: this image has a wrong alt attribute, it is not relevant to the image

A decorative image which has no accessible meaning

Bad example: this image should have alt=""

A SVG UI icon which is only a visual cue

Bad example: this svg should be aria-hidden="true"


Good colors and contrast are especially important for color-blind people, people with vision conditions such as myopia or simply all users over the age of 40.

You can check color contrast in one click with this extension: WCAG Color Contrast Checker for Chrome, WCAG Color Contrast Checker for Firefox.

A color contrast check with the Chrome extension

Good example: Falco is OK for color contrast

Here is an article on how Stripe chose its color palette to meet these criteria.


A well structured content is easier to understand, especially for people with screen readers.

For screen-reading, you can use VoiceOver on macOS or this Google Chrome extension if you prefer Linux like me.

To validate your HTML, you can enter your URL or copy-paste the generated HTML into the official validator.

SpaceX Stats is unreadable with a screen reader

Bad example: the text given by the screen reader is difficult to understand, and it’s even worse when it’s read aloud


Aging people often use zooming features,

A quick code snippet you can paste into the devtools in the <html> element to check text resizing:

font-size: 200%;
line-height: 1.5rem !important;
letter-spacing: 0.12rem !important;
word-spacing: 0.16rem !important;

SpaceX Stats with the text-resizing code snipper

Bad example: the layout is broken…

Keyboard navigation is important for users with motor disabilities, people having tremors, blind users but also power users of the website.

A link without a focused style

Bad example: the outline is disabled on this link

GitHub&#x27;s skip to content link

Good example: you can steal GitHub’s “Skip to content” link. Hidden by default but it’s the first focusable element and it appears if you Tab into it.


Media often convey a lot of information that can’t be accessed with visual or auditive conditions.

A chart in Falco

A chart in SpaceX Stats

Bad examples: both Falco and SpaceX Stats are using charts with no tabular alternative. Here are some examples of accessible charts with Highcharts

My opinion: providing text alternatives to complex media such as videos and charts is clearly the hardest criteria to meet. My personal strategy would be to limit the usage of such media and to have a text with a similar level of information in descriptions labeled with aria-describedby. When having user-uploaded content, you should encourage your users to provide a long description too. However, when these media are the main focus of the website (such as YouTube or TED), you can’t escape the need for captions.


A well-structured table is important for screen readers, as a badly structured one can become really confusing.

A table that can be improved

Bad example: this table is missing a caption and could use row headings on the mission names


Forms are sometimes complex to understand and to navigate, and it is even worse for people with screen readers or using keyboard navigation.

A form in Falco

Bad example: radio buttons should be placed inside a <fieldset> with a <legend> and radio inputs are not linked to their labels.

Dynamic content

You can turn off animations if the user has opted-out of them with the prefers-reduced-motion setting.

A countdown timer

Bad example: SpaceX Stats has countdowns, which update the text every second. Such a time-dependent content should use the ARIA timer role.

A quizz with a time limit

Bad example: this funny website to test your HTML knowledge is not accessible at all because many people will not be able to take the test in 112 seconds. One way to improve this would be to provide different levels of difficulty, the easiest being “no time limit”.


I hope that this article helped you audit your website and understand what should be improved to make it more accessible. For me, it was a wake-up call that I needed to re-learn some of the web basics (such as proper HTML semantics). The web is transforming our society, its inclusiveness should be a default and not a bonus.

Sources and inspirations

Liked this article?