Breadcrumbs

[govuk-design-system]

Use this issue to discuss this component in the GOV.UK Design System.

[joelanman]

Discussion on the US Web Design System

[hannalaakso]

We had a question from a designer about the best way to truncate long text in breadcrumbs.

[edwardhorsford]

I'd like to propose harmonising the designs for breadcrumbs and back links. At the moment they're similar, but have different underline styling. I'd like it if we could have the same underline styling for both.

The text position stays the same, but the lower underline makes the element perceptually larger and appear to move when you go between pages.

My service uses both breadcrumbs and back links depending on whether you're in the portally type bit, or in a flow with back links. When moving between pages, it feels odd that the underline changes for something that's otherwise a conceptually similar action.

Video moving between the two:

My preference would probably be an underline somewhere between the two - not as much space as the back link, but more than the regular underline. I presume it was shifted down in the back link to allow some space below the arrow.

Quick hack with both having same space as back link:

[samuelhwilliams]

We're doing a little bit an accessibility review on our site at the moment and in doing so I had a look at our site breadcrumbs, which currently use the GOV.UK Design System pattern. When testing with voiceover, I noticed that there was no indication, on entering the breadcrumb trail, that you'd entered a breadcrumb/nav section.

On reading https://www.w3.org/TR/wai-aria-practices/examples/breadcrumb/index.html, they seem to recommend to use of a <nav> element with aria-label="breadcrumb". Is there a reason that GOV.UK Design System just recommends a plain div over the more descriptive alternative?

Happy to put up a PR if this feels like a thing that was missed rather than being the outcome of a specific decision.

[dashouse]

@samuelhwilliams From memory we used <div> in this case as the default to limit confusion screen reader users may face with multiple navigational roles on the page. In this instance the breadcrumbs' role is secondary.

I believe the consensus was - If the breadcrumb is the only form of navigation on the page then it should be marked up using <nav> in place of a <div>, however this can only be done using the HTML, the Nunjucks macro doesn't have the option to switch.

I cannot find this rationale recorded anywhere so it might be worth double checking with the accessibility team too.

[36degrees]

There's some more historical context here: alphagov/govuk_elements#412

I'd be happy to revisit this, but we'd want to test any change pretty thoroughly and it's not a priority right now.

The Design System / GOV.UK Frontend will be audited in the next couple of months, so we'll see if anything gets flagged as part of that.

[lfdebrux]

We had a question from a designer about the best way to truncate long text in breadcrumbs.

Was there ever an answer to this question? Should we be truncating long text in breadcrumbs?

[NeilWix]

We're doing a little bit an accessibility review on our site at the moment and in doing so I had a look at our site breadcrumbs, which currently use the GOV.UK Design System pattern. When testing with voiceover, I noticed that there was no indication, on entering the breadcrumb trail, that you'd entered a breadcrumb/nav section.

On reading https://www.w3.org/TR/wai-aria-practices/examples/breadcrumb/index.html, they seem to recommend to use of a <nav> element with aria-label="breadcrumb". Is there a reason that GOV.UK Design System just recommends a plain div over the more descriptive alternative?

Happy to put up a PR if this feels like a thing that was missed rather than being the outcome of a specific decision.

Consider adding aria-current="page" to the last list item in the W3C example. BTW, I think that the combination of role and name combination makes it reasonable to implement multiple navigations on the same page (site, navigation; breadcrumbs, navigation; etc).

[NickColley]

In terms of why we don't put breadcrumbs in a navigation landmark I've documented that decision here:

alphagov/govuk-frontend#1604 (comment)

Consider adding aria-current="page" to the last list item in the W3C example.

We do add this attribute to the last item at the moment, thanks for the reminder though.

[JeffersonBledsoe]

As mentioned in a previous comment, the WAI-AIRA Authoring Practises breadcrumb example applies an aria-label of Breadcrumb so that users know when they have entered or existed the breadcrumb. Without any landmark being applied to the breadcrumb or any label, screen reader users don't seem to be informed that what they are focusing is a breadcrumb are are left with a standard list. I haven't been able to find any research or documentation around why there was a decision to not label the breadcrumb, so I was just wondering whether it was a purposeful decision, and if so, why?

[olivia-todd]

Are there any research findings/design documentation around why the breadcrumb uses the govuk-text-colour rather than the govuk-link-colour or link typography style? We included the component in some recent testing where a participant explained that they didn't click on the breadcrumb because it wasn't a different colour to the other text on the screen and therefore didn't appear clickable which I thought was interesting!

[anevins12]

@JeffersonBledsoe Is that issue due to the list having no list style? It's a feature not a bug: https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html

This was a purposeful change due to rampant “list”-itis by web developers. … Basically, if you remove all default visible indication of the list, there is no indication to a sighted user or screen reader user that the content is a list. If you want to override this heuristic for accessibility, you can always add an explicit ARIA role=”list”.

[jrmedd]

During a recent accessibility audit of our service, our auditor told us that the govuk-breadcrumbs--collapse-on-mobile on class was inaccessible, as it hides the full breadcrumb trail for users that magnify up to 400%.

[Terry-Price]

I'd like to propose a design change that makes the GDS breadcrumbs component more accessible and increases usability.

The last breadcrumb (on the right) usually always represents the page the user is currently on.

Therefore, this breadcrumb should never appear as a link – as this will confuse users that rely on assistive technology. Currently, the link will reload the page the user is on, which will add no value or purpose to the user experience.

Can this last link be styled to static text without any interactive aspect or underline styling?

