Maglr & WCAG Accessibility

WCAG and Maglr publications

You can create publications in Maglr that follow the Web Content Accessibility Guidelines (WCAG). The navigation environment around your pages is set up for accessibility automatically; you only need to check that its colors have enough contrast. The content of your pages depends on how you build them: this article lists the settings and design choices that make that content accessible.

WCAG is the W3C standard for making digital content usable for everyone, including people who use a screen reader or other assistive technology. Its goal is that every visitor can perceive, understand, navigate and interact with your content. To learn more, see the W3C WCAG overview or Maglr's blog post on web accessibility.

Open our 'How to' accessibility presentation

Accessibility principles

Two principles apply to every Maglr page:

Describe every element that carries meaning. A visitor with a visual impairment, a screen reader and a search engine can't "see" an image or a chart. A good description tells them what the element is and what purpose it serves on the page.
Keep the structure and design of a page simple. A page with many layers, or popups inside popups, is hard to follow for visitors who use a screen reader or other assistive technology.

Using Page accessibility

Page accessibility is the editor window where you check and fix the accessibility of a whole page. It lists the elements of each scene, and it lets you:

set the reading order of the elements
add a description to each element
hide decorative elements from assistive technology
set the heading level of each heading

For a full walk-through of the window, see the Accessibility module article.

Opening Page accessibility

To open the Page accessibility window in the editor:

Click the options menu in the top-left corner, marked by an M.
Choose Page accessibility.
If an introduction screen appears, click Start optimising.

You can also open the window from a selected element: on the Element tab, open the Accessibility sub-tab and click Open accessibility editor.

Setting the reading order

The reading order is the order in which a screen reader reads the elements on a page. In the editor you position elements freely on the canvas, so the order that looks right visually can differ from the order in the page code. Changing the reading order changes nothing in your design.

To set the reading order:

Open the Page accessibility window from the options menu (M) in the top-left corner of the editor.
Choose Desktop or Mobile.
Drag the elements into the order a screen reader should read them.
Repeat for the other layout. Desktop and Mobile each have their own reading order.
Click Save changes.

Until you change it, the reading order follows the position of the elements on the canvas: top to bottom, then left to right. Reset order puts the list back in that position-based order. Elements inside a group are ordered within that group. Shapes and vectors that have no link and no image fill don't appear in the list.

Describing or hiding elements

Every element that carries information needs a description, and every element that is only decorative should be hidden from assistive technology. A hidden element is skipped by screen readers, so visitors only hear the information that matters.

To describe or hide an element:

Select the element on the canvas.
In the right panel, open the Element tab, then the Accessibility sub-tab.
Type a description in the Describe element field, or tick Hide decorative element.

You can do the same for every element in the Page accessibility window. Each row has a checkbox in the Decorative column to hide the element. Click a row to open that element's settings on the right of the window, where you type its description. The Hide decorative elements / Show all elements button in that window only filters the list. It doesn't hide anything on the page.

Text elements (headings, text, buttons and tables) have no description field, because a screen reader reads their visible text.

Fixing missing information

The Page accessibility window marks an element with a ! when it is missing accessibility information. An element is marked when:

a heading has no heading level
an image or image button has no description
a chart, slideshow, audio, embed or form, or a YouTube, Vimeo or linked video, has no description
a clickable element that isn't text has no description
an uploaded video has no subtitles
a group that another element opens has no description

Click a marked element in the list to open its settings on the right of the window. A message there says what is missing. Fill it in, then click Save changes. Subtitles are added on the video's Settings sub-tab instead.

Accessibility settings per element

Headings

A heading level tells screen readers and search engines how important a heading is. Visitors who use a screen reader often scan a page by jumping from heading to heading, the same way sighted visitors scan a page visually. Correct heading levels also help search engines understand the topic of your page.

Heading levels run from H1 (most important) to H6 (least important). Use the heading element for every heading, and use H1 only once per page. A heading with no level is marked with a ! in the Page accessibility window.

To set the heading level:

Select the heading on the canvas.
In the right panel, open the Element tab, then the Accessibility sub-tab.
Under Heading, choose H1 to H6.

You can also set the heading level of each heading in the Page accessibility window.

Images

Give every image a description of what it shows. If an image is only decorative, tick Hide decorative element on its Accessibility tab instead. A screen reader announces an image that isn't hidden, which confuses visitors when the image has no information to offer.

Buttons and links

A screen reader reads out the text of a button or link, so that text must say what happens on click. "Read the article about horses" tells the visitor what to expect; "Click here" does not.

