breadcrumb-label

Description

You need to provide a clear, recognizable accessible name for the breadcrumb navigation. This name helps users of assistive technology identify the component’s role and purpose quickly. Without a proper label, screen reader users may struggle to understand that the component is a breadcrumb trail.

The breadcrumb-label rule aligns with WCAG Success Criterion 4.1.2 (Name, Role, Value) and WCAG Success Criterion 1.1.1 (Non-text Content). These criteria ensure that all user interface components have descriptive accessible names and that the document structure is programmatically determinable.

Examples

In the following incorrect example, the <nav> element is used for the breadcrumb but does not have an aria-label. The breadcrumb is not explicitly identified for assistive technologies.

In the following corrected example, the aria-label=”Breadcrumb” attribute provides a descriptive name, ensuring assistive technology users can clearly identify the component as a breadcrumb navigation.

How to fix?

To fix violations of the breadcrumb-label rule, follow these steps:

• Locate the main container element for the breadcrumb navigation. This is typically the HTML <nav> element.

• Apply an accessible name to this container using the aria-label attribute.

• Set the aria-label value to clearly and concisely identify the component’s purpose, such as “breadcrumb”.

Reference

• WCAG Success Criterion 4.1.2: Name, Role, Value

• WCAG Success Criterion 1.1.1: Non-text Content