About
We know there is much to remember when creating an accessible experience. So we thought we’d help by making a checklist you can reference. As a reminder, while we provide the tools to empower you to create accessible content, the responsibility to create content optimized for your accessibility standards ultimately falls on your team. Read on to find a quick setup guide and a more detailed checklist to empower you and your team to create accessibility-optimized content.
Quick Setup Guide
Toggle on the experience's Accessibility settings within the Accessibility tab of the Settings panel.
Check "Match page name to title" within the Experience settings tab of the Settings panel.
Typography: Letter spacing = .12 x font size, Line height = 1.5 x font size.
Use groups not folders. Grouping content will help screen readers understand which content should be read together.
Apply HTML Element tags for visibly identified headings.
Use HTML section tags to sections of content to help screen readers identify where they are within your content.
Please note: If you are making a piece of micro-content, you may not need to add HTML section tags. These tags should only be used for large sections of content.
Add Alt Tags to all important imagery, but be sure to leave simply decorative image alt tags blank.
Add Aria-Labels to objects or actionable items that need more context (i.e. hotspots, graphs, navigation, clickable elements, etc).
Be sure to use the Hide from screen readers checkbox to hide any redundant text that was included within an Aria-labels. A common use case is to hide text layers under hotspots that contain an aria-label.
Navigation: Set up "scroll to object" interactions so users can jump to the title of each section.
Add Toggle Reduced Motion button if you've added any animations to your experience. Toggling reduced motion will cancel all your animations if the user chooses (can be optional for some).
When creating show/hide components, be sure to put the trigger and target (ex. hotspot and pop-up assets) within the group.
Accessibility Checklist
Navigation and page hierarchy
Determine your page hierarchy
Keep in mind each section will need to be grouped, to ensure compatibility with screen readers (ex. navigation, header, footer, etc).
Screen readers and keyboard navigation will always navigate Ceros content top-down and left to right by default.
Please note: Interactivity built with Object States is not readable by screen readers and will not be considered accessible. Be sure to instead use On-Click and On-Hover interactions. Check out this article for more information on Activating Hidden Content.
Make sure you’re not using folders, but instead grouping sections (it’s expected to have groups nested within groups).
Navigation
Add a Skip to Main Content section: "Skip to main content" allows users to jump directly to the core of your experience instantly, with no need to build out any interactions. If you have already defined the main area of content using the HTML sections feature, Studio will automatically create a hidden link that only appears to screen readers and keyboard users (once they hit the tab button) which allows users to instantly jump right to it. You can then customize the link text via the Accessibility tab in your Experience Settings.
Scroll to Object: When setting up scroll to interactions use "Scroll to object" rather than "Scroll to position".
Text and fonts
Headers and body text: Create text components to ensure you’re tagging all headers + body copy.
Tip: If you add header tags to a branded elements experience, you can work from copies of those text boxes. Header tags will carry through (like how animations carry over).
Font Size
While there is no official minimum font size for the web, it is generally agreed upon that 16px for body text is a good starting point. Of course, some text will be smaller, and headers will be larger, but the main body text (like what you're currently reading) is usually 16px.
Font Spacing
Letter spacing (kerning) to at least 0.12 times the font size.
Line height (leading) to at least 1.5 times the font size.
Do not use text over images (note: adding alt text is not a viable workaround)
Tip: Add a solid color square shape underneath your text box (and on top of your image) to ensure that the text is clearly legible and separated from your image).
Hyperlinks
Use clear, contextual language for links & link text (avoid generic text such as "Click here").
When applicable: Use hide text from screen reader
Tip: This enables you to prevent particular text from being communicated by screen readers. Usage here is recommended for text that could be redundant or repetitive with the use of aria labels.
Images, videos, and infographics
Add Alt Text to all images relevant to understanding the story behind your piece
Use Aria Labels
Tip: Similar to Alt tags, but instead of being applied to images specifically, you can apply Aria Labels to a broader range of visual elements. This ensures your messaging can also be communicated verbally by screen readers.
If embedding video (from YouTube or other third-party video providers): You must include captions and transcripts.
Color
Use clear color contrast.
View the Coloring for Color Blindness simulator here
Tip: more info here > select Design for Accessibility > select the Color tab.
Misc
For paginated experiences: Open in the Studio and then check on the "Match page name to title" check box in your Settings panel.