Creating Accessible Content in Ceros: Creating a Hierarchy

It’s important to note that when creating accessible content in Ceros it’s not as easy as flipping a switch— there’s some work you’ll need to do when designing and in the studio to ensure that the content that you’re creating is accessible. So let’s take a look at some of the accessibility tools and features available to you. 

The first thing we’re going to need to do is open up our settings panel and navigate to the Accessibility tab. Here is where you can enable your accessibility features for each experience. 

Before diving into the accessibility specific tools, it’s important to note that things like your icon choice, color contrast, and text sizing and spacing become really important when creating accessible content. When creating accessible content in Ceros, you’ll want to ensure that you are using commonly used and widely understood iconography—icons in your experience should indicate the action that the user will take if they click on that icon. You’ll also need to ensure that the colors you choose for your experience have enough contrast to be considered accessible. Within our Accessibility Best Practices guide, you’ll find a helpful color contrast validator tool that you can lean on to ensure you have enough contrast within the experience.

In order for your text to be considered accessible, there needs to be enough space in between each individual letter of text as well as each individual line of text in your content. Your letter spacing will need to be at least 0.12 times your font size, whereas your line height will need to be at least 1.5 times your font size. Also, it’s important to always ensure that you’re using the live text tool within Ceros, rather than using any images of text in the experience.

The physical positioning of the assets on the canvas plays a major role in determining the order in which your content is read out. Screen readers will navigate your content from the top down and left to right based on the bounding box surrounding each asset or group of assets.

In your design tab under typography settings, you have the ability to add H1 through H6 tags, as well as paragraph tags to each text box. Similar to header tags you can also apply HTML section tags, which you may also hear us refer to as landmarks. This helps establish a hierarchy of the different sections on the page. To apply HTML section tags, you’ll first need to ensure that you’re organizing your layers panel using groups. You can group together each section of content within the experience and then tag those groups appropriately. We have the option to tag each section as main, nav, aside, article, section, header, or footer.

Alt tags are short descriptions that can be added to each image in an experience. These tags will be read out by a screen reader to translate the image verbally to the user—so you’ll want to ensure that your alt-tags are descriptive, but concise. We also have the ability to add Aria Labels to visual elements. You can apply aria labels to any visual elements that are not image files, think hotspots, buttons, clickable navigation,  data visualization elements such as charts and graphs, and more. When applying aria labels, there may come a time where certain text components on the page become redundant. So instead of also reading out the labels, you can tell Ceros to hide that text from screen readers. This option is available at the bottom of our typography section. Simply check this box to prevent any repetitive text from being read out loud.

The scroll to object interaction lets you drive your user to a specific object, rather than right above a section like an anchor does. This is important because if your user is tabbing through the content with keyboard keys, it enables them to jump to whichever object is the next most important object to them in that section—rather than to a random point in the experience.

When Ceros detects that a user is using keyboard keys in lieu of a mouse, it automatically creates a button at the top of the piece that the user can click on to Skip to the Main Content. This button copy can be customized in the Settings panel here. You’ll want to ensure that you’re tagging your main content as Main using an HTML section tag. This way when a user clicks to skip, they will be driven down to whatever it is that you’ve tagged as main.

When setting up your experience, it’s also important to remember to name each page of the build. This can be done by double clicking on the page name above each page in the left hand panel and typing in a custom name. Then, you’ll want to navigate to your Settings panel and check off “Append Page Names to Experience Title” so that the page names are added to the HTML title tag of the piece. 

To set up the toggle reduce motion interaction, simply create a button at the top of your experience. Here, you’ll just want to apply an interaction that says on click, toggle reduced motion. 

Now, let’s take a look at how you can make your carousels accessible. To start, import your assets and align your slides on your canvas. Your slides can be images, text boxes, videos, or groups of all of the above.  Now, let’s apply an aria label to each slide that explains which slide it is. For example, here we’ll write “Slide 1 of 3.” Now, in our layers panel, let’s arrange all of the slides into a group. We’ll name this group “Carousel Slides”. Be sure to only leave the visibility of Slide 1 toggled on, and turn off the remaining slides by clicking the eyeball icon next to each layer. The next thing we’ll want to do here is add our arrows, we can grab these from the noun project icon library. Over each arrow, let’s draw out a hotspot, making sure to add aria labels to both of them. For example, we’ll write “Click here to cycle to the next slide” and “click here to cycle to the previous slide.”

Now it’s time to set up our interactions. On the forward arrow hotspot, we can apply an interaction of: On Click > Cycle Next > Carousel Slides Group. And on the back arrow hotspot, let’s apply an interaction of: On Click > Cycle Previous > Carousel Slides group. To stay organized, we’re going to place each arrow and hotspot in a group in your layers panel, and name that Controls.

Staying in our layers panel here, let’s group both the “Slides” and “Controls” groups into a larger group called Carousel Group, and on the Carousel Group, we’ll add an HTML section tag of ‘section.’ We also need to be sure to add an aria-label to the Carousel Group. We recommend making this description fairly short because the goal is to succinctly convey that this group is a carousel.

As a final step, we’ll want to add a “screen reader only” text attribute to the carousel group that explains the purpose of the carousel and how to navigate it, so let’s write “This is a carousel showing XYZ. Use the next, previous or slide buttons to navigate.” This is text content that will solely be communicated by screen readers.

Now, let’s take a look at popups. With on-click popups, you will give the user the option to decide if they would like to uncover more information. So let’s add an aria label to our hotspot here to tell the user a bit of information about the popup- so that they can decide if they’d like to hear more. If they indicate that they do in fact want more information, Ceros will then present the user with the target content. If the user does not indicate that they want more information, they will not be read the popup content.

The setup of your layers becomes important in this situation. To ensure that your content can be digested manually, you will need to group your trigger element (i.e. your CTA and/or hotspot) with your target element (your popup, for example). So you can see here we grouped together our trigger and our popup content are all in the same parent folder. If these are not in the same parent folder, the popup content will not be read out correctly.

Now let’s take a look at the “Automatic Activation” approach. This is referring to on-hover popups throughout your content. These are a bit different than on-click interactions because screen readers will always read the hover popup content to the user. This is why it’s called automatic activation–the user does not have to do anything to trigger the popup content to be read out.

Similar to manual activation, you’ll need to group your trigger element (i.e. your CTA/ hotspot) with your target element (your popup, for example). In order for your content to be read out in the correct order, the trigger and target must be a part of the same parent group. 

If you have any questions about the Ceros accessibility tools and features, do not hesitate to reach out in the chat window, and our team will be happy to help!