Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Accessibility - breadcrumb <a> tags cannot be navigated with keyboard

See original GitHub issue

🐞 Bug report

Description

Breadcrumbs use a (click) handler for navigation, and do not have a [href] attribute. Pressing tab key to navigate will skip these links. They should either have a href attribute, or then add a tabindex=0 (or customizable).

Edit: Also, if you add tabindex programatically to the <a> tags, you cannot activate the link with a keyboard, as it only has a (click) handler, no keyboard handlers.

🔬 Minimal Reproduction

Any regular use

💻Your Environment

Angular Version:

Angular: 9.1.12
Node: 15.0.1
OS: darwin x64

xng-breadcrumb version 6.3.4

Issue Analytics

State:
Created 3 years ago
Reactions:1
Comments:5 (3 by maintainers)

Top GitHub Comments

1reaction

udayvunnamcommented, Dec 9, 2020

@pinkkis @dedrazer This issue is fixed and released with version 6.5.0 🎉. Thanks for raising the issue.

0reactions

pinkkiscommented, Dec 9, 2020

Thanks a lot!

Top Results From Across the Web

Accessible Breadcrumbs - example and best practices - Aditus

Breadcrumbs is an UX pattern that show where the current page is located in the overall website's hierarchy. It is a type of...

Creating Accessible Navigation - Assistive Technology Initiative

Skip navigation, or skip nav, links provide individuals who can only operate a keyboard and/or those who use screen readers with the ability...

Problem with keyboard navigation - Accessibility - SitePoint

I created a tab menu bar using div and css. For a menu like this, it's best to use an unordered list (<ul>)...

How to Meet WCAG (Quick Reference) - W3C

A customizable quick reference to Web Content Accessibility Guidelines (WCAG) 2 requirements ... 3.2.1 On Focus; 3.2.2 On Input; 3.2.3 Consistent Navigation ......

Keyboard Accessibility Tips Using HTML and CSS

Here are some keyboard accessibility tips you can quickly implement using basic HTML and CSS.