This is the adapted design from the GDS breadcrumb component for The National Archives 'Find Caselaw service'. We have found this avoids user confusion and increases accessibility value.

[querkmachine]

@Terry-Price Our Breadcrumbs component guidance already states that the current page should not be included within the breadcrumb trail (emphasis mine):

Always place breadcrumbs at the top of a page, before the <main> element. Placing them here means that the ‘Skip to main content’ link allows the user to skip all navigation links, including breadcrumbs.

The breadcrumb should start with your ‘home’ page and end with the parent section of the current page.

It is also already possible for a breadcrumb item to be displayed as plain text by not setting the href property on it, though we don't emphasise this functionality in our documentation due to the above guidance.

For example, the below Nunjucks code produces this result with the last item as plain text, also marked up with aria-current="page":

{{ govukBreadcrumbs({
  items: [
    {
      text: "Home",
      href: "/"
    },
    {
      text: "Passports, travel and living abroad",
      href: "/browse/abroad"
    },
    {
      text: "Travel abroad"
    }
  ]
}) }}

Would our documentation benefit from better emphasising some of these?

[Terry-Price]

Thank you, yes I do think the emphasis should be increased if possible and also the on-page example could show the last breadcrumb without a link. That would really explain it very well to everyone.

Be interested to know how many FE's use Nunjucks? We don't use it at TNA.

[mrkwrght]

we recently tested with a user with visual impairments and used software to zoom into the content more clearly. this user commented that they found it difficult to see the breadcrumbs when not zoomed in at a very high level and found it difficult to find the breadcrumb above the h1

has anyone else experienced this?

[Marat-Faizov]

Hello, when the screen is under 640px wide breadcrumbs link size and the space between the link are reduced below what is acceptable for WCAG2.2 criteria Target Size (minimum) 2.5.8.
It appears to be that the text is 17px high with a 5px margin at the bottom. 17px + 5px = 22px, which 2px short of the minimum requirement.
When links stuck in column layout they do not have sufficient spacing between them.
It would be good to get a review and confirmation if this is an issue or not as we are starting to audit against WCAG 2.2 and will have to report if it is.

Thanks.
P.S. see similar issue on footer link

[Binney]

Hi all, not sure if this is the right place for this question but here goes:

The guidance says

Do not use the breadcrumbs component [...] to show progress through a linear journey or transaction.

Is there a component that does do this for a linear journey or transaction? Or assuming not, is there any research around why this isn't a desirable pattern?

(Context - we build a service that is public but not directly under GOV.UK, and we're trying to decide between a "Back" button and a "journey progress bar".)

[joelanman]

@Binney hi, there is some info on why we don't tend to use them here:

https://design-system.service.gov.uk/patterns/question-pages/#using-progress-indicators

so I would start with Back link and see if there's a user need to try anything more complex

[adriantoll]

Apologies if this has been covered elsewhere, but I couldn't find a published rationale after various searches.

In 2017 GDS included the current page as a non-clickable item at the end of the breadcrumbs: https://designnotes.blog.gov.uk/2017/06/29/designing-new-navigation-elements-for-gov-uk/

The current component explicitly doesn't include it: https://design-system.service.gov.uk/components/breadcrumbs/#how-it-works

I can't find a rationale for the change, and would be interested to know why it happened, particularly as both W3C and Google example markup include the current page:

https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/examples/breadcrumb/
https://developers.google.com/search/docs/appearance/structured-data/breadcrumb#html (see the HTML tab under "Single breadcrumb trail").

[markjefferson-gov]

I'm also interested in knowing why the component does not show the current page. A recent accessibility audit recommended to us that it should be shown:

Observation
Throughout the site, breadcrumbs are used to let users know where they are on the website. This can be helpful for sighted users to understand their current position and the navigation structure of the site, however, the list of links does not inform users of the page that they are currently on.
Recommendation
Add the current page to the breadcrumbs navigation so that users are reminded which page they are on.

[querkmachine]

@adriantoll @markjefferson-gov My finger-in-the-air reckon is that it's redundant with the GOV.UK page template.

The breadcrumbs typically appear directly before the page's H1 in source order, the breadcrumb item and H1 would be expected to have the same text, and they both serve the same purpose of telling the user what page they're currently on.

[adriantoll]

@querkmachine That's my guess too, and the reason we've done it that way with our sites, but given that W3C, Google, 2017-era GDS and many accessibility audits all agree that the current page should be included I'd be interested in knowing for sure. I'm used to GDS explaning those kinds of decisions in public somewhere!

[markjefferson-gov]

@adriantoll @markjefferson-gov My finger-in-the-air reckon is that it's redundant with the GOV.UK page template.

The breadcrumbs typically appear directly before the page's H1 in source order, the breadcrumb item and H1 would be expected to have the same text, and they both serve the same purpose of telling the user what page they're currently on.

That makes sense. By that logic though, wouldn't the 'home' link also be redundant? We have an external audit coming up so I'll ask them specifically about this.

[adriantoll]

For what it's worth, we've changed our approach to this so we now include the current page in the breadcrumb. The rationale for this was that on narrower devices (< 768px) our breadcrumb now stays fixed on the page. This made it too easy for people to think they were on the parent page after having scrolled down a bit because then the page title isn't visible below the breadcrumb. We also include it on desktop for consistency. Having thought a lot about this now, it really does feel like there isn't a right answer one way or the other, and depends very much on the context. If the breadcrumbs weren't fixed I don't think we'd have done this. You can see an example site here: https://demo.sites.thirdpress.com/our-programmes/quisque-nec-vehicula/