When creating accessible experiences there are a couple of new interactions that you should use. These interactions include the “On Click – Scroll to object” and “Toggle Reduced Motion”. You’re probably already familiar with the “On Click – Scroll to position” interaction which uses anchors to drill you to a general area within your experience. However, when creating an accessible experience, you’ll want to use the “On Click – Scroll to object” interaction for inter-page navigation menus. This ensures the correct focus is set when the navigation link is triggered. Below are a few guidelines to keep in mind when creating an accessible navigation menu. You can also import the outlined example into your account.
Creating an accessible navigation menu:
- Create text components in the Navigation group with the target names of each section i.e. Section 1, Section 2, Section 3, and Footer.
- Add hotspots over each text component. Vertically align the tops of the hotspots to achieve the expected left-to-right screenreader navigation order.
- Add “On Click – Scroll to object” interactions to each hotspot and select the corresponding section group as the target.
- Set an Aria-Label on each hotspot that describes the purpose of the link to screen reader users (e.g. Go to Section 1). Screen readers will then announce “Link: Go to Section 1” when the user navigates to the Section 1 hotspot.
- Select all the text components created in Step 1 and select the “Hide from Screen Readers” option. As the screen reader will be reading the hotspots so you’ll want the text components to be skipped.
Note: An alternative would be to add the On Click interactions directly to the text component but hotspots were chosen to demonstrate the “Hide Text From Screen Reader” feature.
Add a “Stop Motion” Link
Accessibility guidelines require that users can reduce motion on the page. Since most Ceros experiences have at least some animations, it’s important to add a “Stop Motion” link to the top of each page. Clicking the link will toggle animations on/off for the entire experience.
- Create a text component with “Stop Motion” in the header section. This should be within 3 tab stops for users navigating the experience with their keyboard.
- Add an “On Click – Toggle Reduced Motion” interaction to the text component.
To see how the “Toggle Reduced Motion” interaction works, add a few repeating animations to the header section. In the preview, click the “Stop Motion” link and the animations within the experience will toggle on/off. Import the above example navigation menu into your account.
Was this helpful?