mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-06-05 14:00:51 -04:00
0ec53be2da
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.
26 lines
1.7 KiB
HTML
26 lines
1.7 KiB
HTML
{% macro cookie_banner(id='global-cookie-message') %}
|
|
|
|
<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>
|
|
<div class="notify-cookie-banner__buttons">
|
|
<button class="govuk-button notify-cookie-banner__button notify-cookie-banner__button-accept" type="submit" data-accept-cookies="true" aria-describedby="notify-cookie-banner__heading">
|
|
Yes<span class="govuk-visually-hidden">, Notify can store analytics cookies on your device</span>
|
|
</button>
|
|
<button class="govuk-button notify-cookie-banner__button notify-cookie-banner__button-reject" type="submit" data-accept-cookies="false" aria-describedby="notify-cookie-banner__heading">
|
|
No<span class="govuk-visually-hidden">, Notify cannot store analytics cookies on your device</span>
|
|
</button>
|
|
<a class="govuk-link notify-cookie-banner__link" href="/cookies">How Notify uses cookies</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="notify-cookie-banner__confirmation govuk-width-container" tabindex="-1">
|
|
<p class="notify-cookie-banner__confirmation-message govuk-body">
|
|
You can <a class="govuk-link" href="/cookies">change your cookie settings</a> at any time.
|
|
</p>
|
|
<button class="notify-cookie-banner__hide-button govuk-link" data-hide-cookie-banner="true" role="link">Hide<span class="govuk-visually-hidden"> cookies message</span></button>
|
|
</div>
|
|
</div>
|
|
{% endmacro %}
|