• Success Criterion 1.3.1
  • Conformance level A

Current Page or Step Marked Only by Visual Styling

1.3.1 — Info and Relationships

Scenario

Setting

A bank's mobile money-transfer screen

What’s wrong

Current page/step in nav conveyed only visually (no aria-current (code marking the current item), no text).

Example 

<ul class="steps">
  <li class="step-current">Recipient</li>
  <li>Amount</li>
  <li>Review</li>
</ul>

Why it matters

A screen reader user hears all three steps read the same way and never learns Recipient is the step they're currently on.

How to test

Navigate to the active nav item/step with a screen reader: it should announce 'current' — if only a visual highlight marks it with no aria-current, it fails.

How to fix

aria-current tells assistive tech which item in a set is active, mirroring what color alone shows sighted users.

<ul class="steps">
  <li aria-current="step" class="step-current">Recipient</li>
  <li>Amount</li>
  <li>Review</li>
</ul>

Outcome

A user hears Recipient, current step and knows exactly where they stand in the transfer.

Who is affected

Screen reader users moving through a multi-step transfer lose track of their progress in the flow.

Learn more

Related scenarios