Skip to main content
Web accessibility ensures that content is usable and inclusive for all individuals. These accessibility descriptions also enable better search results.
Accessibility Hero

​
Image descriptions

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 image descriptions are

Image 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. They are also used for aria-labels such as on buttons without text, and on groups to demarcate sections.

​
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 will be shown.

​
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. Example: “Demonstration of proper logo clearspace equal to the logotype’s x-height”

​
Add image descriptions to Media

Accessibility Media Description
1

Select media

Within the design or content mode of the editor, select a media element
2

Enter image description

When in design mode, enter the description into the right sidebar in the Description settings group at the bottom. In content mode, enter the image description in the contextual popup.

​
Add image descriptions to a File

Accessibility Image Descriptions
1

Select file

Within the editor, select the Files tab from the top of the right sidebar. Then select the desired file.
2

Enter description

From the file detail panel, enter the description into the Description field.
Note: Replacing a file will reset the image description
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.

​
Add descriptions to Buttons

Buttons that don’t include text should be labeled with a description. Buttons with text in them typically don’t need a label.
Accessibility Aria Button
1

Select Button

From within the editor, select the button
2

Input accessibility description

  • Use action verbs
  • Be specific about the target
  • Avoid generic labels
  • Don’t include the word “button”

​
AI-generated descriptions

Standards can draft accessibility descriptions for you using AI, so you can describe media at scale and then refine the wording. The same tool is also available for page descriptions.
Accessibility Ai Generated

​
Generate a description

1

Select the element

Within the editor, select a Media element (or other element with an Accessibility description field). You can select multiple elements to generate descriptions for all of them at once.
2

Select the bolt icon

In the Accessibility settings group, select the Generate description button (bolt icon) beside the Description field. The field shows a loading state while the description is generated, then fills in automatically.
3

Review and edit

AI-generated descriptions are a starting point. Review each one for accuracy and tone, and edit it to capture the context or meaning you intend.
Availability: AI features are available on Pro workspaces, and on Enterprise workspaces where an admin has enabled AI features. If the bolt icon is disabled, AI features may be turned off for your workspace.
Tip: Generation considers the element’s content (including the image itself for media) and the page it sits on, so descriptions are tailored to where the element appears.

​
Section labeling for screen readers

Improve navigation for screen readers by labeling sections of a page. Add a label to each major section of your page. This label is used by screen readers to identify the section and enables jump navigation for keyboard users.

​
Add section labeling

Logo group of Identity page selected and the word 'Logo' input into the accessibilty description field
1

Group related page content

This is a good practice while working to stay organized. Select contents layers then group them together by pressing Make group in the sidebar, or  command G
2

Input labels into accessibility fields

With the group or layout layer selected, look for the Accessibility settings group in the right sidebar. Enter the appropriate section label — for example, “Brand Colors” or “Typography.”

​
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.

​
Add tags to text

Text highlighted and content tag applied from right sidebar editor interface
1

Select text

Within the editor, select a text block from the contents list in the left sidebar, or from the in-body content.
2

Select proper content tag

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

​
Tags

  • Paragraph: Represents a paragraph. Paragraphs are usually represented in visual media as blocks of text separated from adjacent blocks by blank lines.
  • Heading 1 - 6: Represent six levels of section headings. Heading 1 is the highest section level and heading 6 is the lowest.

​
Best practices

  • One H1 per page, typically the page title.
  • Don’t skip levels (H1 → H3 skipping H2 is a no)
  • Nest logically: H2’s are sections, H3’s are subsections within those, etc.

​
UserWay plugin

Additional accessibility features can be enabled on Standards projects with the UswerWay plugin. UserWay allows site visitors to control a range of accessibility options like increasing text size. Learn more about UserWay.

​
Enable UserWay on your project

Note: This does not require a UserWay account
1

Select project settings

Within the project editor, select the gear icon from the top bar.
2

Toggle UserWay plugin option

Within the project settings in the right sidebar, look for the Accessibility settings group, toggle on the UserWay plugin.
3

Publish

Publish the changes from the Publish & share window. The UserWay plugin now viewable on your live site.

​
Add optional UserWay account ID

Note: This requires a UserWay account, allowing for additional features. Additionally, the integration is only available when published to a custom domain.
1

Log into UserWay

Log into your UserWay account on userway.org. If you don’t have an account, sign up for one.
2

Select embed code

In the UserWay dashboard, select the Embed code tab from the left sidebar.
3

Copy ID

From the embed code, look for the ID just after data-account= between the quotation marks. Copy the ID to your clipboard, ctrl+Con your keyboard
Example UserWay script with acount ID highlighted

Example ID. Copy the code that displays on your UserWay dashboard

4

Open project settings in Standards

Back in Standards, enter the project editor by selecting the gear icon from the top bar.
5

Paste ID

Within the project settings in the right sidebar, look for the Accessibility settings group. Paste the ID into the Account ID field.
6

Publish

Publish the changes from the Publish & share window. The UserWay plugin now viewable on your live site.

​
Resources

Learn more about improving site accessibility: https://www.w3.org/TR/WCAG22 Check color contrast: https://webaim.org/resources/contrastchecker/