# Layer accessibility

> Say what each layer is in HTML, give pictures alt text and controls a name, so screen readers and search engines read your site right.

Source: https://uxdeck.app/guide/accessibility (checked against uxdeck on 16 October 2026)

Every layer becomes an HTML element when you publish or export: a text becomes a paragraph, a frame a section, a button a button. Most of the time that guess is right. The **Accessibility** section lets you say otherwise where it matters: make a text a heading, a stack a navigation, a button a link, and give pictures and icon buttons the words a screen reader announces.

It is worth five minutes before you [publish](/guide/publish). Headings are how screen reader users move around a page, and alt text is how they know what a picture shows.

## Open the section

Select a layer. In the Design tab, the **Accessibility** section is folded behind a **+**: press it to open. It stays open as you move from layer to layer until you close it with the minus.

## Choose the element

The **HTML element** menu starts on **Automatic**, with the element uxdeck picks in brackets. The choices depend on the kind of layer:

| Layer | Elements you can choose |
|---|---|
| Text | Paragraph, Heading 1 to Heading 6, Inline text, Field label, List item, Quote |
| Button | Button, Link |
| Frame | Section, Main content, Article, Header, Footer, Navigation, Aside, Group, Form |
| Stack | Group, Navigation, Header, Footer, Section, Article, Aside, List, Numbered list, List item, Figure, Form |
| Image | Group, Figure |

A few habits that pay off:

- One **Heading 1** per screen, naming the page. Sections under it use Heading 2, and so on without skipping a level.
- The frame that holds your main links is **Navigation**; the top and bottom bands are **Header** and **Footer**; the screen's body is **Main content**.
- A button that takes people to another page is a **Link**. A button that does something here (opens a menu, sends a form) stays a **Button**.

A text with bullet or numbered list styling is always a list, so its menu is fixed.

## Name things for screen readers

- **Pictures:** type what the image shows in **Alt text**, such as "Two people reviewing a design on a laptop". If a picture is only decoration, tick **Decorative, hidden from screen readers** instead.
- **Everything else:** **Accessible name** is what a screen reader announces. A layer with words uses them (the field says **From its text**), so you only need it for a control with no words, such as an icon button: "Close", "Search", "Open menu".

## The tips under the fields

The section reads the screen and tells you what to fix, for the selected layer:

- An image with no alt text, so the export uses its layer name.
- A button or link with no words and no accessible name.
- A Link that goes nowhere, or a Button that takes people to another screen.
- More than one Heading 1 on a screen, a first heading that is not a Heading 1, or a heading that skips a level.

## Beyond one layer

- The [UX coach](/guide/coach) checks contrast, tap targets, alt text and names across the whole screen, with fixes.
- The **Publish** dialog's **Before it goes public** list flags unnamed controls and pictures before a site goes live.
- **Generate > Accessibility notes** draws focus order, tap targets, headings and measured contrast over a copy of a screen, for handing over. See [Generate states and more](/guide/generate).

## In code

What you set here is what the published site and exported code contain: the element, the alt text, the accessible name (as an aria-label), and aria-hidden on decorative pictures. In [Settings](/guide/settings), set **Names in the panels** to **Developer** and the section is called **HTML**, with the elements shown as tags.

## Catches

- **Default names are never read out.** An image with no alt text falls back to its layer name, but a name like "Image" or "Rectangle 4" says nothing, so it is left out. Write alt text.
- **Decorative hides the picture completely.** Use it only when the picture adds nothing a reader would miss.
- **The section only changes the HTML.** A text made Heading 1 keeps its look. Pair it with a [text style](/guide/styles) if you want headings to match.

Layer accessibility is on every plan.