HTML 5 and ARIA Landmarks

Despite all of the talk about using correct semantic structure for accessibility, HTML has historically lacked some key semantic markers, such as the ability to designate sections of the page as the header, navigation, main content, and footer. With HTML 5, these designations are possible, using the new elements <header>, <nav>, <main>, and <footer>. Similar functionality is available using the ARIA (Accessible Rich Internet Application) attributes role="banner", role="navigation", role="main" and role="contentinfo".

Using HTML 5 and ARIA Landmarks as Supplementary "Skip Navigation" Mechanisms

JAWS, NVDA, and VoiceOver support the ability to navigate to sections of a web page using ARIA landmarks. This is a more elegant solution to the problem of providing a way for users to skip to the main content of the web page. There is no visible alteration to the web design, making it unobtrusive and invisible. Of course, the fact that this technique is invisible is fine for blind screen reader users, but not so fine for sighted keyboard users or screen enlarger users with low vision. In this sense, HTML 5 regions and ARIA landmarks cannot yet replace the old-fashioned "skip navigation" links. Browsers still do not have a built-in way to notify users that HTML 5 regions or ARIA landmarks are present. Screen reader users are the only ones who can take advantage of them. There is a Firefox ARIA landmark extension available, which adds the ability to navigate by landmarks in Firefox, but this is not a native feature of the browser.

  • In JAWS, use the semi-colon key to jump to the next landmark, or use shift + semi-colon to go backward through landmarks.
  • In NVDA, use the D key to jump to the next landmark, or use shift + D to go backward through landmarks.
  • In VoiceOver, use CTRL + ALT + U to start the web rotor, then, if necessary, use the left or right arrow keys to display the list of landmarks (the rotor also displays lists of headings, links, and web spots), then use the down arrow key to navigate through the list of landmarks.

The Difference Between HTML 5 and ARIA

HTML 5 is the next version of the HTML specification, following HTML 4.01. For a time, there was a dispute among those creating the web standards whether HTML 5 or the XML-based XHTML 1.0 (and later 2.0) would be the new standard for the web. Eventually HTML 5 emerged as the preferred format.

ARIA is not a version of HTML. It is an extension of the capabilities of HTML by adding new attributes. The main purpose of ARIA is to allow JavaScript to communicate dynamic changes in roles, states, and relationships to assistive technologies. Most of the ARIA specification is intended for use in web applications, rather than in static web content, but some of the ARIA roles overlap with some of the new HTML 5 elements.

Comparing HTML 5 to ARIA

The alignment of ARIA roles and HTML 5 elements is not exact. The intentions and purposes are somewhat different between the two specifications, but the following table presents a reasonable interpretation of some of the ways HTML 5 and ARIA can overlap.

New HTML 5 elements and corresponding ARIA roles
HTML 5 ARIA Role
<header> role="banner"
<nav> role="navigation"
<main> role="main"
<footer> role="contentinfo"
<aside> role="complementary"
<section> role="region" *
<article> role="article" *
none role="search"
<form> role="form"

* The region and article roles are not ARIA landmarks

The most useful of these for most websites are header/banner, nav/navigation, main, and footer/contentinfo. The others may be used as well, but are not as widely applicable across most websites.

Best Practice: Use Both HTML 5 Elements and ARIA Landmarks in the Same Element

With both a <nav> region and a navigation role available, which should you use? Or should you use both? The short answer is that the most robust method is to use both at the same time, in the same element. Or, if you are not using HTML 5 at all, use just the ARIA roles. The future of landmark navigation will probably favor HTML regions more than ARIA landmarks, but at the time this was written, screen reader support for HTML 5 regions was still incomplete. The <header> and <main> regions, in particular, are currently not well supported. ARIA landmarks, on the other hand, are already very well supported right now, and have been for several years.

You can apply ARIA roles to any element. You can apply role="navigation" to a <div> or a <ul> or most any other block-level HTML element. For the best semantic structure, though, it makes sense to apply it to the <nav> element. Similarly, it makes sense to apply role="main" to the <main> element.

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>
</header>
<nav role="navigation">
   <ul>
      <li>Put navigation here</li>
   </ul>
</nav>
<main role="main">
   <p>Put main content here.</p>
</main>
<footer role="contentinfo">
   <p>Put copyright, etc. here.</p>
</footer>

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

Or, if you are not using HTML 5 at all, use <div> elements instead of the HTML 5 elements:

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

Style the HTML 5 Elements with display:block and Add an IE Hack

To ensure that the HTML 5 regions display properly in older browsers, you probably want to assign display:block to them in the CSS file. Otherwise they may display inline, which could break the page's layout. If you want to support Internet Explorer versions older than IE 9, you'll also need to add a hack to make up for the faulty way that the browser won't allow you to apply styles to unknown tags.

Assigning Block Styling to HTML Regions

Add this to the style sheet. The purpose is to ensure that the new HTML 5 block level elements are displayed as block level elements, rather than inline elements.

header, nav, main, footer, article, section, aside {
   display:block;
}

A Hack to Allow IE < 9 to Style Unknown Tags

Add this code to the document head. The code must appear before any of the new tags, or else it will not work. The purpose of this script is to declare the existence of these elements, so that IE allows us to style them.

<!--[if lt IE 9]>
  <script>
    var e = ("abbr,article,aside,audio,canvas,datalist,details," +
      "figure,footer,header,main,mark,menu,meter,nav,output," +
      "progress,section,time,video").split(',');
    for (var i = 0; i < e.length; i++) {
      document.createElement(e[i]);
    }
  </script>
<![endif]-->

How Screen Readers Read Landmarks

Example

For a thorough explanation of how browsers and screen readers read HTML 5 landmark tags and ARIA landmark roles, view the landmark example page.