Update Breadcrumb component to improve screen reader accessibility #4995

querkmachine · 2024-05-20T13:52:54Z

An accessibility issue raised during development of #4950 was that, when a Breadcrumbs component is placed following a Header or Service Header that contains navigation elements, they are both announced (by screen readers) or displayed (in no CSS/reader modes) as a bulleted lists of links, with little affordance to users that they are two distinct navigational elements.

This PR aims to resolve the screen reader issue by adding an aria-label of "Breadcrumb". It does not solve the display issue. Doing so would require the inclusion of some visible or visually-hidden text, judging by @selfthinker's comment on the GOV.UK Publishing Components version: alphagov/govuk_publishing_components#2045 (comment), though we could choose to modify this PR to do that as well.

As aria-label is only supported in practice by interactive elements and landmarks, the breadcrumb component wrapper has been changed to a nav to make it a landmark element. Doing so also resolves a common accessibility audit complaint that this component does not exist within a landmark (e.g. #1604). This is not strictly required to meet WCAG, but may be considered good practice.

Background

The breadcrumb navigation was previously contained within a nav element, but this was removed in 2013 in an effort to reduce the number of navigation landmarks that appear on the page, as documented in this blog post by @tombye.

However, I think that the Breadcrumbs do not meet the criteria for removing nav as given in the post—the individual links do not provide sufficient labelling on their own and the components' role as a navigational aid can only be inferred through visual context which is not available to users who are blind or with low vision, nor assistive technologies they may use, and for which no fallback is provided.

Compare Breadcrumbs with other nav elements it's common to find on GOV.UK:

Primary navigation has an accessible label and can have context inferred by being within the header (banner) landmark and near the top of the page.
Links in the page footer have visible headings and can have context inferred by being within the footer (contentinfo) landmark.
Most other nav elements that appear on GOV.UK have visible headings (e.g. related content lists), accessible labels (e.g. pagination), or can have some context inferred from their parents (e.g. table of contents has a complementary role and is one of the first things inside of the main landmark). Most provide multiple of these affordances.
Skip links and back links don't typically exist in groups and can have their contexts largely by their labelling.

Breadcrumbs currently have none of these: they lack the nav element, they lack headings (visible or not), lack accessible labelling, their context cannot be inferred from a parent landmark because they don't have one, and it cannot be inferred from the links themselves as (apart from 'Home') they are disembodied section names.

With these changes, our component is much more in line with the example in the WAI ARIA Authoring Guide and the W3C's design system component (which is heavily inspired by ours, their deviation implying they felt we were in the wrong here). The same approach is also used by our friends at ONS, Scottish Government Design System and USWDS, really putting us in the minority with our current approach.

Changes

Changes the wrapping element of the Breadcrumbs component from a div to a nav.
Adds a required aria-label to the Breadcrumb component wrapper.
Adds a new Nunjucks parameter to set the aria-label named labelText. This defaults to "Breadcrumb".
Adds Nunjucks parameter documentation for labelText.
Adds tests to ensure the element is a nav, renders the default aria-label, and that the Nunjucks parameter can override the aria-label.
Updates one existing example and test that set role="navigation", as this was being flagged by the HTML linter as redundant role usage.

github-actions · 2024-05-20T13:54:45Z

📋 Stats

File sizes

File	Size
dist/govuk-frontend-development.min.css	113.43 KiB
dist/govuk-frontend-development.min.js	41.88 KiB
packages/govuk-frontend/dist/govuk/all.bundle.js	87.42 KiB
packages/govuk-frontend/dist/govuk/all.bundle.mjs	82.11 KiB
packages/govuk-frontend/dist/govuk/all.mjs	981 B
packages/govuk-frontend/dist/govuk/govuk-frontend-component.mjs	359 B
packages/govuk-frontend/dist/govuk/govuk-frontend.min.css	113.42 KiB
packages/govuk-frontend/dist/govuk/govuk-frontend.min.js	41.87 KiB
packages/govuk-frontend/dist/govuk/i18n.mjs	5.55 KiB
packages/govuk-frontend/dist/govuk/init.mjs	4.86 KiB

Modules

File	Size (bundled)	Size (minified)
all.mjs	79.24 KiB	39.84 KiB
accordion.mjs	23.5 KiB	12.39 KiB
button.mjs	5.98 KiB	2.69 KiB
character-count.mjs	22.4 KiB	9.92 KiB
checkboxes.mjs	5.83 KiB	2.83 KiB
error-summary.mjs	7.89 KiB	3.46 KiB
exit-this-page.mjs	17.1 KiB	9.26 KiB
header.mjs	4.46 KiB	2.6 KiB
notification-banner.mjs	6.26 KiB	2.62 KiB
password-input.mjs	15.15 KiB	7.25 KiB
radios.mjs	4.83 KiB	2.38 KiB
skip-link.mjs	4.39 KiB	2.18 KiB
tabs.mjs	10.13 KiB	6.11 KiB

View stats and visualisations on the review app

Action run for ca7f22d

github-actions · 2024-05-20T13:55:06Z

Rendered HTML changes to npm package

diff --git a/packages/govuk-frontend/dist/govuk/components/breadcrumbs/template-default.html b/packages/govuk-frontend/dist/govuk/components/breadcrumbs/template-default.html
index 29c84d640..cbb9f21eb 100644
--- a/packages/govuk-frontend/dist/govuk/components/breadcrumbs/template-default.html
+++ b/packages/govuk-frontend/dist/govuk/components/breadcrumbs/template-default.html
@@ -1,4 +1,4 @@
-<div class="govuk-breadcrumbs">
+<nav class="govuk-breadcrumbs" aria-label="Breadcrumb">
   <ol class="govuk-breadcrumbs__list">
     <li class="govuk-breadcrumbs__list-item">
       <a class="govuk-breadcrumbs__link" href="/section">Section</a>
@@ -7,4 +7,4 @@
       <a class="govuk-breadcrumbs__link" href="/section/sub-section">Sub-section</a>
     </li>
   </ol>
-</div>
+</nav>
diff --git a/packages/govuk-frontend/dist/govuk/components/breadcrumbs/template-inverse.html b/packages/govuk-frontend/dist/govuk/components/breadcrumbs/template-inverse.html
index e52d746fc..d1879ec83 100644
--- a/packages/govuk-frontend/dist/govuk/components/breadcrumbs/template-inverse.html
+++ b/packages/govuk-frontend/dist/govuk/components/breadcrumbs/template-inverse.html
@@ -1,4 +1,4 @@
-<div class="govuk-breadcrumbs govuk-breadcrumbs--inverse">
+<nav class="govuk-breadcrumbs govuk-breadcrumbs--inverse" aria-label="Breadcrumb">
   <ol class="govuk-breadcrumbs__list">
     <li class="govuk-breadcrumbs__list-item">
       <a class="govuk-breadcrumbs__link" href="/">Home</a>
@@ -8,4 +8,4 @@
     </li>
     <li class="govuk-breadcrumbs__list-item" aria-current="page">Travel abroad</li>
   </ol>
-</div>
+</nav>
diff --git a/packages/govuk-frontend/dist/govuk/components/breadcrumbs/template-with-collapse-on-mobile.html b/packages/govuk-frontend/dist/govuk/components/breadcrumbs/template-with-collapse-on-mobile.html
index 448a220dd..1b4af87b9 100644
--- a/packages/govuk-frontend/dist/govuk/components/breadcrumbs/template-with-collapse-on-mobile.html
+++ b/packages/govuk-frontend/dist/govuk/components/breadcrumbs/template-with-collapse-on-mobile.html
@@ -1,4 +1,4 @@
-<div class="govuk-breadcrumbs govuk-breadcrumbs--collapse-on-mobile">
+<nav class="govuk-breadcrumbs govuk-breadcrumbs--collapse-on-mobile" aria-label="Breadcrumb">
   <ol class="govuk-breadcrumbs__list">
     <li class="govuk-breadcrumbs__list-item">
       <a class="govuk-breadcrumbs__link" href="/">Home</a>
@@ -10,4 +10,4 @@
       <a class="govuk-breadcrumbs__link" href="/education/special-educational-needs-and-disability-send-and-high-needs">Special educational needs and disability (SEND) and high needs</a>
     </li>
   </ol>
-</div>
+</nav>
diff --git a/packages/govuk-frontend/dist/govuk/components/breadcrumbs/template-with-last-breadcrumb-as-current-page.html b/packages/govuk-frontend/dist/govuk/components/breadcrumbs/template-with-last-breadcrumb-as-current-page.html
index 263824e47..af6bcc1ba 100644
--- a/packages/govuk-frontend/dist/govuk/components/breadcrumbs/template-with-last-breadcrumb-as-current-page.html
+++ b/packages/govuk-frontend/dist/govuk/components/breadcrumbs/template-with-last-breadcrumb-as-current-page.html
@@ -1,4 +1,4 @@
-<div class="govuk-breadcrumbs">
+<nav class="govuk-breadcrumbs" aria-label="Breadcrumb">
   <ol class="govuk-breadcrumbs__list">
     <li class="govuk-breadcrumbs__list-item">
       <a class="govuk-breadcrumbs__link" href="/">Home</a>
@@ -8,4 +8,4 @@
     </li>
     <li class="govuk-breadcrumbs__list-item" aria-current="page">Travel abroad</li>
   </ol>
-</div>
+</nav>
diff --git a/packages/govuk-frontend/dist/govuk/components/breadcrumbs/template-with-multiple-levels.html b/packages/govuk-frontend/dist/govuk/components/breadcrumbs/template-with-multiple-levels.html
index 9b87afae1..f9cf0ba36 100644
--- a/packages/govuk-frontend/dist/govuk/components/breadcrumbs/template-with-multiple-levels.html
+++ b/packages/govuk-frontend/dist/govuk/components/breadcrumbs/template-with-multiple-levels.html
@@ -1,4 +1,4 @@
-<div class="govuk-breadcrumbs">
+<nav class="govuk-breadcrumbs" aria-label="Breadcrumb">
   <ol class="govuk-breadcrumbs__list">
     <li class="govuk-breadcrumbs__list-item">
       <a class="govuk-breadcrumbs__link" href="/">Home</a>
@@ -13,4 +13,4 @@
       <a class="govuk-breadcrumbs__link" href="/section/sub-section/sub-sub-section">Sub Sub-section</a>
     </li>
   </ol>
-</div>
+</nav>
diff --git a/packages/govuk-frontend/dist/govuk/components/breadcrumbs/template-with-one-level.html b/packages/govuk-frontend/dist/govuk/components/breadcrumbs/template-with-one-level.html
index 8617ab748..50085fd4f 100644
--- a/packages/govuk-frontend/dist/govuk/components/breadcrumbs/template-with-one-level.html
+++ b/packages/govuk-frontend/dist/govuk/components/breadcrumbs/template-with-one-level.html
@@ -1,7 +1,7 @@
-<div class="govuk-breadcrumbs">
+<nav class="govuk-breadcrumbs" aria-label="Breadcrumb">
   <ol class="govuk-breadcrumbs__list">
     <li class="govuk-breadcrumbs__list-item">
       <a class="govuk-breadcrumbs__link" href="/section">Section</a>
     </li>
   </ol>
-</div>
+</nav>
diff --git a/packages/govuk-frontend/dist/govuk/components/breadcrumbs/template-without-the-home-section.html b/packages/govuk-frontend/dist/govuk/components/breadcrumbs/template-without-the-home-section.html
index b61e4eb65..39d3bc377 100644
--- a/packages/govuk-frontend/dist/govuk/components/breadcrumbs/template-without-the-home-section.html
+++ b/packages/govuk-frontend/dist/govuk/components/breadcrumbs/template-without-the-home-section.html
@@ -1,4 +1,4 @@
-<div class="govuk-breadcrumbs">
+<nav class="govuk-breadcrumbs" aria-label="Breadcrumb">
   <ol class="govuk-breadcrumbs__list">
     <li class="govuk-breadcrumbs__list-item">
       <a class="govuk-breadcrumbs__link" href="/service-manual">Service Manual</a>
@@ -7,4 +7,4 @@
       <a class="govuk-breadcrumbs__link" href="/service-manual/agile-delivery">Agile Delivery</a>
     </li>
   </ol>
-</div>
+</nav>

Action run for ca7f22d

github-actions · 2024-05-20T13:55:07Z

Other changes to npm package

diff --git a/packages/govuk-frontend/dist/govuk/components/breadcrumbs/fixtures.json b/packages/govuk-frontend/dist/govuk/components/breadcrumbs/fixtures.json
index 56f6393af..5da6f0a52 100644
--- a/packages/govuk-frontend/dist/govuk/components/breadcrumbs/fixtures.json
+++ b/packages/govuk-frontend/dist/govuk/components/breadcrumbs/fixtures.json
@@ -19,7 +19,7 @@
             "description": "",
             "previewLayoutModifiers": [],
             "screenshot": false,
-            "html": "<div class=\"govuk-breadcrumbs\">\n  <ol class=\"govuk-breadcrumbs__list\">\n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/section\">Section</a>\n    </li>\n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/section/sub-section\">Sub-section</a>\n    </li>\n  </ol>\n</div>"
+            "html": "<nav class=\"govuk-breadcrumbs\" aria-label=\"Breadcrumb\">\n  <ol class=\"govuk-breadcrumbs__list\">\n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/section\">Section</a>\n    </li>\n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/section/sub-section\">Sub-section</a>\n    </li>\n  </ol>\n</nav>"
         },
         {
             "name": "with one level",
@@ -35,7 +35,7 @@
             "description": "",
             "previewLayoutModifiers": [],
             "screenshot": false,
-            "html": "<div class=\"govuk-breadcrumbs\">\n  <ol class=\"govuk-breadcrumbs__list\">\n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/section\">Section</a>\n    </li>\n  </ol>\n</div>"
+            "html": "<nav class=\"govuk-breadcrumbs\" aria-label=\"Breadcrumb\">\n  <ol class=\"govuk-breadcrumbs__list\">\n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/section\">Section</a>\n    </li>\n  </ol>\n</nav>"
         },
         {
             "name": "with multiple levels",
@@ -63,7 +63,7 @@
             "description": "",
             "previewLayoutModifiers": [],
             "screenshot": false,
-            "html": "<div class=\"govuk-breadcrumbs\">\n  <ol class=\"govuk-breadcrumbs__list\">\n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/\">Home</a>\n    </li>\n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/section\">Section</a>\n    </li>\n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/section/sub-section\">Sub-section</a>\n    </li>\n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/section/sub-section/sub-sub-section\">Sub Sub-section</a>\n    </li>\n  </ol>\n</div>"
+            "html": "<nav class=\"govuk-breadcrumbs\" aria-label=\"Breadcrumb\">\n  <ol class=\"govuk-breadcrumbs__list\">\n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/\">Home</a>\n    </li>\n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/section\">Section</a>\n    </li>\n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/section/sub-section\">Sub-section</a>\n    </li>\n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/section/sub-section/sub-sub-section\">Sub Sub-section</a>\n    </li>\n  </ol>\n</nav>"
         },
         {
             "name": "without the home section",
@@ -83,7 +83,7 @@
             "description": "",
             "previewLayoutModifiers": [],
             "screenshot": false,
-            "html": "<div class=\"govuk-breadcrumbs\">\n  <ol class=\"govuk-breadcrumbs__list\">\n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/service-manual\">Service Manual</a>\n    </li>\n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/service-manual/agile-delivery\">Agile Delivery</a>\n    </li>\n  </ol>\n</div>"
+            "html": "<nav class=\"govuk-breadcrumbs\" aria-label=\"Breadcrumb\">\n  <ol class=\"govuk-breadcrumbs__list\">\n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/service-manual\">Service Manual</a>\n    </li>\n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/service-manual/agile-delivery\">Agile Delivery</a>\n    </li>\n  </ol>\n</nav>"
         },
         {
             "name": "with last breadcrumb as current page",
@@ -106,7 +106,7 @@
             "description": "",
             "previewLayoutModifiers": [],
             "screenshot": false,
-            "html": "<div class=\"govuk-breadcrumbs\">\n  <ol class=\"govuk-breadcrumbs__list\">\n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/\">Home</a>\n    </li>\n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/browse/abroad\">Passports, travel and living abroad</a>\n    </li>\n    <li class=\"govuk-breadcrumbs__list-item\" aria-current=\"page\">Travel abroad</li>\n  </ol>\n</div>"
+            "html": "<nav class=\"govuk-breadcrumbs\" aria-label=\"Breadcrumb\">\n  <ol class=\"govuk-breadcrumbs__list\">\n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/\">Home</a>\n    </li>\n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/browse/abroad\">Passports, travel and living abroad</a>\n    </li>\n    <li class=\"govuk-breadcrumbs__list-item\" aria-current=\"page\">Travel abroad</li>\n  </ol>\n</nav>"
         },
         {
             "name": "with collapse on mobile",
@@ -131,7 +131,7 @@
             "description": "",
             "previewLayoutModifiers": [],
             "screenshot": false,
-            "html": "<div class=\"govuk-breadcrumbs govuk-breadcrumbs--collapse-on-mobile\">\n  <ol class=\"govuk-breadcrumbs__list\">\n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/\">Home</a>\n    </li>\n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/education\">Education, training and skills</a>\n    </li>\n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/education/special-educational-needs-and-disability-send-and-high-needs\">Special educational needs and disability (SEND) and high needs</a>\n    </li>\n  </ol>\n</div>"
+            "html": "<nav class=\"govuk-breadcrumbs govuk-breadcrumbs--collapse-on-mobile\" aria-label=\"Breadcrumb\">\n  <ol class=\"govuk-breadcrumbs__list\">\n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/\">Home</a>\n    </li>\n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/education\">Education, training and skills</a>\n    </li>\n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/education/special-educational-needs-and-disability-send-and-high-needs\">Special educational needs and disability (SEND) and high needs</a>\n    </li>\n  </ol>\n</nav>"
         },
         {
             "name": "inverse",
@@ -157,7 +157,7 @@
                 "inverse"
             ],
             "screenshot": true,
