breadcrumbs/accessibility

8 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Breadcrumbs current page styling and aria-current attribute

The last item in the breadcrumb trail refers to the current page. To convey this visually, the link is styled differently from the preceding links. For screen reader users, this information is conveyed programmatically through the use of the aria-current attribute in the rendered output.

Breadcrumb link text requirements

The text of each breadcrumb link should match the heading element (h1–h6) or the unique part of the title element that it is linked to. If the breadcrumb link text is not unique, it should be made unique by adding additional context. If the breadcrumb link text is overly verbose, it can be made more concise as long as it still provides sufficient information to the user.

Breadcrumbs rendered as navigation landmark

The breadcrumbs component is rendered as a nav navigation landmark region with an accessible name of "Breadcrumbs" using aria-label="Breadcrumbs". This makes the breadcrumb navigation easily discoverable for screen reader users who navigate via page landmarks.

Breadcrumbs list structure

The individual breadcrumb items are rendered as an ol ordered list, with each item marked up as a link in a separate li list item.

React Breadcrumbs selected prop for aria-current

In the React implementation, you need to explicitly mark the last item as selected, which results in aria-current="page" being added to the link. The selected prop is applied to the last Breadcrumbs.Item component.

Rails Breadcrumbs automatic aria-current

In the Rails implementation, the link in the last item is automatically given aria-current="page", so explicit marking is not required.

Breadcrumbs integration testing requirements

Each breadcrumb link must have appropriate and descriptive link text. For the React implementation, the last breadcrumb item must be explicitly marked as selected to visually and programmatically identify it as a link referring to the current page.

Breadcrumbs component testing requirements

The breadcrumb component must be exposed as a navigation landmark with an appropriate name/label. Breadcrumb items must have appropriate structure as an ol ordered list. For Rails implementation, the last item link must be programmatically identified using aria-current="page". For React implementation, if a breadcrumb item is marked as selected, the last item link must be programmatically identified using aria-current="page".

Give your agent this brain