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.
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.
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”
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.
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”
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.
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 commandG
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.”
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.
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
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.
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 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.