-            "html": "<div class=\"govuk-breadcrumbs govuk-breadcrumbs--inverse\">\n  <ol class=\"govuk-breadcrumbs__list\">\n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/\">Home</a>\n    </li>\n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/browse/abroad\">Passports, travel and living abroad</a>\n    </li>\n    <li class=\"govuk-breadcrumbs__list-item\" aria-current=\"page\">Travel abroad</li>\n  </ol>\n</div>"
+            "html": "<nav class=\"govuk-breadcrumbs govuk-breadcrumbs--inverse\" aria-label=\"Breadcrumb\">\n  <ol class=\"govuk-breadcrumbs__list\">\n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/\">Home</a>\n    </li>\n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/browse/abroad\">Passports, travel and living abroad</a>\n    </li>\n    <li class=\"govuk-breadcrumbs__list-item\" aria-current=\"page\">Travel abroad</li>\n  </ol>\n</nav>"
         },
         {
             "name": "classes",
@@ -173,14 +173,14 @@
             "description": "",
             "previewLayoutModifiers": [],
             "screenshot": false,
-            "html": "<div class=\"govuk-breadcrumbs app-breadcrumbs--custom-modifier\">\n  <ol class=\"govuk-breadcrumbs__list\">\n    <li class=\"govuk-breadcrumbs__list-item\" aria-current=\"page\">Home</li>\n  </ol>\n</div>"
+            "html": "<nav class=\"govuk-breadcrumbs app-breadcrumbs--custom-modifier\" aria-label=\"Breadcrumb\">\n  <ol class=\"govuk-breadcrumbs__list\">\n    <li class=\"govuk-breadcrumbs__list-item\" aria-current=\"page\">Home</li>\n  </ol>\n</nav>"
         },
         {
             "name": "attributes",
             "options": {
                 "attributes": {
                     "id": "my-navigation",
-                    "role": "navigation"
+                    "data-foo": "bar"
                 },
                 "items": [
                     {
@@ -192,7 +192,7 @@
             "description": "",
             "previewLayoutModifiers": [],
             "screenshot": false,
-            "html": "<div class=\"govuk-breadcrumbs\" id=\"my-navigation\" role=\"navigation\">\n  <ol class=\"govuk-breadcrumbs__list\">\n    <li class=\"govuk-breadcrumbs__list-item\" aria-current=\"page\">Home</li>\n  </ol>\n</div>"
+            "html": "<nav class=\"govuk-breadcrumbs\" id=\"my-navigation\" data-foo=\"bar\" aria-label=\"Breadcrumb\">\n  <ol class=\"govuk-breadcrumbs__list\">\n    <li class=\"govuk-breadcrumbs__list-item\" aria-current=\"page\">Home</li>\n  </ol>\n</nav>"
         },
         {
             "name": "item attributes",
@@ -212,7 +212,7 @@
             "description": "",
             "previewLayoutModifiers": [],
             "screenshot": false,
-            "html": "<div class=\"govuk-breadcrumbs\">\n  <ol class=\"govuk-breadcrumbs__list\">\n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/section\" data-attribute=\"my-attribute\" data-attribute-2=\"my-attribute-2\">Section 1</a>\n    </li>\n  </ol>\n</div>"
+            "html": "<nav class=\"govuk-breadcrumbs\" aria-label=\"Breadcrumb\">\n  <ol class=\"govuk-breadcrumbs__list\">\n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/section\" data-attribute=\"my-attribute\" data-attribute-2=\"my-attribute-2\">Section 1</a>\n    </li>\n  </ol>\n</nav>"
         },
         {
             "name": "html as text",
@@ -231,7 +231,7 @@
             "description": "",
             "previewLayoutModifiers": [],
             "screenshot": false,
-            "html": "<div class=\"govuk-breadcrumbs\">\n  <ol class=\"govuk-breadcrumbs__list\">\n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/section-1\">&lt;span&gt;Section 1&lt;/span&gt;</a>\n    </li>\n    <li class=\"govuk-breadcrumbs__list-item\" aria-current=\"page\">&lt;span&gt;Section 2&lt;/span&gt;</li>\n  </ol>\n</div>"
+            "html": "<nav class=\"govuk-breadcrumbs\" aria-label=\"Breadcrumb\">\n  <ol class=\"govuk-breadcrumbs__list\">\n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/section-1\">&lt;span&gt;Section 1&lt;/span&gt;</a>\n    </li>\n    <li class=\"govuk-breadcrumbs__list-item\" aria-current=\"page\">&lt;span&gt;Section 2&lt;/span&gt;</li>\n  </ol>\n</nav>"
         },
         {
             "name": "html",
@@ -242,7 +242,8 @@
                         "href": "/section-1"
                     },
                     {
-                        "html": "<em>Section 2</em>"
+                        "html": "<em>Section 2</em>",
+                        "href": "/section-2"
                     }
                 ]
             },
@@ -250,7 +251,28 @@
             "description": "",
             "previewLayoutModifiers": [],
             "screenshot": false,
-            "html": "<div class=\"govuk-breadcrumbs\">\n  <ol class=\"govuk-breadcrumbs__list\">\n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/section-1\"><em>Section 1</em></a>\n    </li>\n    <li class=\"govuk-breadcrumbs__list-item\" aria-current=\"page\"><em>Section 2</em></li>\n  </ol>\n</div>"
+            "html": "<nav class=\"govuk-breadcrumbs\" aria-label=\"Breadcrumb\">\n  <ol class=\"govuk-breadcrumbs__list\">\n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/section-1\"><em>Section 1</em></a>\n    </li>\n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/section-2\"><em>Section 2</em></a>\n    </li>\n  </ol>\n</nav>"
+        },
+        {
+            "name": "custom label",
+            "options": {
+                "labelText": "Briwsion bara",
+                "items": [
+                    {
+                        "text": "Hafan",
+                        "href": "/"
+                    },
+                    {
+                        "text": "Sefydliadau",
+                        "href": "/organisations"
+                    }
+                ]
+            },
+            "hidden": true,
+            "description": "",
+            "previewLayoutModifiers": [],
+            "screenshot": false,
+            "html": "<nav class=\"govuk-breadcrumbs\" aria-label=\"Briwsion bara\">\n  <ol class=\"govuk-breadcrumbs__list\">\n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/\">Hafan</a>\n    </li>\n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/organisations\">Sefydliadau</a>\n    </li>\n  </ol>\n</nav>"
         }
     ]
 }
