- 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
Watch a bank's mobile money-transfer screen closely and you'll spot this: current page/step in nav conveyed only visually (no aria-current (code marking the current item), no text).
Why it matters
Screen-reader, braille, and reading-tool users who depend on coded structure rather than visual layout. Here, on a bank's mobile money-transfer screen, the result is they lose track of what belongs to what.
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
Mark the active item with aria-current (code marking the current item)="page" (code marking the current item) (or 'step') so position is announced.
Outcome
After the fix, the same visitor to a bank's mobile money-transfer screen can now understand how the page is organized.
Who is affected
Screen-reader, braille, and reading-tool users who depend on coded structure rather than visual layout.
Learn more
- Understanding Understanding document (opens in a new tab)
Related scenarios
- Text Styled to Look Like a Heading Instead of Coded as One
- Text Columns Faked With Spaces Instead of Real Table Markup
- Table Layout Faked With Spaces Instead of Real Table Code
- Clickable Div Acting as a Link Button With No Real Role
- Structural HTML Tags Used Purely for Visual Styling
- Layout-Only Table Wrongly Coded With Real Header Cells