Check the accessibility of your pages

This article explains how to spot and fix the accessibility defects that a machine can recognize: in the editor, on the served page and in the contrast of your colors. You will also learn what these tools do not check.

Before you start

Three tools flag the accessibility defects that a machine can recognize. Each one sits where the fix costs the least.

No finding prevents saving or publishing, not even an error. None of these tools gives a score or declares a page compliant.

Check a page in the editor

1. Open the page in the editor.
2. Look at the Accessibility icon in the toolbar. A red dot counts the errors, an orange dot the points to review. Beyond nine, it shows 9+.
3. Click the icon. The Accessibility panel opens on the Automatic checks section.
4. Read each finding. It starts with the number of the RGAA criterion concerned.
5. Click Show the block under the finding. The block in question is selected.
6. Fix the block. The finding disappears from the panel.

The panel also opens from the ⋮ menu at the top right, then Accessibility. It updates while you edit the page. A line at the top counts the points, for example One error to fix. With no findings, it shows Nothing to report on the checks a machine can decide.

Read the panel’s checks

On the content you write

Only a captions track clears warning 4.3. An audio description track alone does not.

A heading set to Render as non-heading element leaves the outline of the page: check 9.1 does not count it.

On the page surrounded by its template

These checks look at the page with the header, menus and footer of its template. They are fixed in the template and have no Show the block link.

Fix common findings

Describe an image

1. Click Show the block under finding 1.1. The Media block is selected.
2. In the Settings tab, Media panel, fill in the Alt text with what the image shows.
3. If the image brings no information, turn on Decorative image instead.

Name a field with no visible label

A search field in a header often does without a visible label. Write the label, then turn off Show label. The label is still read by screen readers and finding 11.1 disappears.

Tell two menus apart

When a page carries two navigation regions, select the container of the second menu in the template and fill in Region name, for example “Footer menu”. The warning disappears.

Leave a warning as it is

A warning can stay if you judge there is nothing to fix. A mood video without speech keeps its warning 4.3, which blocks nothing. A video set to Plays once when visible remains acceptable if it lasts less than five seconds and has no sound. Its content must also appear as text in the page. Otherwise, set its playback back to Manual.

Check the served page with the badge

1. Log in to your site’s administration.
2. Open the page on your site.
3. At the bottom left, read the badge, for example Accessibility: 2 to fix.
4. Expand the badge. Each line gives the criterion, the finding and, when it targets an element, a landmark to find it: its tag, its identifier or its classes.

A page with no findings shows no badge. The badge appears only to logged-in people who can edit content: your visitors never see it.

The badge reads the full page, as the server sends it: the declared language, the header and footer, the content lists and the forms once filled in, the links as they are written in the page. It therefore finds defects that the editor does not see.

On the served page, the first heading may belong to the site header. The badge therefore checks that there is a single level 1 heading and no skipped level. It does not check that this heading comes first.

Check the contrast of your colors

1. Select a block and open the Styles tab, Colors panel.
2. Choose a text color and a background color.
3. Read the verdict under the picker, for example Contrast 4.7:1. Readable (AA).

Only the verdicts to review are in color: red for a contrast that is too low, orange for a contrast reserved for large text. When the block has colors of its own for dark mode, two verdicts appear, preceded by Light mode: and Dark mode:. A site that has only one mode shows only one.

The link color is not part of the calculation, nor is a background image or video. For text placed on an image, check the result on the page.

Rely on the components that ship with the product

Part of accessibility is built into the blocks themselves, with no setting on your part.

Know the limits of these tools

The RGAA has 106 criteria, broken down into 258 tests. A machine decides only a small part of them, what can be observed in the code of the page. These tools do not judge:

• whether an alternative text really describes the image;
• whether the title of a link makes sense out of context;
• whether captions are accurate, complete and synchronized;
• whether the label of a field is understandable;
• whether text placed on an image, on a gradient or on the background of a parent block remains readable;
• whether the whole page can be navigated with the keyboard in the right order.

Each page is checked separately: the panel examines the page open in the editor, the badge the one you are visiting. Browsing your site while logged in is the quickest way to go around it.

See also

• Color a block
• Create a form
• Open a modal or a side panel
• Media