Layer accessibility

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

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, 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 if you want headings to match.

Layer accessibility is on every plan.