github-actions[bot]
commented
6 months ago :clipboard: 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 ca7f22d52cef0be8b59ac00bfa0757476b0c031f
selfthinker
calvin-lau-sig7
querkmachine
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-labelof "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: https://github.com/alphagov/govuk_publishing_components/pull/2045#issuecomment-1803596065, though we could choose to modify this PR to do that as well.As
aria-labelis only supported in practice by interactive elements and landmarks, the breadcrumb component wrapper has been changed to anavto 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. https://github.com/alphagov/govuk-frontend/issues/1604). This is not strictly required to meet WCAG, but may be considered good practice.Background
The breadcrumb navigation was previously contained within a
navelement, 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
navas 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
navelements it's common to find on GOV.UK:header(banner) landmark and near the top of the page.footer(contentinfo) landmark.navelements 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 acomplementaryrole and is one of the first things inside of themainlandmark). Most provide multiple of these affordances.Breadcrumbs currently have none of these: they lack the
navelement, 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
divto anav.aria-labelto the Breadcrumb component wrapper.aria-labelnamedlabelText. This defaults to"Breadcrumb".labelText.nav, renders the defaultaria-label, and that the Nunjucks parameter can override thearia-label.role="navigation", as this was being flagged by the HTML linter as redundant role usage.