search

gmostert / ng2-breadcrumb

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

Open marcysutton opened 6 years ago

marcysutton commented 6 years ago

This HTML is problematic for keyboard and screen reader users:

<a role="button" *ngIf="!last && url == prefix" (click)="navigateTo('/')">{{url}}</a>
<a role="button" *ngIf="!last && url != prefix" (click)="navigateTo(url)">{{friendlyName(url)}}</a>

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.

For more information on links vs. buttons, I wrote a blog post: https://marcysutton.com/links-vs-buttons-in-modern-web-applications/

cmegown commented 6 years ago

This should be a pretty quick fix to implement. Additional information can be found here: https://www.w3.org/TR/wai-aria-practices/#breadcrumb