Marking Elements using Different aria-current Values

ARIA provides an attribute which allows to mark an element in a set of elements as the current one. It works pretty uniformly in modern browsers and screen readers. Still, for most situations there exist alternative techniques that are more robust.

In modern web applications there are often situations where the user needs to know which one in a set of elements is the current one.

On a visual level, this status typically is indicated using icons, for example a “bullet” icon for the currently selected navigation item. But this information needs to be available also on the semantical level, so screen readers can announce it.

Explanation

There are various possible values for aria-current:

  • page: current page within a set of pages.
  • step: current step within a process.
  • location: current location within an environment or context.
  • date: current date within a collection of dates.
  • time: current time within a set of times.
  • true: current item within a set.
  • false: no an item within a set.

Working Example

  • Element 1
  • Element 2
  • Element 3
  • Element 4
  • Element 5
  • Element 6
  • Element 7

Code

<ul>
  <li aria-current="page">
    Element 1
  </li>
  <li aria-current="step">
    Element 2
  </li>
  <li aria-current="location">
    Element 3
  </li>
  <li aria-current="date">
    Element 4
  </li>
  <li aria-current="time">
    Element 5
  </li>
  <li aria-current="true">
    Element 6
  </li>
  <li aria-current="false">
    Element 7
  </li>
</ul>
NIL
NIL