The landmarks of a web document

HTML5 is great. One of its advantages are the new tags that allow to define certain page elements – <header>, <nav>, <sidebar> to name a few. In contrast to just <div>s with classes they are not only easy to style but also actually describe their content. Unfortunately the latter doesn’t apply to screen readers at the moment. To them they are not more than a bunch of meaningless <div>s. But there is a proper way to enhance these tags to give them a meaning in such assistive technologies: WAI ARIA landmarks applied through the role attribute.

Subsequent the HTML5 tags and their equivalent roles:

  • <article>role="article"
  • <aside>role="complementary"
  • <footer>role="contentinfo"
  • <header>role="banner"
  • <nav>role="navigation"
  • <section>role="region"

Additionally there are two special cases:

  • The main area of your site should be marked with role="main".
  • For the search form use role="search".

Just use the HTML5 tags as always but additionally give them the appropriate role attribute. This way there is no need for the so called skip links anymore because screen readers directly recognize the different parts of your site and are able to jump there. Besides these most important roles it’s possible to use even more. In-depth information about this topic can be found at the W3C. Andy Clarke also talks about it in his latest book (beginning at page 149) just like the september issue of .net magazine provides some guidance (beginning at page 53).

As a “normal” user you won’t notice any difference if you visit a site that is enhanced by WAI ARIA landmarks, but for visual impaired people there is a huge gain in accessibility and ease of use. Landmarks are – like media queries – another technique to make a website usable for as many people as possible. And that should be one of your main goals.

  • Jeff A

    Christian, thank you for a clear/concise explanation on the use and value of “role=”. Best I’ve encountered thus far – no need to search any further.

  • Radu

    Thanks. Short and very informative.

  • Luan

    Thanks man!!!