Go to search page
A11ying with Sanna - I would if I could a guide to web accessibility

ARIA roles

ARIA roles describe what an element is or what it does. They do not cause browsers to provide keyboard behaviors or styling. ARIA roles are added via role="*TYPE*". ARIA role does not change for an element after it is set.

There are six categories of ARIA roles:

  • Landmark
  • Document structure
  • Widget
  • Window
  • Live regions
  • Abstract

Landmark roles

The landmark roles are:

  • Banner. Banner typically contains the name of the web site, logo, search and/or main navigation. Banner is semantically equivalent to <header>.
  • Complementary. Complementary contains supporting content for the main content, like content presented in a side bar. Complementary is semantically equivalent to <aside>.
  • Contentinfo. Contentinfo contains informational child content, for example, footnotes or links to privacy statement. Contentinfo is semantically equivalent to <footer>.
  • Main. Main contains the main or central content of the document. Main is semantically equivalent to <main>.
  • Navigation. Navigation is the area that contains the navigation links for the document or web site. Navigation is semantically equivalent to <nav>
  • Region. The region role is used to identify document areas the author deems significant. It is a generic landmark available to aid in navigation when none of the other landmark roles are appropriate. Using the <section> element will automatically communicate a section has a role of region if it is given an accessible name.
  • Search. Search contains the search functionality for the site. There is no equivalent element in HTML, at least not currently.

As you may have noticed, most of the landmark roles have equivalent HTML tags. Whenever possible, it is best to use the HTML markup. I've often seen both the HTML tag and the landmark roles used, for example <header role="banner">, this is technically allowed but it's unnecessary.

Every element with a region role should include a label that describes the purpose of the content in the region. Preferably with an aria-labelledby attribute referencing a visible header. If no visible appropriate header is present, use aria-label.

Document structure roles

Document Structure roles are used to provide a structural description for a section of content. Most of these roles are now supported by semantic HTML elements with the same meaning, so they should no longer be used. These are not currently available as equivalent native HTML tags:

  • toolbar
  • tooltip
  • feed
  • math
  • presentation / none
  • note

Widget roles

The various widget roles are used to define common interactive patterns. Similar to the document structure roles, some of these roles duplicate the semantics of native HTML elements that are well supported, and should not be used. The difference between the two is that, generally, the widget roles require JavaScript interaction and the document structure does not necessarily.

Window roles

Window roles define sub-windows to the main document window, within the same window, such as pop up  modal dialogs:

  • alertdialog
  • dialog

Live region roles

Live region roles are used to define elements with content that will be dynamically changed. Sighted users can see dynamic changes when they are visually noticeable. These roles will help assistive technology users to know if some content has been updated. Assistive technologies can be made to announce dynamic content changes:

  • alert
  • log
  • marquee
  • status
  • timer

Abstract roles

Abstract roles are only intended for use by browsers to help organize and streamline a document. They should not be used by developers writing HTML markup. Doing so will not result in any meaningful information being conveyed to assistive technologies or to users.

Example of an ARIA role

You add an ARIA role with the role attribute:

<div role="menuitem">Text</div>

Source material