Another common navigation technique for users of screen reading software is to generate a list of sectioning content and use it to determine the page's layout. Sectioning content can be labeled using a combination of the aria-labelledby
and id
attributes, with the label concisely describing the purpose of the section.
<header>
<nav aria-labelledby="primary-navigation">
<h2 id="primary-navigation">Primary navigation</h2>
<!-- navigation items -->
</nav>
</header>
<!-- page content -->
<footer>
<nav aria-labelledby="footer-navigation">
<h2 id="footer-navigation">Footer navigation</h2>
<!-- navigation items -->
</nav>
</footer>