Navigation, identification and controls: accessibility for developers

  • Author: Access iQ ®
  • Date: 1 Feb 2013
  • Access: Premium

Quick facts

When content is well-structured, easy to navigate, landmarked and follows a clear linear flow, everyone regardless of ability has a better experience.


  • Ensure good semantic structure
  • Provide skip links

For people without a disability, being able to traverse a document is generally a trivial activity. Developers work to ensure visual flow in the design and to relay meaning through arrangement, proximity, size and proportion. Visual flow, scanability and well-paced text written specifically for the web, are all commonly understood methods to make interacting with web content a pleasant experience.

When the conditions for consuming content are different from the average state, such as for a person who is blind or vision impaired, or when the conditions are constrained, as on a smartphone screen, being able to navigate a document should not be made more difficult. Conversely, when content is well structured, easy to navigate, landmarked and follows a clear linear flow, not only do users who depend on assistive technology to get the most out of a website, everyone regardless of ability has a better experience.

The main issue for people with disabilities is that some cannot visually scan the page view as sighted users are accustomed to do; their experience depends heavily on the semantic page structure. People with visual impairments experience the page linearly, from top to bottom. They cannot roam the layout in the same way others can, but do have parallel methods they employ to perform tasks similar to scanning.

For example, using the Tab key allows anyone to navigate a webpage via the links and form elements. This saves time when filling out a form, so no user has to continuously move between mouse and keyboard. Instead, this allows all users to use only keyboard while filling out a form, and also helps those using a screen reader hear the links and actions available on the page.

Another way screen reader users navigate a page is by moving through the headings, using the <h1> to <h6> hierarchical structure of the page, properly nested. This structure forms the backbone of the page, which can also serve as a "scan" across the page for assistive technologies.

Semantic structure

Following good HTML practice by complying with web standards and enforcing semantic structure not only helps people with disabilities but also benefits search engine optimisation (SEO), findability and promotes a more semantic web.

Simple practices like using <em> instead of <i> and <strong> instead of <b> ensures your markup conveys meaning, not formatting. Retaining the heading hierarchy (between <h1> and <h6>) and including unique and meaningful link text all help users navigate a document more easily. Keeping presentation separate from content means that, with cascading style sheets (CSS) and JavaScript turned off, your site still allows the meaning to come through uninterrupted. This topic is dealt with in greater detail in the topic on semantic markup for developers.

Skip and skip to links

One simple method of improving navigation is to include 'skip' and 'skip to' links. The difference between the two is that skip links jump over the named item, while skip to links move focus to the named item. These links help users jump past the repeating content of the site, like the logo, search and main navigation, straight to the main section. Screen reader users don’t want to repeatedly "hear" your navigation as they move through several pages of your site. Giving them the same experience is as easy as a single link.

The most common example is a "Skip to content" link at the very top of the document, the first link in the page and therefore the one that receives focus first when a user navigates by the Tab key. This link bypasses the top section and main navigation and moves focus straight through to the main content area.

Example 1:

</head>

<a href=”#main”>Skip to content</a>

<div id=”header”><img src=”logo.png” alt=”” />

<div id=”main”>

<h2>bright new future</h2>

<p>Today it was announced....

In addition to the 'Skip to content' link, you can also add:

  • Skip to search
  • Skip to navigation
  • Skip navigation
  • Skip main navigation

The key point to remember is that when you set a skip to link, it must:

  • be located at the very top of the document
  • be the first item to receive focus
  • move focus directly to the element it describes

The same is true of a skip link, except it must move focus to the first item directly after the item it describes.

Focus order

Typically, anything with a link can be navigated to with the Tab key and as such a user should be able to move through a nested navigation using the Tab, Arrow and Enter/Return keys. Tab to move to the next link, arrow (or Enter/Return) to follow a secondary set of links, and Enter/Return to follow a link to the next page.

This is also true for nested navigation elements, and works best when the element containing the nested items is not a link itself but a control for the sub-navigation, as described in Example 2.

Example 2:

<div role=”navigation">

      <ul>

            <li><a href=”/”>Home</a></li>

            <li><a href=”javascript:onClick(openNav);”>About</a>

            <ul>

                  <li><a href=”/about/us/”>About us</a></li>

                  <li><a href=”/about/our-products/”>About our products</a></li>

            </ul>

</li>

      </ul>

</div>

In Example 2 above, using the Tab key should open the list of items nested inside "About" and pressing the Enter/Return or arrow keys will move focus to the first element in the list.

In addition, it is important that you do not interfere with the browser's natural ability to display current focus with a soft blue box unless you intent to enhance it, which is recommended in Success Criterion 2.4.7 Focus visible.

Tabbed areas

Typically, a tabbed section of a document presents several different containers, with a "tab" for each section, layered over top each other, as described above.

Example 3:

<div>

<div>Product info</div>

<div>Delivery info</div>

<div>Size info</div>

</div>

<div id=”productinfo”>content here, in structured HTML</div>

<div id=”deliveryinfo”>content here, in structured HTML</div>

In the same way that navigation needs to be keyboard navigable, tabbed areas also need to be navigable by keyboard. To do so, a user can both navigate through the tabs as well as operate the tab to reveal and navigate to the content.

There are two ways to achieve this:

  • Place an <a> element inside each tab element.
  • Add the tabindex=”-1” attribute in each tab element to help it receive focus according to the natural document order.

Either method will allow the tab elements to receive focus when the user navigates with the Tab key.

Example 4:

<div>

<div><a href=”/product”>Product info</a></div>

<div><a href=”/delivery”>Delivery info</a></div>

<div><a href=”/size”>Size info</a></div>

This will ensure the tab elements receive focus when a user navigates to them with the Tab key.

Example 5 will achieve a similar result, although a different function will be required to cause the tab to reveal the content within it.

Example 5:

<div>

<div tabindex=”-1”>Product info</div>

<div tabindex=”-1”>Delivery info</div>

<div tabindex=”-1”>Size info</div>

WAI-ARIA

In addition to the above, it is always good practice to investigate the Accessible Rich Internet Applications (ARIA) properties that may apply to your particular situation. The Web Accessibility Initiative's Accessible Rich Internet Applications (WAI-ARIA) specification offers additional methods for marking areas of a document to assist with navigation and understanding. These attributes do not diminish the behaviour for people without disabilities but add enhancements for people who use screen readers or other assistive technologies. More information on specific techniques is available in our article, Introduction to WAI-ARIA.

Landmark roles

ARIA landmark roles can be added to the content section so screen readers that understand ARIA can make use of the additional support a landmark role can provide.

<div id=”main” role=”main”> ... </div>

Or if HTML5 is your preferred markup language, using the new <main> element:

<main id=”main” role=”main”> ... </main>

The other landmark roles specific to navigation include:

These can each be added in the following format:

<div role=”navigation”>

<ul>

<li><a href=”/”>Home</a></li>

<li><a href=”/about/”>About</a></li>

</ul>

</div>

Tabbed sections

ARIA also has several properties to help identify a section of a page that is presented as tabs. Adding some WAI-ARIA roles to the tab elements will help screen reader users navigate the document more effectively. Taking the example from the Tabbed Areas section above, the following adds several roles to the elements for better navigation:

<div role=”tablist”>

<div role=”tab”>Product info</div>

<div role=”tab”>Delivery info</div>

<div role=”tab”>Size info</div>

</div>

<div role=”tabpanel” id=”productinfo”>content here, in structured HTML

</div>

<div role=”tabpanel” id=”deliveryinfo”>content here, in structured HTML

</div>