Identify the current position in navigation systems with aria-current

In all navigation systems (menus, breadcrumb trails, pagination systems, etc.), the current position is to be identified by aria-current="page".

Likewise, any parent sections and sub-sections are to be identified in menus (and not in breadcrumb trails) by aria-current="true".

Example in a menu

In the example below of code for a navigation menu, the parent section “Upcoming events” is identified by aria-current="true" included in the <a> element and the current page “Education” is identified by aria-current="page" included in the <li> tag.

<nav role="navigation" aria-label="Main menu">
   <ul>
      <li><a href="…">Home</a></li>
      <li><a href="…" aria-current="true">Upcoming events</a>
         <ul>
            <li><a href="…">Culture</a></li>
            <li aria-current="page">Education</li>
            <li><a href="…">Sports</a></li>
         </ul>
      </li>
      <li><a href="…">News</a></li>
      <li><a href="…">Contact</a></li>
   </ul>
</nav>

Example in a pagination system

In the code example below for a pagination system, the current page “2” is identified by aria-current="page" included in the <li> tag.

<nav role="navigation" aria-label="Pagination">
   <ul>
      […]
      <li><a href="…" aria-label="Page 1">1</a></li>
      <li aria-current="page">2</li>
      <li><a href="…" aria-label="Page 3">3</a></li>
      […]
   </ul>
</nav>

Example in a breadcrumb trail

In the example below of code for a breadcrumb trail, the current page “Editorial manual” is identified by aria-current="page" included in the <li> tag.

<nav role="navigation" aria-labelledby="intro-pagination">
   <p id="intro-pagination">You are here:</p>
   <ul>
      <li><a href="…">Home</a></li>
      <li><a href="…">AcceDe Web guidelines</a></li>
      <li aria-current="page">Editorial manual</li>
   </ul>
</nav>

Find out more

Comments

Add a comment

All fields are mandatory.

Back to top