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.

Improving Breadcrumb accessibility

See original GitHub issue

Please see the APG pattern for Breadcrumb and consider revising the Carbon Breadcrumb in the following ways (that are shown in the APG example):

use a list (ordered list is the most semantically correct, because the order of the links matters) to contain the links (use css to hide the bullets and make the list horizontal). The advantage of this is that a screen reader can tell the user how many links are in the breadcrumb (i.e. it counts the items in the list. It would not count the children of a div because there is no semantic reason to do so).
add aria-current="page" to the final link in the breadcrumb, so that screen readers can tell the user that this is the breadcrumb’s current page.

Issue Analytics

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

Top GitHub Comments

2reactions

snidersdcommented, Jan 24, 2019

@dakahn Also be sure the breadcrumb is in a navigation landmark region. The latest version in the Carbon sandbox is in main and it should be nav and have an aria-label=“breadcrumb”.

0reactions

dakahncommented, May 1, 2019

v10 breadcrumb is still a valid candidate for a refactor into an ordered list. keeping this open

Top Results From Across the Web

How Can I Make Breadcrumbs Accessible for People with ...

Generally speaking, breadcrumbs improve the on-page experience for all users. WAI-ARIA markup helps to ensure that your site is accessible ...

Accessible Breadcrumbs - example and best practices - Aditus

Learn how to create accessible breadcrumbs with practical examples and code ... This page shows how you can make breadcrumbs accessible to all...

Breadcrumb Example | APG | WAI - W3C

Accessibility Features. The set of links is structured using an ordered list . A nav element labeled Breadcrumb identifies the structure as a...

Accessibility - Breadcrumb - Carbon Design System

No accessibility annotations are needed for breadcrumbs, but keep these considerations in mind if you are modifying Carbon or creating a custom component....

Breadcrumbs | Yale UI Component Library - GitLab

Breadcrumb navigation can greatly enhance the users ability to navigate and find their place within a website or web application. To prevent screen...