Turning on 'Modern' accessibility will automatically detect the text from your pages, however it’s essential to configure additional settings to ensure your content complies with accessibility standards and best practices.
The following section provides a detailed overview of the available settings to help ensure your content is accessible.
For further information and detailed instructions on specific areas, look out for hyperlinks throughout this section.
Link Interactivity
Ensure interactivity is linked to its related panel, so that screen readers can recognise the association and relay the information accurately.
- Click on a piece of Interactivity on your page.
- Select the 'Link to Panel' icon from the flyout menu.
- Select the panel that you would like to link the piece of Interactivity to.
Reading Order
The reading order of the panels on each page of your document is crucial to ensure they can be read out in a logical and understandable sequence by a screen reader. It's also essential for users who rely on keyboard navigation rather than a mouse, to ensure they can navigate through your content using the tab key or other keyboard shortcuts.
If the reader order is incorrect, the content may be presented out of context, making it difficult or even impossible to understand, which can lead to a frustrating and confusing experience.
- Select the 'Accessibility' tab.
- Select the 'Reading Order' palette.
- Click and drag the panels to set the correct reading order.
Hide from screen reader
If an image is purely decorative and doesn’t provide any meaningful information it can be hidden from screen readers to avoid unnecessary clutter and distractions. Examples include background images, spacers or dividers.
- Select the 'Accessibility' tab.
- Select the 'Reading Order' palette.
- Select the sound icon to toggle between shown and hidden.
Tooltips & Alt Text
Image alt text is critical when creating accessible documents, as it describes the appearance of a photo or graphic on the page. Read more about writing image alt text on the W3C website.
It's also important to give meaningful names to the pages in your document and include tooltips for interactivity, as both will be read out by screen readers - they should be written in a way that makes sense to users who are blind or have low vision.
Page Name
- Select the 'Pages' palette.
- Select 'Add New Page' to open the Document Builder.
- Hover over a page and enter a page name.
Press the Tab key to navigate through the pages, making it more efficient to name each page.
Interactivity
- Select a module on the page.
- Enter a short description of it into the 'Tooltip' field.
Image Alt Text (Layout Library)
- Ensure you are in 'Content' mode.
- Select an image panel on the page, followed by 'Image Alt Text'.
- Enter the alt text into the 'Alt Text' field.
Image Alt Text (Fully Editable)
- Ensure you are in ‘Design’ mode.
- Select an image panel on the page to activate the 'Settings' palette.
- Enter the alt text into the ‘Image Alt. Text’ field.
- Aim for 125 characters or less.
- Describe the content of the image without being too wordy.
- Avoid redundant phrases like "image of" or "picture of" as screen readers already know it's an image.
Image Gallery Captions
Captions help screen readers interpret the images used in an Image Gallery for users that cannot see them. Screen readers will read the caption aloud, even if it's set to hidden, providing valuable information about the image.
- Edit an Image Gallery module.
- Enter a caption into the 'Caption' field.
- Select 'Save'.
Subtitles
Subtitles are a key tool for making content more accessible, engaging, and inclusive, enhancing the viewing experience for a wider range of people. They can be added using our subtitles editor and:
- provide a way for people who are deaf or hard of hearing to fully engage with video content.
- make content accessible to individuals who speak different languages or are learning a new language.
- help with understanding content in noisy environments where the audio is unclear.
- support dual learning (hearing and reading), which enhance memory retention.
Automation
- If off-page interactivity is used for automation, ensure visitors know what to expect.
Consider adding additional text to a More Information pop-up to let your visitors know what will happen next.
- Time-based automation should be avoided, as it can negatively impact visitors with a slower reading pace or those using screen readers.
Focus Outline Colour
When navigating around a document using a keyboard, the focus outline is the visible indicator that shows which piece of interactivity is currently selected.
- Click on a piece of interactivity on your page.
- The 'Settings' palette will activate.
- Select a colour from the colour picker for 'Focus Outline Colour'.
Remove unused panels/interactivity
Ensure any unused panels or interactivity are deleted from your document. This ensures your content is focused, and only contains what's necessary for clear and effective communication.
Menus
Menus play an important part in enhancing the accessibility of your content for users who rely on assistive technologies and keyboard navigation.
They can be easily accessed using keyboard shortcuts, such as the Tab key, allowing individuals who may have difficulty using a mouse to interact with your content.
It's essential to clearly label and organise menu items, as this helps screen readers announce the options in a clear and user-friendly manner for individuals using a screen reader.