Agree how the cookie banner macro will work with the GOV.UK Design System page template

hannalaakso commented 3 years ago

What

We need to agree where the cookie banner sits in the Design System page template.

We could either define a cookie banner block inside between the skip link and header, or consider placing the cookie banner inside the header.

Why

Teams need to be able to use the cookie banner with our page template.

Who needs to know about this

Developers

Further detail

This card is related to https://github.com/alphagov/design-system-team-internal/issues/383. However that card seems to be more about the markup and design whereas this card is about how the page template macro should work.

Done when

[x] We've agreed where the cookie banner sits in the page template and have documented it on this card
[x] We have updated [TBC] with details of what needs implementing in the page template (if anything)

hannalaakso commented 3 years ago

We need to decide whether we add a more generic block like beforeHeader or a cookieBanner block.

beforeHeader pros:

could be useful for other things in future

cons:

you could accidentally override things inside the block without realising (unless you knew to use super())

cookieBanner pros:

naming would help users to understand that it's for the cookie banner

cons:

we could end up with lots of different blocks

36degrees commented 3 years ago

It may make sense to put it before the skip to main content link, as it’s not ‘navigation’ that it makes sense to bypass and we want to make sure users don't miss it.

Looking at the NHS and BBC websites, it looks like it’s before the skip link in both cases.

However, the current implementation on GOV.UK puts it after the skip link – between the skip link and the header.

hannalaakso commented 3 years ago

I did some investigation into potential options here:

Skip link and the cookie banner

WebAIM say that skip link should be one of the first things on the page:

Otherwise, users may not realize there is a “skip navigation” link there at all

I think having the skip link as the second item on the page, after the cookie banner, would be acceptable. We should keep an eye on this though since the number of links/buttons in the cookie banner increases the number of interactive elements to navigate prior to the skip link.

Proposal: Position the banner before the skip link to help users to discover it before they skip to the main content.

edit: Also the later accessibility clinic feedback on this was ambiguous.

Which GOV.UK Design System page template block should the cookie banner use?

The page template has a bodyStart block that we could use. It doesn’t contain any default content that you could accidentally override. It's also the first block inside <body>, whereas if we add a new cookieBanner block, it would need to be positioned after bodyStart (unless we wanted to rename bodyStart AND move it which would be a breaking change and might not work for some services who need to position certain content right after the opening <body> tag).

I can see that at least the Vulnerable People Service, Pay and Digital Marketplace already use bodyStart for a combination of cookie banner, CSP nonce, tracking code and one example of something that is visible/announced to users (other than cookie banner).

On the other hand, adding a new cookieBanner block would be similar to what we do with skipLink. If we think that most gov pages will have a cookie banner, it might make sense to single it out with its own block. But it would then be positioned after bodyStart (see above).

cookieBanner block would give more flexibility in some cases, for instance if you’re setting a cookie banner in your main template but then need to override/remove it on some pages. Using bodyStart for the cookie banner would be less convenient here.

Proposal: Let’s advise teams to put the cookie banner inside bodyStart. Inside that block, it should be positioned above any things that might be visible/announced to the user. This seems to be a convention already followed by teams. If we then find that there’s a need for cookieBanner block as teams need to override/modify the cookie banner etc., we could add that without it being a breaking change.

hannalaakso commented 3 years ago

Addition to the above: We're not going to mention in the guidance that the cookie banner

should be positioned above any things that might be visible/announced to the user

inside bodyStart. We don't know enough about the type of content that teams use bodyStart for so it's hard to say with certainty that the cookie banner should be above them. We can keep an eye on this to see if it comes up when the cookie banner is published.

hannalaakso commented 3 years ago

We've updated the draft guidance so this card is complete.

alphagov / govuk-frontend