Back to home

Testing aria-current

aria-current indicates the element within a set that represents the current item. It supports several specific values: page, step, location, date, time, and a generic true, plus false (the default).

Example 1: without aria-current

This navigation menu visually highlights the current page with bold, underlined text, but has no aria-current anywhere. The visual signal exists, but there is no programmatic equivalent.

Expected result: nothing should identify "Home" as the current page programmatically, a screen reader user has no way to know which link represents the page they are already on.

HTML markup 
<nav aria-label="Example navigation">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

Example 2: aria-current="page"

The most common use of aria-current, marking the current page within a navigation menu.

Expected result: "Home" should be announced as the current page, in addition to being a link.

HTML markup 
<nav aria-label="Example navigation">
  <ul>
    <li><a href="#" aria-current="page">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

Example 3: aria-current="step", interactive

This step indicator is fully interactive. Use the Back and Next buttons to move aria-current="step" between steps, only one step should be marked current at a time.

  1. 1. Cart
  2. 2. Delivery
  3. 3. Payment
  4. 4. Confirmation

Expected result: the step marked aria-current="step" should move with each click, and exactly one step should carry the attribute at all times. The Back and Next buttons should stop at the first and last steps rather than wrapping around.

HTML markup 
<ol aria-label="Checkout steps">
  <li aria-current="step">1. Cart</li>
  <li>2. Delivery</li>
  <li>3. Payment</li>
  <li>4. Confirmation</li>
</ol>

Example 4: aria-current="date"

A simple calendar table, with today's date marked using aria-current="date". This uses a native <table> rather than an ARIA grid, since this display is static, not interactive, and aria-current does not require any particular container role to function.

March 2026
Su Mo Tu We Th Fr Sa
1 2 3 4 5 6 7

Expected result: the 5th should be announced as the current date, in addition to its position in the table.

HTML markup 
<td aria-current="date">5</td>

Note for testing: unlike some other ARIA attributes covered on this site, aria-current is not deprecated in any current version of the spec, and published support data (a11ysupport.io) shows a comparatively strong pass rate. Still worth confirming with your own standard browser and screen reader combinations, particularly the step value, which has not been verified here.

A lesson from testing this page: the original version of Example 4 used role="grid" for a static calendar display, without the required role="row" structure and without any keyboard interactivity. VoiceOver could not navigate into it at all, treating the whole thing as a single unstructured block. This has been corrected by using a plain, native <table> instead, since aria-current does not need a grid role to work, and a static display should not be given an interactive composite role like grid in the first place.

Back to home