Where should skip links go?

Question

axe-core 4.6.3 throws the error "All page content should be contained in landmarks" on skip links which are above header, outside of page landmarks.

<ul>
  <li><a id="top-anchor" class="skip-anchor" name="top"> </a></li>
  <li><a id="skip-to-nav" class="skip-link focusable" href="#nav">Skip to navigation</a></li>
  <li><a id="skip-to-content" class="skip-link focusable" href="#content">Skip to main content</a></li>
</ul>

Is there some way to landmark these? What is the standard?

Answer 1

Yes, you can landmark the skip links using the landmark

<nav>
  <ul>
    <li><a id="top-anchor" class="skip-anchor" name="top"> </a></li>
    <li><a id="skip-to-nav" class="skip-link focusable" href="#nav">Skip to navigation</a></li>
    <li><a id="skip-to-content" class="skip-link focusable" href="#content">Skip to main content</a></li>
  </ul>
</nav>

if use face nav used elsewhere issue.

To fix this issue, you can either:

Remove the nav role from the nav element, and replace it with an id attribute like this:

<nav id="main-nav">
  <ul>
    <li><a id="top-anchor" class="skip-anchor" name="top"> </a></li>
    <li><a id="skip-to-nav" class="skip-link focusable" href="#main-nav">Skip to navigation</a></li>
    <li><a id="skip-to-content" class="skip-link focusable" href="#content">Skip to main content</a></li>
  </ul>
</nav>

Use a different landmark role for the skip navigation link, such as aside, header, or footer. For example:

<nav>
  <ul>
    <li><a id="top-anchor" class="skip-anchor" name="top"> </a></li>
    <li><a id="skip-to-nav" class="skip-link focusable" href="#main-nav">Skip to navigation</a></li>
    <li><a id="skip-to-content" class="skip-link focusable" href="#content">Skip to main content</a></li>
  </ul>
</nav>
<header>
  <h1>My Website</h1>
</header>
<aside role="complementary">
  <h2>Navigation</h2>
  <nav id="main-nav">
    <!-- navigation links go here -->
  </nav>
</aside>
<main>
  <!-- main content goes here -->
</main>
<footer>
  <p>&copy; 2023 My Website. All rights reserved.</p>
</footer>