Created by: ffoodd
aria-current
attribute has many advantages and a single drawback compared to visually hidden text like <span class="sr-only">(current)</span>
— let me explain:
- it's standardized as part of ARIA 1.1
- it's widely supported by browsers and screen readers
- it's interoperable and programmatic, so can be usedby any tool reading the markup
- internazionalition and localization is not a thing, assistive technologies take care of it
- it allows to fine tune the context with its diffrent values (
page
,true
,date
,step
,location
, etc.) - it could be used as a style hook by using
[aria-current]
, thus replace the.active
state (didn't push this much, but could if you like the idea) — and also as a JavaScript hook, obviously.
The single drawback is that is does not appear when CSS is missing, whereas the visually hidden text does.
I think aria-current
wins, so here's a full PR making a few different things:
- add
aria-current
in components already using.active
(only if appropriate, obviously — so not in JavaScript tabbed interface, for example) ; - mention
aria-current
beside.active
in thos components' documentation; - update examples templates accordingly;
- apply
aria-current
in docs navigations as well (main nav, sidenav, versions dropdowns).
And as usually, each of those lives in its very own commit.