Marking an Element as Current using aria-current

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.

Working example

Explanation

On a semantical level, the aria-current attribute is a good choice to convey that an element is the current one:

A screen reader will announce:

Home. Link Blog. Current link.

Code

<ul>
  <li>
    <a href="...">Home</a>
  </li>
  <li>
    <a aria-current="true" href="..." >Blog</a>
  </li>
  <li>
    <a href="...">Shop</a>
  </li>
  <li>
    <a href="...">Contact</a>
  </li>
</ul>
NIL
NIL