Web accessibility ensures that digital content is usable and inclusive for all individuals. Standards supports alternate text for media, and content tags for text enhancing screen reader functionality.

In this guide:

Alternate Text

When using Media throughout your project, it is important to keep accessibility in mind. Standards allows you to include meta descriptions for both Media elements, and the Files themselves.

What meta descriptions are

Meta descriptions are short text based statements that describe the subject or the meaning of visual content, and are programmed to display when that visual content is not available, such as when browsing with a screen reader.

How descriptions are displayed

If a Media element and the File it’s referencing both include a description, the Media description will be shown.
If a File includes a description, but the Media element referencing that file does not, the File description will be shown.
If neither the Media element or the File it’s referencing include a description, no description with be shown.

Add alternate text to Media

Within the editor, select Media
In the right sidebar at the bottom, there is a settings group named Accessibility
Input alternate text into the field

Writing descriptions for Media elements

When writing a description for a Media element, it is often best practice is to describe the context or meaning of the media rather than the subject, since the file could easily change.

<aside> 📖

Example: “Demonstration of proper logo clearspace”

</aside>

Add alternate text to a File

Within the editor, select the Files tab from the top right of the sidebar
Select the desired file
Input alternate text into the Image description field

Writing descriptions for Files

When writing a description for a File, the best practice is to simply describe the subject or content rather than the meaning, since it could be placed in any context.

<aside> 📖

Example: “Logo surrounded by an empty frame defined by the height of the symbol”

</aside>

Content Tags

Adding content tags to text provides data that may be used by browsers and search engines to infer the hierarchy of text content without visual cues, and may effect how the text is displayed on screen readers or in other environments.

Adding tags to text

Within the editor, select a text block
In the right sidebar at the bottom, there is a settings group named Accessibility
Select the Content tag dropdown, then select the tag that best fits the text content

Resources

Learn more about improving site accessibility: https://www.w3.org/TR/WCAG22

Check color contrast: https://webaim.org/resources/contrastchecker/

Related guides

Media

Text

Return to Standards Help Center