1.3. Structure the main content area with `<main role="main">`

The main content area of the page must be marked up with <main role="main">.

Warning

A page must contain only one visible <main role="main"> tag.

<header role="banner">[…]</header>
<nav role="navigation">[…]</nav>
<main role="main">[…]</main>
<footer role="contentinfo">[…]</footer>

Find out more

2 comments

Par Igor, le 14 April 2023 at 15h23.

Please update this page. You’re referencing 10-years old documentation.

HTML5 tags are already keeping the accessibility semantics, so adding role values is just redundant:
– https://www.w3.org/WAI/ARIA/apg/patterns/landmarks/examples/banner.html
– https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/banner_role
– https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/navigation_role
– https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/main_role
– https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/contentinfo_role

Répondre
- Par Romain Desjardins (Atalan), le 17 April 2023 at 10h23.
  
  Hello Igor,
  
  Thank you for your message.
  
  We are still asking for both the HTML tag and its associated role for 2 reasons:
  - This ensures a good support for technical aids. Unfortunately (unless I’m mistaken), the HTML5 specification does not prohibit the use of multiple header that do not come from an article or section. Whereas role="banner", on the other hand, must explicitly be used only once per page. So there is a slight gap on this point. Not using this role in this situation might have an impact on the information output with technical aids.
  - They are needed to comply with the French accessibility standard (RGAA 4.1.1). This may no longer be the case in a future update of this standard, in which case we will update this sheet.
  I hope it helps you.
  
  Regards,
  Romain
  
  Répondre

1.3. Structure the main content area with <main role="main">

Warning

Find out more

2 comments