2 replies

Accessibility of secondary navigation

Hello,
I am rebuilding a component, that is used as a secondary navigation, directly below the h1, with the parent page name, and I am not sure how to set up the HTML correctly.
The current version is, that all secondary page headings are links:

<h1>Development</h1>
<nav>
  <ul>
    <li>
      <a aria-current="page">Front-End</a>
    </li>
    <li>
      <a>Back-End</a>
    </li>
  </ul>
</nav>

<h1>Development</h1>
<nav>
  <ul>
    <li>
      <a aria-current="page">Front-End</a>
    </li>
    <li>
      <a>Back-End</a>
    </li>
  </ul>
</nav>

Now I think those should be h2s, which gives me two options:
1) switch the active a to a h2, but I think I should use the

aria-current

aria-current

. Is it valid to put it on the h2?

<h1>Development</h1>
<nav>
  <ul>
    <li>
      <h2 aria-current="page">Front-End</h2>
    </li>
    <li>
      <a>Back-End</a>
    </li>
  </ul>
</nav>

<h1>Development</h1>
<nav>
  <ul>
    <li>
      <h2 aria-current="page">Front-End</h2>
    </li>
    <li>
      <a>Back-End</a>
    </li>
  </ul>
</nav>

2) add a h2 inside the a, containing the text.

<h1>Development</h1>
<nav>
  <ul>
    <li>
      <a aria-current="page"><h2>Front-End</h2></a>
    </li>
    <li>
      <a>Back-End</a>
    </li>
  </ul>
</nav>

<h1>Development</h1>
<nav>
  <ul>
    <li>
      <a aria-current="page"><h2>Front-End</h2></a>
    </li>
    <li>
      <a>Back-End</a>
    </li>
  </ul>
</nav>

Or should I go another way?

I am also not sure about a aria-tag on the nav to mark it as secondary navigation or is that clear, since it is directly after the h1?

Thank you for your time.

KP-C

Kevin Powell - Community•4mo ago•

2 replies

Wolle

Accessibility of secondary navigation

<h1>Development</h1>
<nav>
  <ul>
    <li>
      <a aria-current="page">Front-End</a>
    </li>
    <li>
      <a>Back-End</a>
    </li>
  </ul>
</nav>

<h1>Development</h1>
<nav>
  <ul>
    <li>
      <a aria-current="page">Front-End</a>
    </li>
    <li>
      <a>Back-End</a>
    </li>
  </ul>
</nav>

Now I think those should be h2s, which gives me two options:
1) switch the active a to a h2, but I think I should use the

aria-current

aria-current

. Is it valid to put it on the h2?

<h1>Development</h1>
<nav>
  <ul>
    <li>
      <h2 aria-current="page">Front-End</h2>
    </li>
    <li>
      <a>Back-End</a>
    </li>
  </ul>
</nav>

<h1>Development</h1>
<nav>
  <ul>
    <li>
      <h2 aria-current="page">Front-End</h2>
    </li>
    <li>
      <a>Back-End</a>
    </li>
  </ul>
</nav>

2) add a h2 inside the a, containing the text.

<h1>Development</h1>
<nav>
  <ul>
    <li>
      <a aria-current="page"><h2>Front-End</h2></a>
    </li>
    <li>
      <a>Back-End</a>
    </li>
  </ul>
</nav>

<h1>Development</h1>
<nav>
  <ul>
    <li>
      <a aria-current="page"><h2>Front-End</h2></a>
    </li>
    <li>
      <a>Back-End</a>
    </li>
  </ul>
</nav>

Or should I go another way?

I am also not sure about a aria-tag on the nav to mark it as secondary navigation or is that clear, since it is directly after the h1?

Thank you for your time.

Accessibility of secondary navigation

Similar Threads

Accessibility of secondary navigation

Similar Threads

Similar Threads

Similar Threads