When you have a group of related elements, such as several links in a breadcrumb or steps in a multi-step flow, with one element in the group styled differently from the others to indicate to the sighted user that this is the current element within its group, the aria-current should be used to inform the assistive technology user what has been indicated via styling.
It seems that anytime LinkTo produces class="active" it should also append aria-current="true"
aria-current="true" is a minimum implementation though, ideally the other aria-current values (page, step, location, etc) should be supported. Perhaps with an additional attribute like so:
seems like a good idea!
question though -- why doesn't the browser do this for us, based on matching href? (same is it would for the :active CSS psuedo attribute? :sweat_smile:
The
LinkTo
component lacks native support for thearia-current
attribute.From: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current
It seems that anytime
LinkTo
producesclass="active"
it should also appendaria-current="true"
aria-current="true"
is a minimum implementation though, ideally the otheraria-current
values (page, step, location, etc) should be supported. Perhaps with an additional attribute like so:<LinkTo @route="home" aria-current="page">Home</LinkTo>
which would render as
<a href="/home" aria-current="page" class="active">Home</a>
This would be my first RFC for Ember, so any feedback would be appreciated.