A critical part of creating accessible content is ensuring that screen readers can effectively communicate your experience verbally for end-users who may be relying on assistive technology to navigate the experience. This involves making sure that your text content is ordered correctly (see this article for more information), and making sure that your visual and interactive elements are all being tagged appropriately.
As Studio is a highly visual and interactive platform, you must tag all of your visual elements (think: images, videos, data visualization) as well as all of your interactive elements (think buttons, hotspots, navigation). There are two different types of tags you can apply.
Alt-Tags
Alt-tags are short descriptions that can be applied to images in the Studio. When a screen reader navigates to an image, the alt-tag is read out to the user, describing the image on the screen. It’s important to apply alt-tags to all of your important imagery in the experience, otherwise, these images will not be explained to the person navigating the content. To apply these, select an image, and at the bottom of the Design tab, you can input the short description in the field under Alt-Tag.
Aria-Labels
Similarly, Aria-labels are also short descriptions to be read by screen readers, but these can be applied to any non-images that you still want to be communicated by screen readers. Think hotspots, buttons, charts, graphs, etc. Just like alt-tags, these give your user more context and description of the assets in the experience. You can see in the screenshot below, instead of a screen reader simply reading the title and labels of the chart, we’ve added a descriptive aria-label, so the screen reader now reads “This is a bar graph demonstrating the increase in X over Y.”
We’d also recommend adding aria-labels to all of your interactive components too, so that when screen readers navigate over hotspots or clickable elements, the user is prompted with a message essentially telling them what will happen if they choose to interact with that element. In the example below, we’ve added aria-labels to the hotspots over each arrow in the carousel, letting them know what will happen if they choose to click on either hotspot.
It’s important to make sure that you’re adding alt-tags and aria-labels to all of the interactive elements in your experience so that screen readers can properly communicate the message and important information within your experience.