diff --git a/packages/govuk-frontend/dist/govuk/components/breadcrumbs/macro-options.json b/packages/govuk-frontend/dist/govuk/components/breadcrumbs/macro-options.json
index 801134d8e..4ac5d1d24 100644
--- a/packages/govuk-frontend/dist/govuk/components/breadcrumbs/macro-options.json
+++ b/packages/govuk-frontend/dist/govuk/components/breadcrumbs/macro-options.json
@@ -48,5 +48,11 @@
         "type": "object",
         "required": false,
         "description": "HTML attributes (for example data attributes) to add to the breadcrumbs container."
+    },
+    {
+        "name": "labelText",
+        "type": "string",
+        "required": false,
+        "description": "Plain text label identifying the landmark to screen readers. Defaults to \"Breadcrumb\"."
     }
 ]

Action run for ca7f22d

selfthinker · 2024-06-04T17:15:00Z

I generally agree with Tom's initial assessment back in 2013 that there were way too many navigation landmarks on the page. Although they had worked on removing some, I assume some have moved back in or were added later as www.gov.uk still uses way too many, lots of which should perhaps be removed. (For example, tax codes has 6 navigation landmarks, at least half of which are probably not necessary.)

Breadcrumbs currently have none of these: they lack the nav element, they lack headings (visible or not), lack accessible labelling, their context cannot be inferred from a parent landmark because they don't have one, and it cannot be inferred from the links themselves as (apart from 'Home') they are disembodied section names.

