User Tools

Site Tools


accessibility:aria:landmarks

Table of Contents

Headings

Headings (<h1> through <h6>) should be used to mark up the titles of each section. Section titles that are made large or bold using CSS will not have any special meaning to screen reader users.

Using only one <h1> tag per page is considered best practice. Other headings should create a logical document outline with no skipped levels. This can be tricky to achieve in components that may be inserted anywhere in a page.

Landmarks

Landmarks are a subset of ARIA roles that correspond to HTML5 document structure tags (<main>, <nav>, <aside>, <header>, and <footer>). These help screen reader users navigate the page layout. Each tag has a corresponding ARIA role that can be used on <div> and other older tags to mimic HTML5 structure. In modern browsers, it is not necessary to include redundant role attributes.

Everything visible on the page should be included in a landmark. There should be one main landmark. Most other landmarks can be enclosed within other landmark regions, but it’s best practice to use only one banner (<header>) and contentinfo (<footer>) region.

When multiple landmarks have the same role, you can use ARIA labels to give them unique and descriptive names. Without labels, <nav> elements used for the main navigation, breadcrumbs, and pagination might all appear as “navigation” in the landmarks menu. Navigation menus should not use the ARIA menu role, which is intended for operating system menus.

With the generic “region” role, it is possible to create custom landmark regions. The region should have an ARIA label that describes its purpose. See Building the Accessible Name and Description.

References

accessibility/aria/landmarks.txt · Last modified: 2023/07/19 12:09 by scl

Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki

© 2008-2022 GPLS and others. Evergreen is open source software, freely licensed under GNU GPLv2 or later.
The Evergreen Project is a U.S. 501(c)3 non-profit organization.