breadcrumb-aria-current

Description

You need to use the aria-current="page" attribute on the link that represents the current page within a breadcrumb navigation.

This attribute explicitly identifies the current location to users of assistive technology, such as screen readers. For sighted users, visual styling typically indicates the current page. aria-current="page" provides the same information programmatically.

The proper use of this attribute prevents screen readers from announcing the final item as a standard link, which might encourage a user to unnecessarily click and reload the current page.

The breadcrumb-aria-current rule aligns with WCAG Success Criterion 1.3.1 (Info and Relationships). This criterion requires that you make all information, structure, and relationships programmatically determinable.

Examples

In the following incorrect example, the link to the current page, “Product Detail,” is missing the required aria-current attribute. Screen reader users may not know they are already on this page.

In the following corrected example, the final link includes aria-current=”page”. This ensures assistive technology properly announces that the link leads to the user’s current location.

How to fix?

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

• Locate the breadcrumb navigation component on your webpage.

• Identify the link element that represents the current page.

• Add the attribute aria-current with the value “page” to this link.

• Verify that only the link for the current page uses the aria-current attribute within the breadcrumb trail.

Reference

WCAG Success Criterion 1.3.1: Info and Relationships