That is a very good point. A point that makes me think maybe this is a good idea.

Something that is a bit problematic is that when breadcrumbs are used on www.gov.uk, they are often not very useful as the website's hierarchy is presented as pretty flat. Therefore the breadcrumbs often only have a "Home" link and then a link to the page's general topic.
I don't know enough about how breadcrumbs are used on services to know if they are more useful there. But I can imagine simple services won't need them at all.
But I guess that is not the problem of the Design System. Or if it is, it's something for guidance, not code.

Overall I'm happy with this change.

The only thing I would like to get input from a content designer for is the label "Breadcrumb".
I would assume that the majority of people won't know what breadcrumbs are, including screen reader users. Or maybe screen reader users know the meaning of the word better than most other users because it is used on lots of websites to label them?
Unless "breadcrumb" explains it better to people (in this case specifically screen reader users), I would try to avoid jargon and explain in plain English what it is or what it does. I like "You are here", but a content designer might have a better idea.

selfthinker · 2024-06-04T17:19:25Z

Also, directly related to #4451.

calvin-lau-sig7 · 2024-06-05T11:44:53Z

Thanks @selfthinker. I think I've got all the context. I’m not sure I can do better than W3C’s example that just calls it “Breadcrumbs”

Something like "You are here" is tricky because 'here' could be easily misinterpreted to mean any of the breadcrumb links.

