Criterium 12.10 – Identification of groups of important links and main content

This post is also available in: Français (French)

WAI-ARIA provides roles to indicate the main areas (regions) of the document. These roles are very beneficial to users of screen readers in particular, but also to sighted keyboard users who can benefit from features allowing rapid navigation in the document structure. While most screen readers make these features available to users, browsers have not yet proposed dedicated navigation features for users who rely on keyboard exclusively. The implementation of skip links remains a requirement.

Ensure all content is contained within a landmark region, designated with HTML5 landmark elements and/or ARIA landmark regions.

It is a best practice to use both HTML 5 and ARIA landmarks to ensure all content is contained within a navigational region. In HTML5, you should use elements like header, nav, main, and footer.

Their ARIA counterparts are role="banner", role="navigation", role="main", and role="contentinfo", in that order.

By using both HTML5 and ARIA markup, you make the webpage more robust and functional no matter what screen reader technology is used.

Once added, screen reader users can navigate to a section based on its ARIA landmark or HTML element. Landmarks provide a simple replacement for a skip navigation link, though the replacement is only useful for users of screen readers. Sighted users or users of screen enlargers wouldn’t get much benefit from the addition, so it can’t replace skip navigation links altogether.

Example :

A simplified web page, stripped down to just the bare landmark essentials, might look something like this:

<header role="banner">
<p>Put company logo, etc. here.</p>
<nav role="navigation">
<li>Put navigation here</li>
<main role="main">
<p>Put main content here.</p>
<footer role="contentinfo">
<p>Put copyright, etc. here.</p>

The markup for regions and roles is redundant, but this is a transition period, and the above markup is the most robust.