Use ARIA Landmarks Instead of Skip Nav Links

April 7, 2013 Cameron Cundiff

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.

About the Author


Are you underestimating the return on development?
Are you underestimating the return on development?

All signs point to 2013 being a boom year for software – especially for custom application development. Dig...

Navigate Code, Not Text: How to Navigate Effectively in RubyMine
Navigate Code, Not Text: How to Navigate Effectively in RubyMine

Terminal text editors often allow you to navigate in terms of basic text objects, such as, characters, wor...

SpringOne 2021

Register Now