Content that is originally hidden and then revealed through an on-click or on-hover interaction creates an interesting challenge for customers using screen readers or keyboards to navigate the content. In many cases, this important information would just remain unavailable to those users. However, at Ceros we love a challenge and have come up with a unique way to make these interactions accessible to all users.Â
So how do we do it?
Two distinct use cases require a slightly different setup in the Studio. Below we’ve outlined how to set up your layers and interactions in the Studio to ensure hidden information is accessible to all users.Â
Manual Activation: On-Click Interactions
On-click interactions give the user the option to decide if they would like to uncover more information, which we consider a “Manual Activation” approach. In this situation, the user will be given a bit of information (applied through an aria-label) and then can decide whether or not they’d like to consume the target content. If they indicate they want to hear more, the experience will navigate the user directly to the target content. On the flip side, if the content is not triggered, the target will not be revealed and the portion will be skipped.
To ensure your content can be digested manually, you will need to group your trigger element (i.e. your CTA/ hotspot) with your target element (your popup, for example). For your content to be read out in the correct order, the trigger and target must be a part of the same parent group.
Automatic Activation: On-Hover Interactions
On-hover interactions are a bit different in the sense that content revealed on hover will always be “visible” to screen readers (even if it’s not visible on the page). This means that when a user navigates to an area with on-hover information, that information will automatically be read by a screen reader. This is considered “Automatic Activation” because the content will be automatically uncovered through their screen reader as they navigate the page.
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). For your content to be read out in the correct order, the trigger and target must be a part of the same parent group. Keep in mind that all on-hover information will be activated, so in some situations, it may be beneficial to switch any non-critical information to on-click to not overwhelm your user.Â
To ensure that your content can be digested both manually and automatically:
Select both your trigger element (i.e. your CTA/ hotspot) and your target element (your popup, for example) by holding down CMD/CTRL and selecting both in your layers panel.
In the bottom of the Layers panel, select the “Group” button (or use the CMD/CTRL+ G keyboard shortcut).
That’s it! For your content to be read out in the correct order, the trigger and target must be a part of the same parent group.
How to enable this feature:
This feature will be enabled if Accessibility is turned on in an experience.
Designer Guidelines
As a designer, there are a few things to keep in mind when this feature is enabled.
If you have a lot of on-hover content, keep in mind that this will all be automatically enabled for users leveraging keyboard navigation and screen readers, forcing them to navigate through all of the target content. This could potentially be burdensome if you lean heavily on information revealed on-hover. In some cases, it may be better to switch some of these to on-click to be manually activated.
For this feature to function properly, the trigger element and the target element must be in the same group. I.e. your button and popup have to be grouped in your Layers panel.
It’s not recommended to have multiple trigger elements targeting the same content. For those using screen readers or keyboard navigation, this can lead to confusion and content being digested in the wrong order— the navigation order will only work as expected for one of the targets. (An exception would be if one of the targets does not need to be consumed e.g. a decorative rollover effect)
As best practice, it is recommended to not use On-View interactions to reveal important content in an experience. On-View interactions can still be used for decorative assets, however, any information you’d like to be read by screen readers or navigable by keyboard users should not be revealed by On-View interactions.
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 and the workflow mentioned above to create accessible interactivity.