Home accessibilityinformation structuresemantic structure and aria landmarks

Semantic structure and aria landmarks

Impact: Moderate to high

Users mainly impacted: Blind, severely visually impaired, motor impaired.

RGAA criteria: Criterion 9.2 - Criterion 12.6

Explanation

Screen readers or some browser plug-ins provide quick navigation based on the structural elements of the HTML5 document.

In their absence, people who are blind or severely visually impaired may have difficulty identifying large areas of the document or moving quickly through the page, for example on navigation elements.

People with motor disabilities will see the fast access functionalities to the large areas of the document as inoperative.

HTML5 elements and ARIA landmarks

The large areas that allow to structure a web page are:

  • the main header;
  • the main content;
  • the footer (legal information, etc.) ;
  • the search engine;
  • the main navigation and any secondary navigations.

Each of these zones has a specific ARIA property that will allow them to be identified with certainty. These properties are implemented with the role attribute:

  • the main header: role="banner" ;
  • the main content: role="main";
  • the footer (legal information, etc.): role="contentinfo" ;
  • the search engine: role="search" ;
  • the main navigation and any secondary navigation: role="navigation".

In HTML5, each of these zones is identified by a specific HTML5 tag:

  • the main header: <header> ;
  • the main content: <main> ;
  • the footer (legal information, etc.) : <footer> ;
  • the main navigation and any secondary navigation: <nav>.
Important
  • You can find several header tags, but the role="banner must be unique in the page.
  • The <main> tag and the role="main" are unique in the page.
  • You can find several footer tags, but the role="contentinfo" must be unique in the page.
  • We can find several <nav> tag and several role="navigation". In the case of several navigation roles, a good practice is to add an aria-label or aria-labelledby attribute to differentiate them.
  • The role="search" is unique in the page.
Important

When an area is hidden (in CSS, or with `aria-hidden’), this area will not be rendered in assistive technologies. It is therefore necessary to add the role on a visible element.

How to determine what is…

The main header?

A banner usually appears at the top of the page and typically spans the full width. It includes things such as the logo or identity of the site sponsor, and a site-specific search tool.

The main content?

The main content of a page is the content of interest. It is the content that gives meaning to your page and without which your page is useless.

Primary and secondary navigation?

The main navigation, generally called the “menu”, is an element that can be found on all the pages of your website. It is the one found at the beginning of the content to reach the main sections of your site.

Very often, there are also contextual navigations in specific sections. These elements are to be considered as secondary navigations and must be implemented in the same way as the main navigation.

Tip

In order to allow users who navigate with a screen reader to distinguish all the navigations you have defined, you can titrate them using the aria-label property.

<nav role="navigation" aria-label="main menu"></nav>

<nav role="navigation" aria-label="In the same section"></nav>

The search engine?

The search engine can be an interesting alternative for users who could not use the menu or site map. For it to be considered as an alternative, it must nevertheless allow, based on its results, to reach any content of the site.

Thus, a search engine limited to a catalogue cannot be considered as a navigation system.

The footer is to be considered as an element that provides information on the site. We will generally place, if present, legal information (copyright, link to legal notices…), contact information (address, phone…).

Important

The footer region is not necessarily equivalent to the footer of the graphic model.