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

Techniques are examples of ways to meet Web Content Accessibility Guidelines (WCAG). They are not required to meet WCAG. Content can satisfy the normative requirements of WCAG even if it does not use any of the documented techniques. See About WCAG Techniques.

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