Fix accessibility issues
- Open the Props tab and expand Page settings → Accessibility & validation. Problems are listed errors first; each starts with the element it concerns, such as
<img>#hero. - Select that element on the canvas. Checks → Element checks now shows only its problems.
- Fix it using the table below. The problem disappears from the list once fixed.
| Message | Fix |
|---|---|
| Missing alt text | Images & media → Image → alt: describe the image. For a purely decorative image, click decorative instead (sets alt=""). |
| This form control has no label | Select the field’s label and set Label → for to the field, or set aria-label on the field. |
| This link/button has no text or label | Add text inside it, or set aria-label. |
| Give the iframe a title | Embeds → Iframe → title. |
| The id ”…” is used by N elements | Give one of the elements a different id in ID & class. |
| … points to missing id … | Pick an existing element in that attribute’s picker, or remove the attribute. |
| Heading level skipped | Change the heading so levels go down one at a time (h2 → h3). |
| The page has no language | Page settings → Language → lang. |
The page has no <title> | Page settings → Title & description → Title. |
Troubleshooting
- A structural error such as “
<li>should be inside<ul>”. Move the element into the right parent on the canvas; attributes can’t fix it.
Related
- Reference: HTML checks