Accessibility Checklist

 

In this guide:

1. About
2. Quick Setup Guide
3. Accessibility Checklist
   1. Navigation and page hierarchy
   2. Text and fonts
   3. Images, videos, and infographics
   4. Color
   5. Misc.

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 own 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

• Turn on Accessibility in the Settings Panel and check "Append Page Names to Experience Titles"
• Typography: Letter spacing = 1.2 x font size, Line height = 1.5 x font size
• Use only groups not folders
• Establish a hierarchy: Lay out your assets in the order in which a screen reader should read the bounding boxes (from top to bottom and left to right) 
  • Tip: Use groups to expand bounding boxes 
• Apply HTML Header tags and HTML section tags to text boxes and full sections respectively 
  • Make sure to tag the body of your content as "main" in the section tags 
• Add your Alt Tags to images and Aria Labels to all other non-text-based visuals (graphs, navigation, *hotspots* and clickable elements)
  • You can "hide from screen readers" any redundant text that was included in the Aria labels 
• Navigation: Set up "scroll to object" interactions so users can jump to the title of each section

Stop Motion Button will cancel all your animations if the user chooses (can be optional for some)

 

Accessibility Checklist

Navigation and page hierarchy

• Determine your page hierarchy

• • Keep in mind each section will need to be grouped together, in order to ensure compatibility with screen readers Ex: navigation, header section(s), footer.
  • Screen readers will always read Ceros content in a top-down manner, starting from the left and working across to the right. This is also how those navigating by keyboard will move through your experience.
  • 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 together (it’s perfectly normal and expected to have groups nestled 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, CEROS 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).

• 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. Ex: a text box that says click here next to a clickable hotspot with an area label that says click here for more info.

 

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 if you select Design for Accessibility

 

Misc.

• For paginated experiences: Same each in the Ceros studio and then toggle on the append page names to experience title check box in your settings panel.