Remove `aria-labelledby` from accordion sections #4628

36degrees · 2024-01-12T10:08:04Z

Adding aria-labelledby to a <div> with no explicit role is explicitly disallowed by the 'ARIA in HTML' specification and in our testing provides little or no benefit to users, including users of assistive technologies.

We’ve explored using <section> elements for each accordion section (for which a label would make sense), however best practise is to limit the use of region landmarks ‘as too many landmarks can dilute their usefulness in quickly navigating to important areas of a page’.

We don’t have clear evidence that marking accordion sections up as regions is useful, so more research is needed in this area.

There has also been a suggestion that we could use <article> elements, but it would depend on how the accordion is being used.

We may still want to pursue these options in the future, but until we make a decision on whether the sections should have a semantic role remove the aria-labelledby attribute – it’s trivial to reintroduce it later.

Closes #2472.

github-actions · 2024-01-12T10:10:07Z

📋 Stats

File sizes

File	Size
dist/govuk-frontend-development.min.css	112.45 KiB
dist/govuk-frontend-development.min.js	38.58 KiB
packages/govuk-frontend/dist/govuk/all.bundle.js	78.74 KiB
packages/govuk-frontend/dist/govuk/all.bundle.mjs	73.99 KiB
packages/govuk-frontend/dist/govuk/all.mjs	3.86 KiB
packages/govuk-frontend/dist/govuk/govuk-frontend-component.mjs	359 B
packages/govuk-frontend/dist/govuk/govuk-frontend.min.css	112.44 KiB
packages/govuk-frontend/dist/govuk/govuk-frontend.min.js	38.57 KiB
packages/govuk-frontend/dist/govuk/i18n.mjs	5.38 KiB

Modules

File	Size
all.mjs	70.32 KiB
components/accordion/accordion.mjs	21.67 KiB
components/button/button.mjs	4.7 KiB
components/character-count/character-count.mjs	21.24 KiB
components/checkboxes/checkboxes.mjs	5.83 KiB
components/error-summary/error-summary.mjs	6.57 KiB
components/exit-this-page/exit-this-page.mjs	16.08 KiB
components/header/header.mjs	4.46 KiB
components/notification-banner/notification-banner.mjs	4.93 KiB
components/radios/radios.mjs	4.83 KiB
components/skip-link/skip-link.mjs	4.39 KiB
components/tabs/tabs.mjs	10.16 KiB

View stats and visualisations on the review app

Action run for c20d48a

github-actions · 2024-01-12T10:10:26Z

Other changes to npm package

