Accessibility Tools Glossary

When it comes to accessibility, Studio provides a range of tools to help you create more accessible interactive content. For an extensive overview of how to create more accessible content in Studio, be sure to first read this article. We’ve put together this glossary below to define the various tools you can use in Studio to help you create accessible content.

Header Tags

• Header tags enable you to assign hierarchy to your text content in Studio. Header tags are important for accessibility because they indicate to screen readers the structure of a page. 

• As a general rule:

  1. H1 tags are typically only used once for the most important title on your page

  2. H2 tags should be used to identify major headlines or sections of content

  3. H3 tags should be used for major subheadings

  4. Paragraph tags should be applied to the body copy

  5. Headings levels should not be skipped and should be used in descending order (ex. h1, h2, h3...)

• To apply header tags in Studio:

  1. Select the text box you’d like to tag.

  2. Navigate to the Design tab, and scroll to the HTML Element section.

  3. Select the appropriate tag for that text. This will be applied to the entire text box component.

Landmarks/ HTML Section Tags

• HTML Section tags are very similar to header tags, but they can be applied to entire sections of the experience rather than individual text boxes. 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 and then at the bottom of the design tab you’ll see that you have the ability to add an HTML Section tag. 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:

  1. Header

  2. Main

     1. Section 1

     2. Section 2

     3. Etc

  3. Footer

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 Labels

Aria labels are similar to alt tags, but instead of being applied to images specifically, you can apply them to a broader range of visual elements to ensure that these are communicated verbally by screen readers as well. These are important for things like links and buttons. To add an Aria label, select any non-image object or group and look for the “Aria-Label” option at the bottom of your Design tab.

You’ll want your aria-label to tell the user what the interactive element will do or go. For example, an Aria label on a CTA could say something like “Ceros Home, This Opens in a New Tab.” This way, the screen reader will tell the user what the CTA will do and where it will take them, rather than just reading out an empty “Button” label.

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

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.

“Scroll to Object” Interactions 

“Scroll to object” interactions can improve accessibility by targeting the exact object that the user’s focus will shift to. So instead of a user clicking to scroll to an anchor placed above a certain section, this will scroll them right to a targeted object to focus them exactly where they need to be. Think of scrolling right to a CTA that the user will interact with rather than a general section. These can be applied by using an “On Click” trigger with a “Scroll to Object” interaction, and from there you can target the specific object to scroll to

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:

  1. Double-click on the Untitled Page label in your pages panel. Give each page a unique name.

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

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.