Give the cookie banner an accessible name

Our cookie banner has an accessible description
but no accessible name. It needs to have an
accessible name to distinguish it from other
elements on the page with role=region.

There's some advice in the WCAG guidance that
explains this more:

https://www.w3.org/TR/WCAG20-TECHS/ARIA11.html

This issue was raised in the accessibility review
done as part of our service assessment.

These changes borrow the approach from www.gov.uk of
moving to a label and losing the accessible
description. It also uses the 'cookie banner'
label for consistency with www.gov.uk.
This commit is contained in:
Tom Byers
2020-12-04 09:55:38 +00:00
parent 819dab347a
commit 0ec53be2da

View File

@@ -1,6 +1,6 @@
{% macro cookie_banner(id='global-cookie-message') %}
<div id="{{ id }}" class="notify-cookie-banner" data-module="cookie-banner" role="region" aria-describedby="notify-cookie-banner__heading">
<div id="{{ id }}" class="notify-cookie-banner" data-module="cookie-banner" role="region" aria-label="cookie banner">
<div class="notify-cookie-banner__wrapper govuk-width-container">
<h2 class="notify-cookie-banner__heading govuk-heading-m" id="notify-cookie-banner__heading">Can we store analytics cookies on your device?</h2>
<p class="govuk-body">Analytics cookies help us understand how our website is being used.</p>