Using the aria-current attribute

Associated themes :

Introduction #

The aria-current attribute indicates the element that represents the current item within a container or set of related elements.

To put it simply, let's take the example of a navigation menu. The current element is usually highlighted by a visual effect. So that this highlighting is also perceived by users who use a screen reader (or any assistive technoligies), it is essential to mark the element at code level using the aria attribute aria-current.

How to use it ? #

To indicate the current element in an element set, simply add an aria-current attribute in the HTML code. For the example below, we use the generic value true:

    <li>element 1</li>
    <li aria-current="true">element 2</li>
    <li>element 3</li>

The second element of this list will for example be vocalized "current, element 2" by the NVDA screen reader.

Uses #

The aria-current attribute accepts the following values: true, page, step, location, date, time and false.

  • true : indicates the current item within a set
  • page : indicates the current page within a set
  • step : indicates the current step within a process
  • location : indicates the current location within an environment or context.
  • date : indicates the current date within a collection of dates.
  • time : indicates the current time within a set of times
  • false (default) : does not represent the current item within a set

Some examples of common uses #

Examples 1: navigation menu #

Use the value page to indicate the current page in a set of pages.

Navigation menu with 3 items: home, help and about. The about element is underlined and displayed in a different color which visually allows to understand that it is the element currently being consulted

  <nav aria-label="Main navigation">
        <a href="/en/">Home</a>
        <a href="/en/help/">Help</a>
        <a href="/en/about/" aria-current="page">About</a>

Examples 2: paging system #

Use the page value to indicate the page being viewed in a paging system:
Screenshot, example of paging system, a previous button, a next button and 3 links labeled 1, 2 and 3

    <li aria-label="page 1">1</li>
    <li aria-label="page 2" aria-current="page">2</li>
    <li aria-label="page 3">3</li>    

Examples 3: breadcrumb #

Use the page value to indicate the current page in a breadcrumb:
Screenshot of a breadcrumb

    <li><a href="...">Home</a></li>
    <li><a href="...">Articles</a></li>
    <li aria-current="page">Using the aria-current attribute</li>

Examples 4: step process #

Use the step value to indicate the current step in a multi-page step process.

Screenshot of a component displaying a step-by-step process such as can be found on a merchant site (choice of a product, delivery, payment...). 5 steps are visible, step 3 is highlighted (color change) to indicate that it is the current step.

    <li>Label n°1</li>
    <li>Label n°2</li>
    <li aria-current="step">Label n°3</li>
    <li>Label n°4</li>
    <li>Label n°5</li>

Example 5: datepicker #

Use the date value in a datepicker component. An aria-current="date" attribute is positioned on the current date while an aria-selected="true" attribute is positioned on the currently selected date.

Screenshot of a datepicker component, today's date and the date being selected are highlighted.