0

With it being a common practice to highlight a link in the main navbar of a website when viewing the page or subpage of said link, would it be a bad use of aria-current="page" to highlight the ancestor link in the navbar on a subpage?

For example, let's say I'm visiting /galleries/gallery1/. Could the navbar on that subpage of galleries be presented as:

<!-- /galleries/gallery1/index.html -->
<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about/">About</a></li>
    <li><a href="/galleries/" aria-current="page">Galleries</a></li>
    <li><a href="/contact/">Contact</a></li>
  </ul>
</nav>

Or would that be an incorrect usage of aria-current?

apokaliptis
  • 424
  • 1
  • 4
  • 12
  • 1
    That's a perfect way to use it. If your main menu displays the "galleries" link in a different visual style than the other links in the menu (eg, diff background color or "galleries" is underlined), then the sighted user has a clue as to which page corresponds with the menu. That same clue needs to be provided to assistive technology and that's done with `aria-current`. – slugolicious Apr 20 '23 at 04:46

1 Answers1

0

Based on the previous answer here: What ARIA state role to use for current page in navigation

As well as the aria breadcrumbs example: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current

When you have a group of related elements, such as several links in a breadcrumb or steps in a multi-step flow, with one element in the group styled differently from the others to indicate to the sighted user that this is the current element within its group, the aria-current should be used to inform the assistive technology user what has been indicated via styling.

I do believe that aria-current is designed for non primary navigations like breadcrumbs.

You can leave the active tab non hyperlinked or leave it as is.

Just make sure you use: role="navigation" on your nav.

Code2Empower
  • 73
  • 7