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
<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.
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
<strong> instead of
<b> ensures your markup conveys meaning, not formatting. Retaining the heading hierarchy (between
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.
<a href=”#main”>Skip to content</a>
<div id=”header”><img src=”logo.png” alt=”” />
<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.
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.
<li><a href=”/about/us/”>About us</a></li>
<li><a href=”/about/our-products/”>About our products</a></li>
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.
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.
<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.
<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.
<div tabindex=”-1”>Product info</div>
<div tabindex=”-1”>Delivery info</div>
<div tabindex=”-1”>Size info</div>
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.
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 id=”main” role=”main”> ... </main>
The other landmark roles specific to navigation include:
These can each be added in the following format:
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=”tab”>Product info</div>
<div role=”tab”>Delivery info</div>
<div role=”tab”>Size info</div>
<div role=”tabpanel” id=”productinfo”>content here, in structured HTML
<div role=”tabpanel” id=”deliveryinfo”>content here, in structured HTML
WCAG 2.0 references
- Success Criterion 2.4.1 Bypass blocks
- Success Criterion 2.4.2 Page titled
- Success Criterion 2.4.3 Focus order
- Success Criterion 2.4.4 Link purpose (in context)
- Success Criterion 2.4.5 Multiple ways
- Success Criterion 2.4.6 Headings and labels
- Success Criterion 2.4.7 Focus visible
Related Techniques for WCAG 2.0
- C27: Making the DOM order match the visual order
- C15: Using CSS to change the presentation of a user interface component when it receives focus
- G1: Adding a link at the top of each page that goes directly to the main content area
- G59: Placing the interactive elements in an order that follows sequences and relationships within the content
- G88: Providing descriptive titles for webpages
- G123: Adding a link at the beginning of a block of repeated content to go to the end of the block
- G124: Adding links at the top of the page to each area of the content
- G125: Providing links to navigate to related webpages
- G130: Providing descriptive headings
- G131: Providing descriptive labels
- G149: Using user interface components that are highlighted by the user agent when they receive focus
- G165: Using the default focus indicator for the platform so that high visibility default focus indicators will carry over
- H4: Creating a logical tab order through links, form controls, and objects
- H25: Providing a title using the title element
- H30: Providing link text that describes the purpose of a link for anchor elements