1.1.1. Identify the main regions of the page with the role attribute

The main regions of the page must be identified with the ARIA attribute role (also referred to as landmark role).

This attribute has several different values to define the regions, including:

  • role=“banner to define a content region that identifies the site, such as a banner with a logo, a slogan and/or a search field.
  • role=“search to define a region for searching, such as a search form.
  • role=“navigation to define menus or main navigation elements.
  • role=“main to define the main content region of the page.

The role attribute may be added to any HTML tag such as <div>, <form>, <nav>, etc.


A page can only have one role=“main”.


  • It is possible to nest several ARIA landmark roles: role=”search”, one inside the other, in role=”banner”, for example.
  • You are advised not to overload the page with role=”navigation” attributes. It is not necessary to identify each pagination system or each link; only the main menus must be identified.


In HTML5, it is a good accessibility practice to systematically add role=“navigation” to each <nav> tag.

<nav role="navigation">

This temporary recommendation is valid until the development of HTML5 is finalized, and it is properly implemented by browsers and assistive devices.


Example of ARIA role placement in a web page.
Note that role=“navigation” has been added to the main menu as well as the secondary menu.

Some useful tools


notices/html-css/identifier-les-principales-zones-de-la-page-avec-l-attribut-role.txt · Last modified: 30 December 2013 at 17:13 by Sébastien Delorme (Atalan)

Project coordinated by Atalan.

In partnership with: