This is an unpublished editor’s draft that might include content that is not finalized. View the published version

Skip to content

Technique ARIA26:Using aria-current to identify the current item in a set

About this Technique

This technique relates to:

This technique applies to technologies that support Accessible Rich Internet Applications (WAI-ARIA).

Description

The purpose of this technique is to programmatically indicate the current item in a user interface component that contains a set of related items. The aria-current attribute provides a way to programmatically indicate the element that is usually only visually highlighted, for example: the current page in a navigation bar.

Examples

Example 1: Identify the current page in a navigation bar

This is an example of aria-current used on a navigation bar. It uses the attribute's page value to programmatically identify the current page that the user is on.

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/food" aria-current="page">Food</a></li>
    <li><a href="/drinks">Drinks</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

A working example of identifying the current page in a navigation bar.

Example 2: Identify the current step in a process

This is an example of aria-current used to mark up the steps in a recipe. It uses the attribute's step value to programmatically identify the current step:

<h2>Meringue Recipe Steps</h2>
<ol>
  <li><a href="#oven">Heat your oven</a></li>
  <li><a aria-current="step" href="#separate">Separate eggs</a></li>
  <li><a href="#whisk-eggs">Whisk egg whites</a></li>
  <li><a href="#whisk-sugar">Whisk in the sugar</a></li>
  <li><a href="#pipe">Pipe mixture into shapes</a></li>
  <li><a href="#bake">Bake</a></li>
  <li><a href="#cool">Allow to cool</a></li>
</ol>

A working example of identifying the current step in a process.

Example 3: Identify the current time in a timetable

This is an example of aria-current used to mark up the current time in a timetable. It uses the attribute's time value to programmatically identify the current lesson in a class schedule:

<h2>Morning Class Schedule</h2>
<table>
  <tr>
    <th>Time</th>
    <th>Subject</th>
  </tr>
  <tr>
    <td>
      <time datetime="2021-03-25T08:30">8:30-9:00am</time>
    </td>
    <td>Morning Meeting</td>
  </tr>
  <tr>
    <td>
      <time datetime="2021-03-25T09:00">9:00-9:30am</time>
    </td>
    <td>Math</td>
  </tr>
  <tr>
    <td>
      <time aria-current="time" datetime="2021-03-25T09:30">9:30-10:30am</time>
    </td>
    <td>Reading</td>
  </tr>
  <tr>
    <td>
      <time datetime="2021-03-25T10:30">10:30-10:45am</time>
    </td>
    <td>Recess</td>
  </tr>
  <tr>
    <td>
      <time datetime="2021-03-25T10:45">10:45-11:30am</time>
    </td>
    <td>Music</td>
  </tr>
  <tr>
    <td>
      <time datetime="2021-03-25T11:30">11:30-12:00pm</time>
    </td>
    <td>Independent Work</td>
  </tr>
  <tr>
    <td>
      <time datetime="2021-03-25T12:00">12:00-12:45pm</time>
    </td>
    <td>Lunchtime</td>
  </tr>
</table>

A working example of identifying the current time in a timetable.

Related Resources

No endorsement implied.

Tests

Procedure

For each component that contains a set of related elements where one element is visually highlighted to denote its current status:

  1. Check that the highlighted item has an aria-current attribute with a suitable value.

Expected Results

  • #1 is true.
Back to Top