Skip to main content
Web accessibility ensures that content is usable and inclusive for all individuals.
Image description interface overlaying a clearspace design

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

​
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

Image description field in the right sidebar editor interface
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 Accessibility settings group. In content mode, enter the image description in the contextual popup.

​
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 alternate text to a File

Image description field inside file info panel
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 Image 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. Example: “Logo surrounded by an empty frame defined by the height of the symbol”

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