diff --git a/packages/govuk-frontend/dist/govuk/components/accordion/fixtures.json b/packages/govuk-frontend/dist/govuk/components/accordion/fixtures.json
index 6170352ad..9b951b72d 100644
--- a/packages/govuk-frontend/dist/govuk/components/accordion/fixtures.json
+++ b/packages/govuk-frontend/dist/govuk/components/accordion/fixtures.json
@@ -27,7 +27,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"default-example\">\n      <div class=\"govuk-accordion__section\">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"default-example-heading-1\">\n              Section A\n            </span>\n          </h2>\n        </div>\n        <div id=\"default-example-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"default-example-heading-1\">\n            <p class=\"govuk-body\">We need to know your nationality so we can work out which elections you’re entitled to vote in. If you cannot provide your nationality, you’ll have to send copies of identity documents through the post.</p>\n        </div>\n      </div>\n      <div class=\"govuk-accordion__section\">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"default-example-heading-2\">\n              Section B\n            </span>\n          </h2>\n        </div>\n        <div id=\"default-example-content-2\" class=\"govuk-accordion__section-content\" aria-labelledby=\"default-example-heading-2\">\n            <ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 2</li>\n</ul>\n\n        </div>\n      </div>\n</div>"
+            "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"default-example\">\n      <div class=\"govuk-accordion__section\">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"default-example-heading-1\">\n              Section A\n            </span>\n          </h2>\n        </div>\n        <div id=\"default-example-content-1\" class=\"govuk-accordion__section-content\">\n            <p class=\"govuk-body\">We need to know your nationality so we can work out which elections you’re entitled to vote in. If you cannot provide your nationality, you’ll have to send copies of identity documents through the post.</p>\n        </div>\n      </div>\n      <div class=\"govuk-accordion__section\">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"default-example-heading-2\">\n              Section B\n            </span>\n          </h2>\n        </div>\n        <div id=\"default-example-content-2\" class=\"govuk-accordion__section-content\">\n            <ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 2</li>\n</ul>\n\n        </div>\n      </div>\n</div>"
         },
         {
             "name": "with additional descriptions",
@@ -61,7 +61,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"with-descriptions\">\n      <div class=\"govuk-accordion__section\">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"with-descriptions-heading-1\">\n              Test\n            </span>\n          </h2>\n            <div class=\"govuk-accordion__section-summary govuk-body\" id=\"with-descriptions-summary-1\">\n              Additional description\n            </div>\n        </div>\n        <div id=\"with-descriptions-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"with-descriptions-heading-1\">\n            <p class=\"govuk-body\">\n  We need to know your nationality so we can work out which elections you’re entitled to vote in. If you cannot provide your nationality, you’ll have to send copies of identity documents through the post.\n</p>\n<ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 1</li>\n</ul>\n\n        </div>\n      </div>\n      <div class=\"govuk-accordion__section\">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"with-descriptions-heading-2\">\n              Test 2\n            </span>\n          </h2>\n            <div class=\"govuk-accordion__section-summary govuk-body\" id=\"with-descriptions-summary-2\">\n              <span class=\"govuk-!-font-weight-regular\">Additional description (wrapped in span)</span>\n            </div>\n        </div>\n        <div id=\"with-descriptions-content-2\" class=\"govuk-accordion__section-content\" aria-labelledby=\"with-descriptions-heading-2\">\n            <ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 2</li>\n</ul>\n\n        </div>\n      </div>\n</div>"
+            "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"with-descriptions\">\n      <div class=\"govuk-accordion__section\">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"with-descriptions-heading-1\">\n              Test\n            </span>\n          </h2>\n            <div class=\"govuk-accordion__section-summary govuk-body\" id=\"with-descriptions-summary-1\">\n              Additional description\n            </div>\n        </div>\n        <div id=\"with-descriptions-content-1\" class=\"govuk-accordion__section-content\">\n            <p class=\"govuk-body\">\n  We need to know your nationality so we can work out which elections you’re entitled to vote in. If you cannot provide your nationality, you’ll have to send copies of identity documents through the post.\n</p>\n<ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 1</li>\n</ul>\n\n        </div>\n      </div>\n      <div class=\"govuk-accordion__section\">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"with-descriptions-heading-2\">\n              Test 2\n            </span>\n          </h2>\n            <div class=\"govuk-accordion__section-summary govuk-body\" id=\"with-descriptions-summary-2\">\n              <span class=\"govuk-!-font-weight-regular\">Additional description (wrapped in span)</span>\n            </div>\n        </div>\n        <div id=\"with-descriptions-content-2\" class=\"govuk-accordion__section-content\">\n            <ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 2</li>\n</ul>\n\n        </div>\n      </div>\n</div>"
         },
         {
             "name": "with long content and description",
@@ -95,7 +95,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"with-long-content-and-description\">\n      <div class=\"govuk-accordion__section\">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"with-long-content-and-description-heading-1\">\n              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quis tortor porttitor.\n            </span>\n          </h2>\n            <div class=\"govuk-accordion__section-summary govuk-body\" id=\"with-long-content-and-description-summary-1\">\n              Etiam diam dui, tempus ut pharetra in, aliquet non dui. Nunc pulvinar maximus tortor, ac finibus augue congue vitae. Donec sed cursus lorem.\n            </div>\n        </div>\n        <div id=\"with-long-content-and-description-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"with-long-content-and-description-heading-1\">\n            <ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 1</li>\n</ul>\n\n        </div>\n      </div>\n      <div class=\"govuk-accordion__section\">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"with-long-content-and-description-heading-2\">\n              Praesent faucibus leo feugiat libero pharetra lacinia. Aliquam aliquet ante vitae mollis vestibulum.\n            </span>\n          </h2>\n            <div class=\"govuk-accordion__section-summary govuk-body\" id=\"with-long-content-and-description-summary-2\">\n              <span class=\"govuk-!-font-weight-regular\">Maecenas nec <abbr>est</abbr> sapien. Etiam varius luctus mauris non porttitor. </span>\n            </div>\n        </div>\n        <div id=\"with-long-content-and-description-content-2\" class=\"govuk-accordion__section-content\" aria-labelledby=\"with-long-content-and-description-heading-2\">\n            <ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 2</li>\n</ul>\n\n        </div>\n      </div>\n</div>"
+            "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"with-long-content-and-description\">\n      <div class=\"govuk-accordion__section\">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"with-long-content-and-description-heading-1\">\n              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quis tortor porttitor.\n            </span>\n          </h2>\n            <div class=\"govuk-accordion__section-summary govuk-body\" id=\"with-long-content-and-description-summary-1\">\n              Etiam diam dui, tempus ut pharetra in, aliquet non dui. Nunc pulvinar maximus tortor, ac finibus augue congue vitae. Donec sed cursus lorem.\n            </div>\n        </div>\n        <div id=\"with-long-content-and-description-content-1\" class=\"govuk-accordion__section-content\">\n            <ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 1</li>\n</ul>\n\n        </div>\n      </div>\n      <div class=\"govuk-accordion__section\">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"with-long-content-and-description-heading-2\">\n              Praesent faucibus leo feugiat libero pharetra lacinia. Aliquam aliquet ante vitae mollis vestibulum.\n            </span>\n          </h2>\n            <div class=\"govuk-accordion__section-summary govuk-body\" id=\"with-long-content-and-description-summary-2\">\n              <span class=\"govuk-!-font-weight-regular\">Maecenas nec <abbr>est</abbr> sapien. Etiam varius luctus mauris non porttitor. </span>\n            </div>\n        </div>\n        <div id=\"with-long-content-and-description-content-2\" class=\"govuk-accordion__section-content\">\n            <ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 2</li>\n</ul>\n\n        </div>\n      </div>\n</div>"
         },
         {
             "name": "with one section open",
@@ -124,7 +124,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"one-section-open-example\">\n      <div class=\"govuk-accordion__section govuk-accordion__section--expanded\">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"one-section-open-example-heading-1\">\n              Section A\n            </span>\n          </h2>\n        </div>\n        <div id=\"one-section-open-example-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"one-section-open-example-heading-1\">\n            <ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 1</li>\n</ul>\n\n        </div>\n      </div>\n      <div class=\"govuk-accordion__section\">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"one-section-open-example-heading-2\">\n              Section B\n            </span>\n          </h2>\n        </div>\n        <div id=\"one-section-open-example-content-2\" class=\"govuk-accordion__section-content\" aria-labelledby=\"one-section-open-example-heading-2\">\n            <ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 2</li>\n</ul>\n\n        </div>\n      </div>\n</div>"
+            "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"one-section-open-example\">\n      <div class=\"govuk-accordion__section govuk-accordion__section--expanded\">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"one-section-open-example-heading-1\">\n              Section A\n            </span>\n          </h2>\n        </div>\n        <div id=\"one-section-open-example-content-1\" class=\"govuk-accordion__section-content\">\n            <ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 1</li>\n</ul>\n\n        </div>\n      </div>\n      <div class=\"govuk-accordion__section\">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"one-section-open-example-heading-2\">\n              Section B\n            </span>\n          </h2>\n        </div>\n        <div id=\"one-section-open-example-content-2\" class=\"govuk-accordion__section-content\">\n            <ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 2</li>\n</ul>\n\n        </div>\n      </div>\n</div>"
         },
         {
             "name": "with all sections already open",
@@ -154,7 +154,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"all-sections-open-example\">\n      <div class=\"govuk-accordion__section govuk-accordion__section--expanded\">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"all-sections-open-example-heading-1\">\n              Section A\n            </span>\n          </h2>\n        </div>\n        <div id=\"all-sections-open-example-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"all-sections-open-example-heading-1\">\n            <ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 1</li>\n</ul>\n\n        </div>\n      </div>\n      <div class=\"govuk-accordion__section govuk-accordion__section--expanded\">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"all-sections-open-example-heading-2\">\n              Section B\n            </span>\n          </h2>\n        </div>\n        <div id=\"all-sections-open-example-content-2\" class=\"govuk-accordion__section-content\" aria-labelledby=\"all-sections-open-example-heading-2\">\n            <ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 2</li>\n</ul>\n\n        </div>\n      </div>\n</div>"
+            "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"all-sections-open-example\">\n      <div class=\"govuk-accordion__section govuk-accordion__section--expanded\">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"all-sections-open-example-heading-1\">\n              Section A\n            </span>\n          </h2>\n        </div>\n        <div id=\"all-sections-open-example-content-1\" class=\"govuk-accordion__section-content\">\n            <ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 1</li>\n</ul>\n\n        </div>\n      </div>\n      <div class=\"govuk-accordion__section govuk-accordion__section--expanded\">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"all-sections-open-example-heading-2\">\n              Section B\n            </span>\n          </h2>\n        </div>\n        <div id=\"all-sections-open-example-content-2\" class=\"govuk-accordion__section-content\">\n            <ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 2</li>\n</ul>\n\n        </div>\n      </div>\n</div>"
         },
         {
             "name": "with focusable elements inside",
@@ -182,7 +182,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"with-focusable-elements\">\n      <div class=\"govuk-accordion__section\">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"with-focusable-elements-heading-1\">\n              Section A\n            </span>\n          </h2>\n        </div>\n        <div id=\"with-focusable-elements-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"with-focusable-elements-heading-1\">\n            <a class=\"govuk-link\" href=\"#\">Link A</a>\n        </div>\n      </div>\n      <div class=\"govuk-accordion__section\">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"with-focusable-elements-heading-2\">\n              Section B\n            </span>\n          </h2>\n        </div>\n        <div id=\"with-focusable-elements-content-2\" class=\"govuk-accordion__section-content\" aria-labelledby=\"with-focusable-elements-heading-2\">\n            <a class=\"govuk-link\" href=\"#\">Link B</a>\n        </div>\n      </div>\n</div>"
+            "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"with-focusable-elements\">\n      <div class=\"govuk-accordion__section\">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"with-focusable-elements-heading-1\">\n              Section A\n            </span>\n          </h2>\n        </div>\n        <div id=\"with-focusable-elements-content-1\" class=\"govuk-accordion__section-content\">\n            <a class=\"govuk-link\" href=\"#\">Link A</a>\n        </div>\n      </div>\n      <div class=\"govuk-accordion__section\">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"with-focusable-elements-heading-2\">\n              Section B\n            </span>\n          </h2>\n        </div>\n        <div id=\"with-focusable-elements-content-2\" class=\"govuk-accordion__section-content\">\n            <a class=\"govuk-link\" href=\"#\">Link B</a>\n        </div>\n      </div>\n</div>"
         },
         {
             "name": "with translations",
@@ -216,7 +216,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"with-translations\" data-i18n.hide-all-sections=\"Collapse all sections\" data-i18n.hide-section=\"Collapse\" data-i18n.hide-section-aria-label=\"Collapse this section\" data-i18n.show-all-sections=\"Expand all sections\" data-i18n.show-section=\"Expand\" data-i18n.show-section-aria-label=\"Expand this section\">\n      <div class=\"govuk-accordion__section\">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"with-translations-heading-1\">\n              Section A\n            </span>\n          </h2>\n        </div>\n        <div id=\"with-translations-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"with-translations-heading-1\">\n            <p class=\"govuk-body\">We need to know your nationality so we can work out which elections you’re entitled to vote in. If you cannot provide your nationality, you’ll have to send copies of identity documents through the post.</p>\n        </div>\n      </div>\n      <div class=\"govuk-accordion__section\">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"with-translations-heading-2\">\n              Section B\n            </span>\n          </h2>\n        </div>\n        <div id=\"with-translations-content-2\" class=\"govuk-accordion__section-content\" aria-labelledby=\"with-translations-heading-2\">\n            <ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 2</li>\n</ul>\n\n        </div>\n      </div>\n</div>"
+            "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"with-translations\" data-i18n.hide-all-sections=\"Collapse all sections\" data-i18n.hide-section=\"Collapse\" data-i18n.hide-section-aria-label=\"Collapse this section\" data-i18n.show-all-sections=\"Expand all sections\" data-i18n.show-section=\"Expand\" data-i18n.show-section-aria-label=\"Expand this section\">\n      <div class=\"govuk-accordion__section\">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"with-translations-heading-1\">\n              Section A\n            </span>\n          </h2>\n        </div>\n        <div id=\"with-translations-content-1\" class=\"govuk-accordion__section-content\">\n            <p class=\"govuk-body\">We need to know your nationality so we can work out which elections you’re entitled to vote in. If you cannot provide your nationality, you’ll have to send copies of identity documents through the post.</p>\n        </div>\n      </div>\n      <div class=\"govuk-accordion__section\">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"with-translations-heading-2\">\n              Section B\n            </span>\n          </h2>\n        </div>\n        <div id=\"with-translations-content-2\" class=\"govuk-accordion__section-content\">\n            <ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 2</li>\n</ul>\n\n        </div>\n      </div>\n</div>"
         },
         {
             "name": "classes",
@@ -237,7 +237,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-accordion myClass\" data-module=\"govuk-accordion\" id=\"accordion-classes\">\n      <div class=\"govuk-accordion__section\">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"accordion-classes-heading-1\">\n              Section A\n            </span>\n          </h2>\n        </div>\n        <div id=\"accordion-classes-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"accordion-classes-heading-1\">\n            <p class=\"govuk-body\">Some content</p>\n        </div>\n      </div>\n</div>"
+            "html": "<div class=\"govuk-accordion myClass\" data-module=\"govuk-accordion\" id=\"accordion-classes\">\n      <div class=\"govuk-accordion__section\">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"accordion-classes-heading-1\">\n              Section A\n            </span>\n          </h2>\n        </div>\n        <div id=\"accordion-classes-content-1\" class=\"govuk-accordion__section-content\">\n            <p class=\"govuk-body\">Some content</p>\n        </div>\n      </div>\n</div>"
         },
         {
             "name": "attributes",
@@ -260,7 +260,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"accordion-attributes\" data-attribute=\"value\">\n      <div class=\"govuk-accordion__section\">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"accordion-attributes-heading-1\">\n              Section A\n            </span>\n          </h2>\n        </div>\n        <div id=\"accordion-attributes-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"accordion-attributes-heading-1\">\n            <p class=\"govuk-body\">Some content</p>\n        </div>\n      </div>\n</div>"
+            "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"accordion-attributes\" data-attribute=\"value\">\n      <div class=\"govuk-accordion__section\">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"accordion-attributes-heading-1\">\n              Section A\n            </span>\n          </h2>\n        </div>\n        <div id=\"accordion-attributes-content-1\" class=\"govuk-accordion__section-content\">\n            <p class=\"govuk-body\">Some content</p>\n        </div>\n      </div>\n</div>"
         },
         {
             "name": "custom heading level",
@@ -281,7 +281,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"accordion-heading\">\n      <div class=\"govuk-accordion__section\">\n        <div class=\"govuk-accordion__section-header\">\n          <h3 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"accordion-heading-heading-1\">\n              Section A\n            </span>\n          </h3>\n        </div>\n        <div id=\"accordion-heading-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"accordion-heading-heading-1\">\n            <p class=\"govuk-body\">Some content</p>\n        </div>\n      </div>\n</div>"
+            "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"accordion-heading\">\n      <div class=\"govuk-accordion__section\">\n        <div class=\"govuk-accordion__section-header\">\n          <h3 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"accordion-heading-heading-1\">\n              Section A\n            </span>\n          </h3>\n        </div>\n        <div id=\"accordion-heading-content-1\" class=\"govuk-accordion__section-content\">\n            <p class=\"govuk-body\">Some content</p>\n        </div>\n      </div>\n</div>"
         },
         {
             "name": "heading html",
@@ -301,7 +301,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"accordion-heading-html\">\n      <div class=\"govuk-accordion__section\">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"accordion-heading-html-heading-1\">\n              <span class=\"myClass\">Section A</span>\n            </span>\n          </h2>\n        </div>\n        <div id=\"accordion-heading-html-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"accordion-heading-html-heading-1\">\n            <p class=\"govuk-body\">Some content</p>\n        </div>\n      </div>\n</div>"
+            "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"accordion-heading-html\">\n      <div class=\"govuk-accordion__section\">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"accordion-heading-html-heading-1\">\n              <span class=\"myClass\">Section A</span>\n            </span>\n          </h2>\n        </div>\n        <div id=\"accordion-heading-html-content-1\" class=\"govuk-accordion__section-content\">\n            <p class=\"govuk-body\">Some content</p>\n        </div>\n      </div>\n</div>"
         },
         {
             "name": "with falsey values",
@@ -332,7 +332,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"accordion-falsey\">\n      <div class=\"govuk-accordion__section\">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"accordion-falsey-heading-1\">\n              Section A\n            </span>\n          </h2>\n        </div>\n        <div id=\"accordion-falsey-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"accordion-falsey-heading-1\">\n            <p class=\"govuk-body\">Some content</p>\n        </div>\n      </div>\n      <div class=\"govuk-accordion__section\">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"accordion-falsey-heading-5\">\n              Section B\n            </span>\n          </h2>\n        </div>\n        <div id=\"accordion-falsey-content-5\" class=\"govuk-accordion__section-content\" aria-labelledby=\"accordion-falsey-heading-5\">\n            <p class=\"govuk-body\">Some content</p>\n        </div>\n      </div>\n</div>"
+            "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"accordion-falsey\">\n      <div class=\"govuk-accordion__section\">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"accordion-falsey-heading-1\">\n              Section A\n            </span>\n          </h2>\n        </div>\n        <div id=\"accordion-falsey-content-1\" class=\"govuk-accordion__section-content\">\n            <p class=\"govuk-body\">Some content</p>\n        </div>\n      </div>\n      <div class=\"govuk-accordion__section\">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"accordion-falsey-heading-5\">\n              Section B\n            </span>\n          </h2>\n        </div>\n        <div id=\"accordion-falsey-content-5\" class=\"govuk-accordion__section-content\">\n            <p class=\"govuk-body\">Some content</p>\n        </div>\n      </div>\n</div>"
         },
         {
             "name": "with remember expanded off",
@@ -353,7 +353,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"accordion-remember-expanded-off\" data-remember-expanded=\"false\">\n      <div class=\"govuk-accordion__section\">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"accordion-remember-expanded-off-heading-1\">\n              Section A\n            </span>\n          </h2>\n        </div>\n        <div id=\"accordion-remember-expanded-off-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"accordion-remember-expanded-off-heading-1\">\n            <p class=\"govuk-body\">Some content</p>\n        </div>\n      </div>\n</div>"
+            "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"accordion-remember-expanded-off\" data-remember-expanded=\"false\">\n      <div class=\"govuk-accordion__section\">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"accordion-remember-expanded-off-heading-1\">\n              Section A\n            </span>\n          </h2>\n        </div>\n        <div id=\"accordion-remember-expanded-off-content-1\" class=\"govuk-accordion__section-content\">\n            <p class=\"govuk-body\">Some content</p>\n        </div>\n      </div>\n</div>"
         }
     ]
 }
