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.
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 screen reader 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 at the bottom of the typography settings. 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 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.
Click the button below to import the above example navigation menu into your account.