This is an angular 2 component that creates a breadcrumb trail. It hooks into the angular2/router, to dynamically build up the crumb trail once a component is routed to.
MIT License
102
stars
81
forks
source link
Accessibility: Links should be links (and be focusable) #102
The role="button" here isn't enough to make these accessible in the absence of href attributes; that just changes the role of the link to a button in a screen reader (and doesn't impact focusability). Is there a reason why you can't use href="/" / href={url} and actual client-side routing instead of (click)? That way you could leverage the anchor tag's default capabilities, including focusability.
In any case, without href you at least need tabindex="0" to make these items focusable to keyboard and screen reader users. I'd also recommend removing the role="button" since these are navigating the user someplace.
This HTML is problematic for keyboard and screen reader users:
The
role="button"
here isn't enough to make these accessible in the absence ofhref
attributes; that just changes the role of the link to a button in a screen reader (and doesn't impact focusability). Is there a reason why you can't usehref="/"
/href={url}
and actual client-side routing instead of(click)
? That way you could leverage the anchor tag's default capabilities, including focusability.In any case, without
href
you at least needtabindex="0"
to make these items focusable to keyboard and screen reader users. I'd also recommend removing therole="button"
since these are navigating the user someplace.For more information on links vs. buttons, I wrote a blog post: https://marcysutton.com/links-vs-buttons-in-modern-web-applications/