Steps to take towards WCAG for each Maglr project

Making a Maglr project meet the Web Content Accessibility Guidelines (WCAG) takes four phases: gathering content, designing, building in the editor, and checking the result in the accessibility module. Accessibility work starts before you open the editor, because many WCAG requirements depend on choices made while planning and designing the project.

Designer responsibility for accessibility

The Maglr editor lets you design a project freely, including the colors, layout and effects. Because of that freedom, the designer of the project is responsible for accessibility choices the editor does not check, such as color contrast and how complex the layout is. The editor gives you the accessibility settings; whether a project meets WCAG depends on how it is designed and how those settings are filled in.

Gathering content for an accessible project

Before you start building a Maglr project, gather or create the content assets you need, and plan how each one will be described for assistive technology such as screen readers. Rich media, links and interactive elements each need a description that helps people understand what they show or do. Writing these descriptions while you gather content means they are ready when you build the project.

Designing a project for accessibility

Use the design phase to decide how a Maglr project is structured. Early designs can be quick concept sketches. Before the design is final, decide on:

• Heading types: which text is a heading, and its level (H1, H2 and so on). Use H1 once per page.
• Color contrast: enough contrast between text and its background.
• Animations: how much movement the project uses.
• Group complexity: how deeply groups are nested inside other groups.
• Desktop and mobile: how the content works on both layouts, because each layout has its own reading order.

When the design is final, the person building the project in Maglr should know how it is structured and how each element meets the WCAG guidelines. Each element has its own accessibility options and best practices: see making your Maglr elements accessible.

Building the project with accessibility settings

Apply the accessibility settings while you build a Maglr project, rather than afterwards. Add descriptions, heading types and link descriptions as you place each element, in the element's Accessibility tab in the right panel. Complete these settings for every element that has them, and add a description to each group that a button opens.

To add subtitles to an uploaded video, select the Video element and add the subtitle file under Subtitles in the element's settings. The Subtitles field is only available for videos uploaded to Maglr, not for videos added as a link (YouTube, Vimeo or a link to a video file).

Checking accessibility with the accessibility module

The accessibility module in the Maglr editor lists every element on a page, scene by scene, in the order a screen reader reads them. Each element row shows a warning when an accessibility setting is missing. In the accessibility module, you can:

• Set heading types (H1 to H6) to create a hierarchy of headings.
• Change the reading order of the elements.
• Add an alternative description (alt text) to images, and a description to videos and other media.
• Describe what happens when a visitor clicks a link.
• Hide decorative elements from assistive technology.
• Check that uploaded videos have a subtitle file.

The module does not check color contrast or animations. For more about the module, see the accessibility module article.

To check a page in the accessibility module:

1. In the editor, go to the options menu in the top-left corner, marked by an M.
2. Click Page accessibility. If an introduction screen appears, click Start optimising.
3. At the top of the popup, make sure Desktop is selected.
4. Click an element row that shows a ! warning. In the settings on the right, resolve the warning: add a description, set the heading type, describe the link action, or tick Hide decorative element if the element has no informational value.
5. Drag the element rows into the order a screen reader should read them. To set the order again from the layout, click Reset order.
6. Click Mobile at the top of the popup and check the reading order of the mobile layout. Settings you made in Desktop also apply to mobile; a change you make while Mobile is selected applies to the mobile layout only.
7. Click Save changes.

You can also open the accessibility module from an element: select the element, open the Accessibility tab in the right panel, and click Open accessibility editor.

Frequently asked questions

Does the accessibility module check color contrast?

No. The accessibility module in the Maglr editor checks for missing descriptions, heading types, link descriptions and subtitles on uploaded videos, and lets you set the reading order. Color contrast and animations are not checked, so the designer of the project needs to check them.

Does a Maglr project automatically meet WCAG?

No. The Maglr editor gives you accessibility settings and the accessibility module, but whether a project meets WCAG depends on its design, such as color contrast, and on filling in the accessibility settings for its elements.

Do I need to set the reading order for mobile separately?

Yes. The accessibility module keeps a separate reading order for the desktop and mobile layouts. Check the order with Desktop selected, then click Mobile at the top of the module and check it again.

Updated on: 22/10/2026