How-to guidesFix accessibility issues

Fix accessibility issues

  1. 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.
  2. Select that element on the canvas. Checks → Element checks now shows only its problems.
  3. Fix it using the table below. The problem disappears from the list once fixed.
MessageFix
Missing alt textImages & media → Image → alt: describe the image. For a purely decorative image, click decorative instead (sets alt="").
This form control has no labelSelect 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 labelAdd text inside it, or set aria-label.
Give the iframe a titleEmbeds → Iframe → title.
The id ”…” is used by N elementsGive 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 skippedChange the heading so levels go down one at a time (h2 → h3).
The page has no languagePage 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.