Accessibility module

The accessibility settings in the editor help screen readers and other assistive technology present your page correctly. You can add descriptions to elements, set heading levels, hide decorative elements from screen readers and set the reading order. You work on one element at a time in the element's Accessibility tab, or on the whole page at once in Page accessibility.

For tips on making your content meet the Web Content Accessibility Guidelines (WCAG), see best practices for accessibility in Maglr. The W3C tutorials and the Maglr blog post on accessible web design give more background.

Adding accessibility settings to an element

To add accessibility settings to a single element in the editor:

1. Select the element on the canvas.
2. In the right panel, open the Element tab.
3. Click the Accessibility icon (the glasses icon).
4. Fill in the fields the element offers, such as a description or a heading level.
5. If the element is only decorative, tick Hide decorative element so screen readers skip it.

The fields in the Accessibility tab depend on the type of element:

• Description: a text field labelled Describe element, followed by the element type (for example image or video). Screen readers read this description instead of the element. Text elements have no description field, because screen readers read the text itself.
• Heading: for heading text, a choice of heading level from H1 to H6, or - for none. Screen reader users scan a page by its headings.
• Link description: for an element whose link opens more than one element, the description field is labelled Describe the link. Describe what happens when a visitor clicks it.
• Focus element: for an element whose link opens more than one element, a choice of which element or group a screen reader focuses on first. If you don't choose one, the first linked element is used.
• Hide decorative element: a checkbox that hides the element from screen readers. Use it for background images and other elements that carry no information.

The Accessibility tab also has an Open accessibility editor button, which opens Page accessibility for the whole page.

Checking the whole page with Page accessibility

Page accessibility lists every scene on the page and the elements in it that carry information, in the order a screen reader reads them. Use it to set the reading order, add descriptions, mark decorative elements and find elements that still miss accessibility information.

To check the whole page with Page accessibility:

1. Click the M menu at the top left of the editor.
2. Click Page accessibility. The "Make your page accessible" window opens. The first time, a help screen covers it: click Start optimising to close it.
3. Choose Desktop or Mobile at the top of the window.
4. Drag elements in the list into the order a screen reader should read them.
5. For each element that is only decorative, tick its checkbox in the Decorative column.
6. Click an element in the list to add its description, heading level or focus element on the right.
7. Repeat steps 3 to 6 for the other layout.
8. Click Save changes.

You can also open Page accessibility with the Open accessibility editor button in any element's Accessibility tab.

Good to know about Page accessibility:

• Reading order: the list starts in position order, from top to bottom and then left to right. Reset order puts the current layout back into that position order.
• Desktop and mobile: the reading order is set separately for each layout. Descriptions and decorative settings made for desktop also apply to mobile, unless you change them in the Mobile tab.
• Decorative elements: elements marked as decorative can't be dragged in the list. The Hide decorative elements button only hides them from the list view; it doesn't change your page. Click Show all elements to see them again.
• Elements not in the list: shapes without a link, and vectors without a link or an image fill, don't appear, because they carry no information for screen readers.

Warnings in Page accessibility

In Page accessibility, a ! next to an element means it is missing accessibility information. Click the element to see the warning on the right. The ! appears for:

• an image without a description
• a chart, slideshow, audio file, embed or form without a description
• a video that isn't uploaded (for example a YouTube or Vimeo video) without a description
• an element with a link that has no description of what the link does
• an uploaded video without separate subtitles
• heading text without a heading level
• a group opened by a link that has no description

Elements marked as decorative don't get a warning.

Frequently asked questions

Why is an element missing from the Page accessibility list?

Shapes without a link, and vectors without a link or an image fill, don't appear in the Page accessibility list, because they carry no information for screen readers.

Do I need to set accessibility separately for mobile?

The reading order is set separately for desktop and mobile in Page accessibility, so check the order in both the Desktop and Mobile tabs. Descriptions and decorative settings made for desktop also apply to mobile, unless you change them in the Mobile tab.

What happens if I close Page accessibility without saving?

When you close Page accessibility with unsaved changes, the editor asks whether to save them. Choose Save to keep your changes, or Don't save to undo everything you changed in the window.

Why is the Accessibility tab greyed out?

The Accessibility tab in the right panel is not available when you have selected more than one element, the scene background, a mask, or a 3D camera, model or light. Select a single element of another type to use it.

Updated on: 29/10/2026