If anything, there's the idea of "Page levels" or "Page levels for this page", but that's only slightly less jargon-y but also imprecise as it might be mistaken for something concerning the page itself and overemphasise its importance.

selfthinker · 2024-06-05T13:53:58Z

@calvin-lau-sig7, I've tried to google alternative names and also if there has been any research about the name with screen reader users but couldn't find anything for the latter and only very little for the former.
Other than the previously mentioned "You are here" which is used in a couple of places, I also found "Navigation Path". But that's it, nothing else.
If I had to describe it with simpler words I would say something like "path to where you are on this website" (which is obviously too long).
I will ask the community, maybe someone knows of any user research in this area.

calvin-lau-sig7 · 2024-06-05T15:02:31Z

Thanks for the investigtion @selfthinker!

Continuing our musings, something like "Page level path" could be a bit more descriptive, as long as it's not mistaken for the user's back history.

I might need to better understand the semantics for "You are here"... would the ARIA tag be understood to refer to the whole list, without too much risk of being mistaken for one of the links in the list?

querkmachine · 2024-06-06T07:52:09Z

We had similar thoughts when we introduced the pagination component and how we should accessibly label that.

In that instance, we stuck with 'pagination' because, even though it's probably more niche terminology than necessary, it was the labelling that the overwhelming amount of other examples we could find also used for their accessible labels, so it seemed likely that assistive technology users would have encountered it many times before and probably understood what it referred to.