diff --git a/packages/govuk-frontend/dist/govuk/components/accordion/macro-options.json b/packages/govuk-frontend/dist/govuk/components/accordion/macro-options.json
index 9cc23a059..9a0ef5939 100644
--- a/packages/govuk-frontend/dist/govuk/components/accordion/macro-options.json
+++ b/packages/govuk-frontend/dist/govuk/components/accordion/macro-options.json
@@ -3,7 +3,7 @@
         "name": "id",
         "type": "string",
         "required": true,
-        "description": "Must be unique across the domain of your service if `rememberExpanded` is `true` (as the expanded state of individual instances of the component persists across page loads using [session storage](https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage)). Used as an `id` in the HTML for the accordion as a whole, and also as a prefix for the `id`s of the section contents and the buttons that open them, so that those `id`s can be the target of `aria-labelledby` and `aria-control` attributes."
+        "description": "Must be unique across the domain of your service if `rememberExpanded` is `true` (as the expanded state of individual instances of the component persists across page loads using [session storage](https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage)). Used as an `id` in the HTML for the accordion as a whole, and also as a prefix for the `id`s of the section contents and the buttons that open them, so that those `id`s can be the target of `aria-control` attributes."
     },
     {
         "name": "headingLevel",
diff --git a/packages/govuk-frontend/dist/govuk/components/accordion/template.njk b/packages/govuk-frontend/dist/govuk/components/accordion/template.njk
index b7f85c46d..67f4f462f 100644
--- a/packages/govuk-frontend/dist/govuk/components/accordion/template.njk
+++ b/packages/govuk-frontend/dist/govuk/components/accordion/template.njk
@@ -51,7 +51,7 @@
             </div>
           {% endif %}
         </div>
-        <div id="{{ id }}-content-{{ loop.index }}" class="govuk-accordion__section-content" aria-labelledby="{{ id }}-heading-{{ loop.index }}">
+        <div id="{{ id }}-content-{{ loop.index }}" class="govuk-accordion__section-content">
           {% if item.content.html %}
             {{ item.content.html | safe }}
           {% elif item.content.text %}

Action run for c20d48a

36degrees · 2024-01-12T10:12:09Z

Merging (and releasing) this should allow us to remove the related issue from our accessibility statement.

owenatgov

You just need to update the tests that look for the aria-labelledby and then this is good to go.

36degrees · 2024-01-12T10:28:12Z

All these pesky tests, getting in the way of me ripping out bits of code – what have they ever done for us, eh? 😉

owenatgov

One little query then I'm happy to call this done

packages/govuk-frontend/src/govuk/components/accordion/accessibility.puppeteer.test.mjs

owenatgov

Lovely

Adding `aria-labelledby` to a `<div>` with no explicit role is explicitly disallowed by the 'ARIA in HTML' specification [1] and in our testing provides little or no benefit to users, including users of assistive technologies [2]. We’ve explored using `<section>` elements for each accordion section (for which a label would make sense), however best practise is to limit the use of region landmarks ‘as too many landmarks can dilute their usefulness in quickly navigating to important areas of a page’ [3]. We don’t have clear evidence that marking accordion sections up as regions is useful, so more research is needed in this area. There has also been a suggestion that we could use `<article>` elements, but it would depend on how the accordion is being used. [4] We may still want to pursue these options in the future, but until we make a decision on whether the sections should have a semantic role remove the `aria-labelledby` attribute – it’s trivial to reintroduce it later. [1]: https://www.w3.org/TR/html-aria/#docconformance-naming [2]: #2472 (comment) [3]: https://www.scottohara.me/blog/2018/03/03/landmarks.html#region [4]: #2472 (comment)

This issue was resolved by the changes in alphagov/govuk-frontend#4628 [1] which were released as part of GOV.UK Frontend v5.1 [2]. We can now remove it from our accessibility statement. [1]: alphagov/govuk-frontend#4628 [2]: https://github.com/alphagov/govuk-frontend/releases/tag/v5.1.0

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-4628 January 12, 2024 10:08 Inactive

owenatgov self-requested a review January 12, 2024 10:16

owenatgov reviewed Jan 12, 2024

View reviewed changes

36degrees force-pushed the accordion-remove-aria-labelledby branch from 18ac1dc to b282205 Compare January 12, 2024 10:31

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-4628 January 12, 2024 10:31 Inactive

owenatgov reviewed Jan 12, 2024

View reviewed changes

packages/govuk-frontend/src/govuk/components/accordion/accessibility.puppeteer.test.mjs Outdated Show resolved Hide resolved

36degrees force-pushed the accordion-remove-aria-labelledby branch from b282205 to 9522064 Compare January 12, 2024 10:40

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-4628 January 12, 2024 10:40 Inactive

owenatgov approved these changes Jan 12, 2024

View reviewed changes

36degrees added 2 commits January 16, 2024 13:06

Document in CHANGELOG

c20d48a

36degrees force-pushed the accordion-remove-aria-labelledby branch from 9522064 to c20d48a Compare January 16, 2024 13:07

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-4628 January 16, 2024 13:07 Inactive

36degrees merged commit 54ad31d into main Jan 16, 2024
45 checks passed

36degrees deleted the accordion-remove-aria-labelledby branch January 16, 2024 13:16

36degrees added this to the v5.1 milestone Jan 26, 2024

querkmachine mentioned this pull request Feb 5, 2024

Release v5.1.0 #4734

Merged

36degrees mentioned this pull request Feb 6, 2024

Remove accordion issue from accessibility statement alphagov/govuk-design-system#3532

Merged

ramsharma-prog mentioned this pull request Apr 8, 2024

FS-4317-no-js-on-funding-service-dasboard-page communitiesuk/funding-service-design-assessment#611

Merged

This was referenced Jun 19, 2024

[Snyk] Upgrade govuk-frontend from 5.1.0 to 5.4.0 UKGovernmentBEIS/dsit-dvs-register#93

Closed

[Snyk] Upgrade govuk-frontend from 5.1.0 to 5.4.0 UKGovernmentBEIS/dsit-dvs-register-admin#53

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Remove `aria-labelledby` from accordion sections #4628

Remove `aria-labelledby` from accordion sections #4628

36degrees commented Jan 12, 2024

github-actions bot commented Jan 12, 2024 •

edited

Loading

github-actions bot commented Jan 12, 2024 •

edited

Loading

36degrees commented Jan 12, 2024

owenatgov left a comment

36degrees commented Jan 12, 2024

owenatgov left a comment

owenatgov left a comment

Remove aria-labelledby from accordion sections #4628

Remove aria-labelledby from accordion sections #4628

Conversation

36degrees commented Jan 12, 2024

github-actions bot commented Jan 12, 2024 • edited Loading

📋 Stats

File sizes

Modules

github-actions bot commented Jan 12, 2024 • edited Loading

Other changes to npm package

36degrees commented Jan 12, 2024

owenatgov left a comment

Choose a reason for hiding this comment

36degrees commented Jan 12, 2024

owenatgov left a comment

Choose a reason for hiding this comment

owenatgov left a comment

Choose a reason for hiding this comment

Remove `aria-labelledby` from accordion sections #4628

Remove `aria-labelledby` from accordion sections #4628

github-actions bot commented Jan 12, 2024 •

edited

Loading

github-actions bot commented Jan 12, 2024 •

edited

Loading