# 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.

| Tool | Where | What it checks |
| --- | --- | --- |
| The **Accessibility panel** | In the editor, from the toolbar | Your blocks as you write them, then the page surrounded by its template. |
| The badge | On your site, at the bottom left, when you browse it logged in | The page as a visitor receives it, header and footer included. |
| The contrast verdict | Under the colors of a block, in the **Styles tab** | The text color against the background color of the block. |

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 Accessibility icon in the editor toolbar, with a red dot 1 at the top and an orange dot 1 at the bottom.](https://static.lovelyrender.com/uploads/2026/10/208-accessibilite-compteur.png)

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.**

![The Accessibility panel: the line One error to fix, finding 9.1 on a level 4 heading placed after a level 2, the Show block link, then the reminder that nothing prevents publishing.](https://static.lovelyrender.com/uploads/2026/10/54-editor-accessibility-panel.png)

| Level | Color | Meaning |
| --- | --- | --- |
| Error | Red | A proven defect. In this situation, no case is correct. |
| Warning | Orange | A point that only you can decide. A video without speech does not need captions. |

## Read the panel’s checks

### On the content you write

| Criterion | Finding | Level |
| --- | --- | --- |
| 9.1 | Headings out of order: a page that does not start with a level 1 heading, several level 1 headings or a skipped level. | Error |
| 1.1 | An image with no alternative text, unless it is marked **Decorative image**. A video is never flagged under this criterion. | Error |
| 4.3 | A video set to **Manual** playback with no captions track. | Warning |
| 4.3 | A video with no player (**Loops while visible**, **On hover** or **Follows the scroll**) that carries text tracks: nobody can open them. | Warning |
| 13.8 | A video set to **Plays once when visible**: it starts on its own and cannot be stopped. | Warning |
| 13.8 | A video **Loops while visible** or **On hover**, a slideshow or tabs that rotate on their own, with **Show a pause button** turned off. | Warning |
| 2.2 | An embed or a PDF with no **Title (accessibility)**. It is then announced as **Embedded content** or **PDF document**, which says nothing about its content. | Warning |
| 6.1 | A button with no visible text or **Accessible name**. | Error |
| 11.1 | A form field whose label is hidden and empty. | Error |

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.

| Criterion | Finding | Level |
| --- | --- | --- |
| 12.6 | No main content area. Set a template container to the **main** tag. | Error |
| 12.6 | Several main content areas. | Error |
| 12.6 | Several navigation regions, one of them with no **Region name**. | Warning |

## 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.

![The Media panel of a photo: the Decorative image switch and its definition, the alternative text describing the Clos Vermeil vineyard rows in spring, then the maximum size.](https://static.lovelyrender.com/uploads/2026/10/209-accessibilite-description.png)

### 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.

**Note:** The **Search** block places its field with a hidden, empty label: finding 11.1 appears as soon as it is inserted. Write the label: it stays invisible.

### 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.

| The page has | The badge shows |
| --- | --- |
| Errors only | **Accessibility: 2 to fix** |
| Warnings only | **Accessibility: 1 to review** |
| Both | **Accessibility: 2 to fix, 1 to review** |

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.

| Criterion | Finding | Level |
| --- | --- | --- |
| 1.1 | An image with no text alternative or decorative declaration. | Error |
| 5.4 | A table with no title. | Warning |
| 5.6 | A table with no header cell. | Error |
| 6.1 | A link or a button with no text at all. | Error |
| 7.3 | An element that announces itself as a control but that the keyboard cannot reach. | Error |
| 8.2 | The same identifier carried by two elements. An anchor and a link that targets it reach the first one. | Error |
| 8.3 | A declared language different from that of the page address. | Error |
| 9.1 | No level 1 heading, several, a skipped level, or an empty heading. | Error |
| 11.1 | A field that nothing names, or a binding to an identifier absent from the page. | Error |
| 12.6 | No main content area or several (error), areas of the same kind that cannot be told apart (warning). | Error or warning |
| 12.7 | The skip link leads to an anchor that is absent from the page. | Error |

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.

**Tip:** An anchor placed in a page can have the same name as an anchor in the footer, written in two different screens. The editor does not see it. The badge flags it under criterion 8.2. Rename one of the two.

## 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).**

![A block’s color picker on a dark green, with the verdict Contrast 7.1:1. Very readable (AAA), then the Add a value for dark mode switch.](https://static.lovelyrender.com/uploads/2026/10/148-design-contraste.png)

| Ratio | Verdict | Purpose |
| --- | --- | --- |
| Less than 3:1 | **Too low. The text will be hard to read on this color.** | Insufficient in all cases. |
| From 3:1 to 4.5:1 | **Large text only (AA).** | Text of about 24 px (18.7 px in bold) or an interface element. |
| From 4.5:1 to 7:1 | **Readable (AA).** | The expected level for body text. |
| 7:1 and above | **Very readable (AAA).** | The enhanced level. |

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.

| Situation | Reason |
| --- | --- |
| One of the colors is a gradient | A gradient has no single color to compare. |
| One of the colors is transparent | The result depends on what is behind. |
| Neither the block nor its saved style has a background color | The text is read on the background of the parent block, which the panel cannot see. Set a solid background on the block to get a verdict. |

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.

| Component | What is covered |
| --- | --- |
| All pages | A focus ring visible with the keyboard, a **Skip to content** link at the top of the page, a heading, a declared language and a zoom that is never blocked. |
| Tabs | Navigation with the left and right arrows, a single tab stop for the whole bar, closed panels removed from the page, the active tab marked by a line and a color. |
| Dropdown menus | Keyboard opening, closing with Esc and focus returned, open or closed state announced. |
| Slideshow and carousel | Arrows that work with the keyboard, hidden slides removed from the page, an arrow at the end of its travel announced as disabled. |
| Modals and side panels | The window keeps the focus, puts the page underneath to sleep, closes with Esc and returns the focus to the trigger. See [Open a modal or a side panel](https://lovelyrender.com/documentation/open-modal-side-panel/). |
| Form fields | Label, description and help tied to the field, even with a hidden label. The error message is added to the description. |
| Burger menu | A real link, reached with Tab, opened with Enter and announced **Open menu**. |

## 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.

**Warning:** An empty panel and no badge mean that no defect detectable by a machine remains. A site’s compliance is declared after an audit carried out by a person, on a sample of pages.

## See also

- [Color a block](https://lovelyrender.com/documentation/color-block/)
- [Create a form](https://lovelyrender.com/documentation/create-form/)
- [Open a modal or a side panel](https://lovelyrender.com/documentation/open-modal-side-panel/)
- [Media](https://lovelyrender.com/documentation/media-block/)