That's just anec-data though, and we didn't specifically test that assumption.

selfthinker · 2024-06-06T11:10:46Z

I might need to better understand the semantics for "You are here"... would the ARIA tag be understood to refer to the whole list, without too much risk of being mistaken for one of the links in the list?

Yes, it would refer to the whole list, or rather to the navigation landmark the list is in. That can be discovered by navigating by landmark or arrowing through the page. It would then announce something like "Breadcrumb, navigation" before it gets into the list, so clearly not a link.
Although when directly navigating to a link in the breadcrumbs, it also announces the context, including the landmark. But it would do that in a way the context is clearly announced. Not sure if it might be possible for a less proficient screen reader user who is not used to landmarks and how they present to confuse them with being part of a link in that case. I don't think that would be very common.

selfthinker · 2024-06-06T11:14:20Z

It would then announce something like "Breadcrumb, navigation" before it gets into the list

Just clarifying... It would read "[whatever the aria-label says], navigation", so "You are here, navigation" in the other case. (And some screen readers also add "region" or "landmark" at the end.)

querkmachine · 2024-06-06T11:32:30Z

The way that Breadcrumbs is currently often used has it only list the ancestors of the current page, but omits the current page (as that is given by the h1). That makes me unsure whether "You are here" would necessarily be an accurate description of the landmark's content.

