Breadcrumb component accessibility

[jon-kirwan]

Related component

Breadcrumbs

Context

We have a stale pull request - improve a11y of breadcrumbs in the GOV.UK Publishing Components repo aimed at enhancing breadcrumb accessibility by adding a nav landmark. We recently discussed whether to close the PR or continue the work.

The comments on the pull request go into both the advantages and disadvantages of implementing the suggested change, as well as the historical context of the component and the rationale behind not using a landmark. Ultimately, no changes were made, probably due to the lack of evidence and / absence of user research on the benefits of the proposed change.

From recently reviewing the issue again, a couple of ideas were mentioned that could improve component accessibility. For example, including a hidden heading, adding a nav landmark or incorporating visible text such as "you are here:" to make it easier to understand. (See comments from @selfthinker).

Alternatives

None.

Additional information (if applicable)

None.

[querkmachine]

Yesterday we merged some changes to the breadcrumb component (#4995), which included making it a nav element and adding an aria-label attribute to it, making it a named landmark.

This was prioritised due to our ongoing navigation work, where it was identified that when a navigation component and a breadcrumb component appeared next to each other, there was insufficient affordances for screen reader users to tell the two apart.

It's not the most perfect solution. For example, we didn't add a heading, so the two elements still appear visually identical in text-only browsers or if CSS fails to load. Hopefully this is still an improvement, though!