darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-02-06 11:23:48 -05:00
Code Issues Packages Projects Releases Wiki Activity

Add hidden text to cookie banner buttons

Browse Source 
Visual users get the context from the proximity to
the h2 but we need to provide this for others.

I've tried using `aria-describedby` to link them
to the h2 but this ends up making the h2 text the
button's description in the accessibility tree. In
Voiceover this means you only get that information
as extra context, announced a while after the
label if the VO cursor stays on the button.

We want all the information in the accessible
label so chose this approach instead.
This commit is contained in:
Tom Byers
2020-01-08 17:03:04 +00:00
parent d37379fc68
commit ff2e1dd921
1 changed files with 6 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
app/templates/components/cookie-banner.html
View File

@@ -6,10 +6,14 @@
<p class="govuk-body">Analytics cookies help us understand how our website is being used.</p>
<div class="notify-cookie-banner__buttons">
<div class="notify-cookie-banner__button notify-cookie-banner__button-accept">
<button class="govuk-button govuk-button__inline" type="submit" data-accept-cookies="true" aria-describedby="notify-cookie-banner__heading">Yes</button>
<button class="govuk-button govuk-button__inline" type="submit" data-accept-cookies="true" aria-describedby="notify-cookie-banner__heading">
Yes<span class="govuk-visually-hidden">, we can store analytics cookies on your device</span>
</button>
</div>
<div class="notify-cookie-banner__button notify-cookie-banner__button-reject">
<button class="govuk-button govuk-button__inline" type="submit" data-accept-cookies="false" aria-describedby="notify-cookie-banner__heading">No</button>
<button class="govuk-button govuk-button__inline" type="submit" data-accept-cookies="false" aria-describedby="notify-cookie-banner__heading">
No<span class="govuk-visually-hidden">, we can't store analytics cookies on your device</span>
</button>
</div>
<a class="govuk-link notify-cookie-banner__link" href="/cookies">How Notify uses cookies</a>
</div>