Possible breadcrumb navigation element is formatted incorrectly
| Field | Value |
|---|---|
| Rule code | Navigation_Breadcrumb_Format_Detect |
| WCAG conformance level | AAA |
| WCAG success criterion | 2.4.8 Location |
| Must be fixed at source | No |
Description
An indication of the users current location within the site was found to be missing from the page. A users current location should be indicated in order to let them know where they are in a set of pages. This indication should be in navigation regions such as breadcrumbs, site maps, or navigation regions that are consistent throughout the site
How to fix
Breadcrumb navigation regions should utilize either a <nav> element or a [role="navigation"] attribute. The navigation container should be labelled using an [aria-label] attribute with a value of "Breadcrumb". Between each item in the list of breadcrumbs, it can be helpful to users to separate the items trailing with a visible separator. Examples of separators include ">", "|", "/", and "→". Ensure that the current location in the breadcrumb trail is announced by assigning an [aria-current="page"] attribute. This attribute can be assigned to link elements or text elements like <span> or <p>. Ensure that all links navigate to the correct web page as specified by the breadcrumb trail.