Add Landmarks

This site is fairly simple, and the pages are semantically well formed, so adding these is not critical, however they can help streamline browsing for screen reader users.

We suggest three landmarks:

• main (main page content)
• site-wide navigation
• banner (contains skip links and search fields);

You can use the html5 elements main, nav, and header, respectively; all modern browsers will understand these. If you don't wish to use these, or your css prevents you from adding extra elements etc, then add roles main, navigation, and banner, respectively to appropriate container elements like div.

You can nest these, so you can add section-specific navigation to a page by putting a nav element in your main element. WHen multiple same elements (i.e. multiple nav elements) used, you can add a label:

<header>
<nav aria-label="global">
<!-- global navigation -->
...
</nav>

<div role="search" aria-label="site wide">
<!-- site-wide search form here -->
</div>
</header>

<main>
<nav aria-label="local">
<!-- local navigation -->
</nav>
</main>

<footer>
<!-- footer content -->
</footer>

Start by locating the site’s page templates and inspecting their existing HTML structure. Add landmarks for the main page content, site-wide navigation, and the banner containing skip links and search, using semantic elements or equivalent roles; verify that repeated landmarks have useful labels across pages.