Using Visually Hidden Text as an Alternative to ARIA-Current

An alternative technique to using the aria-current attribute to indicate the current state of an element is to use visually hidden text. This involves adding the indication of the current state within an element that is visible on the page, but also includes visually hidden text that is only accessible to screen readers. This technique allows you to more easily control the placement and formatting of the indication and can be a robust solution. However, it does require a bit more work to implement compared to using the aria-current attribute.

Working Example

• Current page: Element 1
• Current step: Element 2
• Current location: Element 3
• Current date: Element 4
• Current time: Element 5
• Current: Element 6

Code

<ul>
  <li>
    <span class="visually-hidden">Current page: </span>Element 1
  </li>
  <li>
    <span class="visually-hidden">Current step: </span>Element 2
  </li>
  <li>
    <span class="visually-hidden">Current location: </span>Element 3
  </li>
  <li>
    <span class="visually-hidden">Current date: </span>Element 4
  </li>
  <li>
    <span class="visually-hidden">Current time: </span>Element 5
  </li>
  <li>
    <span class="visually-hidden">Current: </span>Element 6
  </li>
</ul>

.visually-hidden {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

NIL