This is a followup post to Testing accessibility with RSpec and Capybara, in which I explored strategies for automated testing of skip navigation links. We needed to provide a way to skip repetitive navigation, in line with part (o) of the Section 508 accessibility standards, and we went with skip navigation links.
We’ve since taken an alternative approach to the skip navigation technique, since this technique does not change keyboard focus to the targeted content. Instead, we ended up creating an aria landmark using the role attribute with a value of ‘main’. It looks something like this:
[gist id=5b6c1b613115f218cb33]
The role attribute can be set to a variety of values to help screen readers evaluate the structure of a page. Then the user can use a combination of hotkeys to navigate to these landmarks. In Safari with VoiceOver for example, one would press the VoiceOver keys + U to activate the Rotor, and be presented with a list of page landmarks (including ‘main’) that when navigated to, will immediately get focus and be at the beginning of the read order. JAWS, ChromeVox, and NVDA have similar behavior.
Using an ARIA landmark with a role of ‘main’ is a more robust and elegant solution than using skip navigation links. This technique is also well supported across user agents, and yields disproportionate gains in accessibility compared to development time, making it an easy win for more accessible content.
