When it comes to accessibility, the Studio provides a range of tools to help you create more accessible interactive content. We’ve put together this glossary below to define the various accessibility tools you can use in Studio.
Header Tags
Heading tags enable you to assign hierarchy to your text content. They indicate to screen readers the structure and visible headings within your content.
As a general rule:
H1 tags are typically only used once for the most important title on your page
H2 tags should be used to identify major headlines or sections of content
H3 tags should be used for subheadings
Paragraph tags should be applied to the body copy
Headings levels should not be skipped and should be used in descending order (ex. h1, h2, h3...)
To apply heading tags in Studio:
Select the text box you’d like to tag.
Navigate to the Design tab, and scroll to the HTML Element section.
Select the appropriate tag for that textbox.
Landmarks/ HTML Section Tags
HTML Section tags can be applied to entire sections of your content. These tags help indicate to screen readers the flow and hierarchy of information.
To apply these, ensure the section you’d like to apply a tag to is grouped. Select the entire group andadd an HTML Section tag found at the bottom of the Design tab. It’s important to decide how you’d like to label your sections before starting your project, this way you can organize your group hierarchy properly as you go.
You can tag the group of your main content as ‘Main', and the sections within this as ‘Section', ‘Nav,’ or whatever makes the most sense for your experience.
A potential HTML section tag structure could look something like this:
Header
Main
Section 1
Section 2
Etc
Footer
Accessibility Note: When tagging HTML sections, ARIA attributes are applied to these groups to ensure that they are screen reader friendly.
Alt Tags
Alt tags are used to describe images, translating visual meaning to text so screen readers can convey this information to the audience. You’ll want to add Alt Tags to all important images in your experience so that these are verbally communicated along with your text in an experience.
For any decorative images that do not need to be read by screen readers, you can just leave the Alt Tags section blank, and screen readers will skip over these images entirely. To add an Alt Tag to an image, select the image and then navigate to the ‘Alt Tags’ window in your design tab.
Aria Attributes
Aria attributes can be used in a variety of ways and are specifically added to make your experience more screen reader friendly.
To add an Aria attribute, select any non-image object or group, look for the “Aria-attribute” option found at the bottom of your Design tab and select an attribute from the drop down menu.
Current Aria attributes include:
Aria-label: Can be applied to a broad range of elements to ensure that screen readers have enough context to understand larger images, interactive components such as hot spots, and other information within your experience
Aria-labelledby: Can be applied to connect interactive elements to concise label text that explains their purpose. Some examples of use cases include connecting a tooltip to nearby text, a checkbox to a form label, or a link to a new tab icon.
Aria-describedby: Similar to aria-labelledby and aria-describedby provides extra context or details about an interactive element by linking it to supplementary text. However, it is typically used for more robust and detailed descriptions.
Aria-live: This attribute automatically brings screen read users directly to newly shown dynamic change within the page. Commonly used for alerts, statuses, progress bars, and errors.
Aria-modal: Can be applied to lightboxes and pop-up to provide context to screen reader users that they have entered a modal or pop-up.
Note: Aria-modal is also applied when using the “Keyboard Nav Focus” tool.
Hide Text from Screen Reader
This option enables you to prevent certain text from being communicated by screen readers. This is a good option if you have text that is redundant or repetitive with an Aria label throughout the experience. (Think, a text box that says Ceros Home, next to a hotspot with an Aria label that says Ceros Home). Just select the text that you do not want to be read aloud, and in your design tab in the typography section check “Hide from Screen Readers.”
Keyboard Nav Focus
This tool allows you to ensure that keyboard users and screen reader users are able to navigate pop-ups and modals in an intuitive and expected manner. This should be utilized for show/hide content that is visually represented as a lightbox, modal or pop-up. Simply select the parent group of the pop-up content and check “Keyboard Nav focus” in the design tab.
Accessibility Note: The aria-modal attribute is automatically added to the group, when utilizing this tool.
Skip to Main Content link
For those using assistive technology, ‘skip to main content' enables you to jump directly to the core of an experience instantly, with no need to build out any interactions. Studio will automatically create a button to link to the main content, you’ll just need to make sure you identify your primary section of starting content as “Main” using HTML section tags, and you can customize the link text in your settings panel. This button will initially be hidden on the page and will reveal itself to screen readers and keyboard users on the first “tab” press into the experience.
Page Naming & Match Page Names to Title
For accessibility, you’ll want to ensure you’re naming each page in your experience to give screen readers more context about the experience. Keep in mind that this will update the <title> attribute of the page, not the actual URL title. To do this:
Double-click on the Untitled Page label in your pages panel. Give each page a unique name.
Now, open the Settings window. In the “Experience settings” tab, check on the “Match page names to title” check box.
Document Language
Experiences default to English but give you control over the experience's language via the ‘Experience Settings’ tab in your Settings Panel. This will enable screen readers to read the content of the experience in the intended language.
Reduced Motion
You can create a button in your experience that pauses all animations (including standard animations, animations on scroll, and page transition animations). Simply draw a hotspot over your button and apply the “Toggle Reduced Motion” interaction to the hotspot. This will give users the ability to pause the animation in the piece. We’d recommend keeping this button near the top of the page—that way a user can immediately disable the animations when they visit your experience.
Hyperlinks
You can hyperlink text in Studio by highlighting the text, right-clicking, and selecting “Create Link” to create inline links. For accessible experiences, it’s important to create inline links rather than using Go-To-URL interactions on a hotspot.
Accessibility Note: Adding a hyperlink in the Studio creates a native link, so screen readers can recognize and announce it properly.
Zoom Controls (Resize Text)
The AA 1.4.4 Resize text criteria requires that “except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality.”
The ability to resize text, by way of zooming in and out on the overall experience, is now available to further support the creation of Accessible content. This functionality meets a requirement for WCAG 2.0 AA compliance. When enabled, end users can use the zoom controls up to 400%.
How it works:
For newly created experiences, Zoom controls are turned on by default when Accessibility is turned on.
For existing experiences, Zoom controls must be enabled. To enable this feature, navigate to the Settings panel, and under the Accessibility tab, check the “Zoom Controls Overlay” checkbox
This ensures that Zoom Controls will be displayed in the upper-right-hand corner of the experience to aid accessibility. No other studio-side changes need to be made by the designer.