Improve a11y of breadcrumbs

[chris-gds]

What

Adding <nav> element labeled Breadcrumb identifies the structure as a breadcrumb trail and makes it a navigation landmark so that it is easy to locate.

aria-current applied to the last link in the set to indicate that it represents the current page.

Why

Improving a11y of breadcrumbs, best practice, related to 1.3.1

Breadcrumbs are not labelled in any way, making it harder for screen reader users and users who change styles to understand what they are and harder for screen reader users to navigate to them

Visual Changes

No visual changes

Anything else?

https://www.w3.org/TR/wai-aria-practices-1.1/examples/breadcrumb/index.html

Draft PR:

• [ ] CHANGELOG
• [ ] JAWS
• [ ] VoiceOver
• [ ] NVDA
• [ ] Dragon?

[edwardhorsford]

This came up recently on the cross gov slack - link here whilst it lasts.

In short, the markup in the design system is intentional - I believe to keep noise of extra landmarks down.

Some of the links in the thread: https://github.com/alphagov/govuk-design-system-backlog/issues/33#issuecomment-480219573 https://github.com/alphagov/govuk_elements/pull/182 https://github.com/alphagov/static/pull/238 https://insidegovuk.blog.gov.uk/2013/07/03/rethinking-navigation/

[chris-gds]

@edwardhorsford interesting - thank you for all these extra resources & insight (Draft PR's coming in useful) - I'll review.

@alex-ju the suggestion was to action the reverse approach, I'll query again to confirm as I understand this viewpoint

[chris-gds]

Currently asking opinions from others.

Option 1 - Update the pattern on the GOV.UK (within the gem) however this then diverges from the Design System. Which isn’t ideal (and has been noted).

Option 2 - is contribute to the Design System to allow this to cascade into GOV.UK. Professional opinion can be evidenced however our team does not have access to users to perform user testing so this most likely won’t be accepted as we are unable properly validate work with user research.

Option 3 - Not action, this type of work isn’t a good use of our team at present.

Updated:

• (Language updated) + A good video around contribution is noted here: https://www.youtube.com/watch?v=IIt0fwJkhE8

[chris-gds]

Updating with some learnings:

I believe Gov are redefining best practice for this particular use of this element based on previous research and testings.

• <nav> - there is history and compelling evidence not to use this

~~aria-label="Breadcrumb" this has been removed intentionally as it's not a valid label.~~ role="breadcrumbs" has been removed intentionally as it's not a valid role

Suggested aria-labelledby could be a good solution in this context.

• The aria-current enhancement seems to be a welcomed improvement.

Contributing directly is under general discussion to understand if this pathway is possible.

[36degrees]

<nav> - there is history and compelling evidence not to use this

Worth noting that research is from 2013 – it was definitely a conscious choice not to mark the breadcrumbs up as a navigation landmark at the time, but we shouldn't assume that it still holds true today. However, we should probably avoid changing it unless we know from research (either our own, or someone else's) that it's helpful to users.

aria-label="Breadcrumb" this has been removed intentionally as it's not a valid label.

These are two different things – the breadcrumb role was removed, because it's not a valid role. That's not the same thing as "breadcrumb" being the label for the landmark. If the breadcrumbs are marked up as a navigation landmark, that landmark absolutely should have a label. If they are not, they do not need one.

Worth noting that adding an aria-label does introduce a little extra complexity in that "Breadcrumbs" will need to be localised into different languages (and, as aria-label is not visible on the screen, that's something that could be easily missed).

[chris-gds]

👋🏼 @36degrees

Worth noting that research is from 2013 – it was definitely a conscious choice not to mark the breadcrumbs up as a navigation landmark at the time, but we shouldn't assume that it still holds true today. However, we should probably avoid changing it unless we know from research (either our own, or someone else's) that it's helpful to users.

Agreed, it's the most recent understanding so while we shouldn't update we should still validate.

These are two different things – the breadcrumb role was removed, because it's not a valid role. That's not the same thing as "breadcrumb" being the label for the landmark.

You're right, I've blurred these two thinking they're referring to the same thing 🙈 (I'll revise my earlier comment).

If the breadcrumbs are marked up as a navigation landmark, that landmark absolutely should have a label. If they are not, they do not need one.

Are you saying that you don't think any label is needed this context? aria-labelledby or otherwise (keep as is)? (Noticed some other comments here)

Worth noting that adding an aria-label does introduce a little extra complexity in that "Breadcrumbs" will need to be localised into different languages (and, as aria-label is not visible on the screen, that's something that could be easily missed).

🤔 The localisation aspect definitely widens the scope of this and is worth highlighting. I'm aware there is not a consistent localisation pattern on GOV.UK (but localisation solutions do exists) however I'm unclear if this has been resolved consistently within the Design System.

[abbott567]

Wondering if anyone has had issues with the use of a 'Home' link in the breadcrumbs. We've found that Dragon is ignoring it and is instead using the home button on the browser which navigates back to the default home-page of the browser rather than the home page for the digital service.

My expectations would be that Dragon would number-tag both options and gives you the choice. But it just seems to prioritise the browser home button over anything in the DOM. We've found this is consistent with other websites which use a 'Home' link as it's typically common practice on blogs such as Wordpress.

In testing, we've found the only way to fix this with any level of certainty is to not label the link 'Home' and either just remove it or use alternative wording such as 'Start again'. Which doesn't seem ideal given the entire concept of a home-page is already well established on the internet.

Pretty sure it's a bug with Dragon, but just wanted to make people aware of it and see if anybody has any solutions for it as the breadcrumbs component does have a Home link in the example.

Thanks

[selfthinker]

One other solution to consider is adding a (hidden) heading before the breadcrumbs, so that screen reader users who navigate by heading can easily find it and understand what it is.

It is currently only visually clear that they are breadcrumbs, I would argue those visuals are missing from the markup as it's "just" a list of links. The visuals that identify them as breadcrumbs are the chevrons and the positioning. Just imagine we'd use standard ordered list styling there instead of breadcrumb styling and you'd see how it's instantly less recognisable.

I think we should do something to programmatically at least give a hint as to what this list of links is. There are multiple ways to do this, putting it in a nav is just one of them, adding a hidden heading is another, but there will be more.

A heading or other form of label doesn't need to be hidden. Just starting the breadcrumbs with the visible words "You are here:" (or similar) would make it easier to understand for other groups of people as well.

[jon-kirwan]

One other solution to consider is adding a (hidden) heading before the breadcrumbs, so that screen reader users who navigate by heading can easily find it and understand what it is.

It is currently only visually clear that they are breadcrumbs, I would argue those visuals are missing from the markup as it's "just" a list of links. The visuals that identify them as breadcrumbs are the chevrons and the positioning. Just imagine we'd use standard ordered list styling there instead of breadcrumb styling and you'd see how it's instantly less recognisable.

I think we should do something to programmatically at least give a hint as to what this list of links is. There are multiple ways to do this, putting it in a nav is just one of them, adding a hidden heading is another, but there will be more.

A heading or other form of label doesn't need to be hidden. Just starting the breadcrumbs with the visible words "You are here:" (or similar) would make it easier to understand for other groups of people as well.

Thanks for adding the suggestions @selfthinker. I'm now closing the pull request but have opened a new one here and have included references to your comments in the description