Follow

HTML 5 and ARIA Roles

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".

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.

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.

 

Markup Example

<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>
Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request