Buttons and text links: these have no description field. Write button and link text that describes the action.
Image buttons and other clickable elements (such as an image, shape or group with a click action): fill in the description on the element's Accessibility tab, describing what happens on click.

Video

Give every video a description on its Accessibility tab. For an uploaded video, also add a subtitle file, so the content is available to visitors who are deaf or hard of hearing. An uploaded video without subtitles is marked with a ! in the Page accessibility window.

To add subtitles to an uploaded video:

Select the video on the canvas.
In the right panel, open the Element tab, then the Settings sub-tab.
Open the video's source menu.
Under Subtitles, click Select a file and choose a .vtt (WebVTT) file.

The Subtitles field appears only for a video uploaded to Maglr. For a YouTube or Vimeo video, add the subtitles on YouTube or Vimeo. A video added by a link to a video file has no subtitles field.

Audio

Give every audio element a clear description of what the audio is about. Background audio, set as Background audio in a page's settings from the Pages panel on the left, can't have a description. Never put essential information in background audio.

Slideshow

A slideshow has one description for the whole slideshow; you can't add a description per image. Write a description that covers the contents of the entire slideshow.

Chart

Give every chart a description that explains what it shows. A description can't always tell the whole story, but it should get the main message across.

Forms

Give the form element a description on its Accessibility tab. In the form editor, give every field a clear Label, and write an Error message that tells the visitor what to enter. Make the Success message clear as well.

Embed

Give every embed a description of the embedded content. You are responsible for the accessibility of the embedded code, so keep that code as simple as possible.

Groups and popups

A group that opens when a visitor clicks a button or another element works as a popup. To make a popup accessible:

Describe the group. Give the group that opens a description, so screen readers announce what opened.
Set the focus element. When one click opens several elements, choose which group a screen reader should focus on first (see the steps below). Choose the group that holds the content, not a group with only a background.
Add a visible close button. Give it text that says what it does, such as "Close" or "Back to the main story".
Hide decorative groups. Ticking Hide decorative element on a group hides the group and all elements inside it from screen readers.
Keep popups simple. Avoid groups inside groups and popups inside popups.

On the published page, when a visitor opens a popup, focus moves into the popup and the Tab key stays inside it. The visitor can close the popup with the ESC key or tab to the close button.

To set the focus element for a button that opens a popup:

Select the button that opens the popup.
In the right panel, open the Element tab, then the Accessibility sub-tab.
Under Focus element, choose the group that holds the popup's content.

Focus element appears only when the click action opens more than one element. You can also set it in the Page accessibility window.

Design guidelines

Color contrast

Text must stand out clearly from its background for visitors with low vision. WCAG sets minimum levels for color contrast between text and background. The editor doesn't restrict color combinations or check contrast, so check it yourself, for example with a Color Contrast Checker. Also check the colors of the navigation environment, in its settings under Navigation environment in the dashboard.

Page and scene names

Give every page and scene a name that describes its content. Scene names are read out to screen reader users, so descriptive names help them find their way through a publication.

Animations

Animations are allowed under WCAG, but keep them few and short:

Avoid fast or repeating animations, which can trigger seizures.
Keep each animation shorter than 5 seconds.

Visitors can't pause animations on the page. If a visitor's device is set to reduce motion, hover and loop animations and scene transitions are switched off; other animations still play.

Frequently asked questions

Does Maglr comply with WCAG?

Maglr makes it possible to create publications that follow WCAG, but whether a publication complies depends on its content. The navigation environment is set up for accessibility automatically. For your pages, you set descriptions, heading levels, reading order and decorative elements in the editor, and you choose accessible colors, text sizes and animations. Maglr doesn't state a formal WCAG conformance level.

Can visitors turn off animations?

Not on the page itself: there is no pause control. If a visitor's device is set to reduce motion, the published page switches off hover and loop animations and scene transitions. Other animations, such as entrance animations, still play, so keep animations short and avoid fast or repeating ones.

Can I add subtitles to a YouTube or Vimeo video?

Not in Maglr. Add the subtitles on YouTube or Vimeo instead. The Subtitles field in the editor is only for videos uploaded to Maglr.

Can I add a description to each image in a slideshow?

No. A slideshow has one description for the whole slideshow. Write a description that covers the contents of all its images.

Why can't I add a description to a button?

A text button has no description field because a screen reader reads its visible text. Write button text that says what happens on click, such as "Read the article about horses" instead of "Click here". Image buttons and other clickable elements that aren't text do have a description field, on their Accessibility tab.

Does Maglr check color contrast for me?

No. The editor doesn't restrict or check color combinations. Check the contrast between text and background yourself, for example with a Color Contrast Checker, against the WCAG minimum levels for color contrast.

Updated on: 16/10/2026