romaricpascal

The component code looks good, as do the tests 🙌🏻 However, we've updated the breadcrumbs tests to use JSDOM in #5027 (sorry for not thinking of this PR while reviewing it), so the tests will need a little update before we can merge 😊

querkmachine · 2024-06-17T12:40:33Z

@romaricpascal I've rebased from main and updated the new tests to use JSDOM 🎉

romaricpascal

I've rebased from main and updated the new tests to use JSDOM 🎉

Ace! Thanks for rebasing. All good to go (code-wise, that is) ⛵

calvin-lau-sig7 · 2024-06-17T15:28:57Z

The way that Breadcrumbs is currently often used has it only list the ancestors of the current page, but omits the current page (as that is given by the h1). That makes me unsure whether "You are here" would necessarily be an accurate description of the landmark's content.

Okay, @querkmachine's point here is a strong one – breadcrumb content often does not actually indicate the current page, instead only showing the earlier or higher-level pages.

Based on this I'd agree we should keep it to "Breadcrumb", as we can't rely on the breadcrumb being a reliable indication of "here".

I'm open to figuring out a more plain English label amongst us that'd work through. E.g. How you got here (if that were accurate).

querkmachine · 2024-06-17T15:43:32Z

I'm going to merge this given it's had approval and the consensus seems to be that current default labelling is sensible, even if not ideal. We can still update it later in the cycle without issue.

Update Breadcrumb component to improve screen reader accessibility

querkmachine self-assigned this May 20, 2024

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-4995 May 20, 2024 13:53 Inactive

