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.

<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.

<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.

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.

<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.

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

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

Example 5: aria-current="location"

Per the WAI-ARIA specification, location is intended for "the element that is visually styled as the current component, such as within a flow chart." This example shows a museum floor plan, marking which room you're currently in.

This is a genuinely different shape from Example 3's checkout steps, not just a different justification. A museum layout has no fixed order, you could walk from the entrance straight to the gift shop, skip a room entirely, or backtrack. There's no "step 3 of 5," no completion state, nothing forcing a sequence. That's why this uses a plain, unordered list rather than the numbered list used for the checkout steps, order isn't semantically meaningful here the way it was there.

A note on this value specifically: unlike page or step, which have obvious, near-canonical real-world examples, location is comparatively spec-vague. The specification's own illustration ("a flow chart") is abstract enough that reasonable people land on quite different concrete examples for it, an earlier version of this page used an order-tracking diagram instead, which turned out to be too structurally similar to step to make the distinction clear. If this example still doesn't feel like an obvious, settled case to you, that's a fair reaction, not a sign you're missing something.

Expected result: "Dinosaurs" should be announced as the current location, in addition to its position in the list.

<ul aria-label="Museum floor plan">
  <li>Entrance</li>
  <li>Ancient Egypt</li>
  <li aria-current="location">Dinosaurs</li>
  <li>Space exploration</li>
  <li>Gift shop</li>
</ul>

Example 6: aria-current="time"

Used to mark the current entry within a set of times, for example, the current slot in a daily schedule or timetable.

Expected result: the "10:30am, Client call" entry should be announced as the current time, in addition to its position in the list.

<ol aria-label="Today's schedule">
  <li>9:00am, Team standup</li>
  <li aria-current="time">10:30am, Client call</li>
  <li>1:00pm, Lunch</li>
  <li>2:30pm, Design review</li>
</ol>

Example 7: aria-current="true"

The generic value, used when none of the more specific values (page, step, location, date, time) apply. A common real-world case is a set of filter or category buttons, where "current" doesn't map cleanly onto any of the more specific meanings.

Expected result: "Accessibility" should be announced as current, without implying any of the more specific meanings (not a page, not a step, not a location, date, or time).

<button>All</button>
<button aria-current="true">Accessibility</button>
<button>Development</button>
<button>Design</button>

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 for the page value specifically. The remaining values, step, location, date, time, and the generic true, have not been independently verified here, worth confirming each one with your own standard browser and screen reader combinations rather than assuming the same strong support extends to all of them equally.

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