querkmachine force-pushed the breadcrumbs-nav-label branch from f24cf4c to 6d8b711 Compare May 20, 2024 14:03

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-4995 May 20, 2024 14:04 Inactive

querkmachine force-pushed the breadcrumbs-nav-label branch from 6d8b711 to 74532cc Compare May 20, 2024 14:09

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-4995 May 20, 2024 14:10 Inactive

querkmachine requested review from selfthinker and a team May 20, 2024 15:34

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-4995 May 20, 2024 15:48 Inactive

querkmachine marked this pull request as ready for review May 20, 2024 16:19

querkmachine mentioned this pull request May 21, 2024

Examine and resolve accessibility findings alphagov/govuk-design-system#3811

Open

8 tasks

CharlotteDowns linked an issue May 21, 2024 that may be closed by this pull request

Examine and resolve accessibility findings alphagov/govuk-design-system#3811

Open

8 tasks

romaricpascal reviewed Jun 17, 2024

View reviewed changes

querkmachine force-pushed the breadcrumbs-nav-label branch from b4d5be0 to 48cc77c Compare June 17, 2024 12:39

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-4995 June 17, 2024 12:39 Inactive

querkmachine added 2 commits June 17, 2024 13:52

Change breadcrumb component to use nav element

232d4d0

Update CHANGELOG

ca7f22d

querkmachine force-pushed the breadcrumbs-nav-label branch from 48cc77c to ca7f22d Compare June 17, 2024 12:52

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-4995 June 17, 2024 12:52 Inactive

romaricpascal approved these changes Jun 17, 2024

View reviewed changes

querkmachine merged commit e11d43d into main Jun 17, 2024
50 checks passed

querkmachine deleted the breadcrumbs-nav-label branch June 17, 2024 15:43

querkmachine mentioned this pull request Jun 18, 2024

Breadcrumb component accessibility #4451

Closed

domoscargin pushed a commit that referenced this pull request Jun 19, 2024

Merge pull request #4995 from alphagov/breadcrumbs-nav-label

e8898d1

Update Breadcrumb component to improve screen reader accessibility

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update Breadcrumb component to improve screen reader accessibility #4995

Update Breadcrumb component to improve screen reader accessibility #4995

querkmachine commented May 20, 2024 •

edited

Loading

github-actions bot commented May 20, 2024 •

edited

Loading

github-actions bot commented May 20, 2024 •

edited

Loading

github-actions bot commented May 20, 2024 •

edited

Loading

selfthinker commented Jun 4, 2024

selfthinker commented Jun 4, 2024

calvin-lau-sig7 commented Jun 5, 2024

selfthinker commented Jun 5, 2024

calvin-lau-sig7 commented Jun 5, 2024

querkmachine commented Jun 6, 2024

selfthinker commented Jun 6, 2024

selfthinker commented Jun 6, 2024

querkmachine commented Jun 6, 2024

romaricpascal left a comment

querkmachine commented Jun 17, 2024

romaricpascal left a comment •

edited

Loading

calvin-lau-sig7 commented Jun 17, 2024

querkmachine commented Jun 17, 2024

Update Breadcrumb component to improve screen reader accessibility #4995

Update Breadcrumb component to improve screen reader accessibility #4995

Conversation

querkmachine commented May 20, 2024 • edited Loading

Background

Changes

github-actions bot commented May 20, 2024 • edited Loading

📋 Stats

File sizes

Modules

github-actions bot commented May 20, 2024 • edited Loading

Rendered HTML changes to npm package

github-actions bot commented May 20, 2024 • edited Loading

Other changes to npm package

selfthinker commented Jun 4, 2024

selfthinker commented Jun 4, 2024

calvin-lau-sig7 commented Jun 5, 2024

selfthinker commented Jun 5, 2024

calvin-lau-sig7 commented Jun 5, 2024

querkmachine commented Jun 6, 2024

selfthinker commented Jun 6, 2024

selfthinker commented Jun 6, 2024

querkmachine commented Jun 6, 2024

romaricpascal left a comment

Choose a reason for hiding this comment

querkmachine commented Jun 17, 2024

romaricpascal left a comment • edited Loading

Choose a reason for hiding this comment

calvin-lau-sig7 commented Jun 17, 2024

querkmachine commented Jun 17, 2024

querkmachine commented May 20, 2024 •

edited

Loading

github-actions bot commented May 20, 2024 •

edited

Loading

github-actions bot commented May 20, 2024 •

edited

Loading

github-actions bot commented May 20, 2024 •

edited

Loading

romaricpascal left a comment •

edited

Loading