Just to make it clear – this are only my thoughts and by no means legal advice. I am not a lawyer but I guess I can have my opinion on the matter. With focus on accessibility and usability and other web-related factors, of course.
Why do we need cookie consent in the first place?
Well, you have probably heard of General Data Protection Regulation (GDPR) if you have been online for the past few years and one of the GDPR subjects covers also data that is collected with help of cookies.
I will not go into technical details of what cookies are and why are we even using them but let me just say that majority of all web functionalities still needs some kind of local storage and cookies are still the most popular way to store user settings, personalization, analytics, marketing and sometimes even some functional or content settings and data.
So, according to GDPR – in my understanding – we must get active user consent before we can set and use all cookies that are strictly and absolutely critical for the use of the webpage or web application. This is so called “opt-in” method – user must give active consent to the use of all non-critical cookies. And yes, Google Analytics cookie is not critical for the user (as much as website owners would like it to be).
So – every webpage or web application that has to follow GDPR (and to me it means all webpages that are targeting users from the European Union) has to collect consent from users before setting not-critical cookies.
Cookie consent is a dialog – webpage is asking user for active consent before it can use cookies
I think of cookie consent as a dialog. It is not enough to just inform users of our usage of cookies, we must ask them for permission before we can do it (yes, expect for the critical ones), so it sounds like a totally valid dialog to me.
So the dilemma here is – should we get the consent before we allow users to access our site? Will they be offended by this? Will they just leave the site and go somewhere else?
If we think of this dialog as a “real” dialog, then I guess best solution is to have an overlay and then a modal dialog where we ask the user for their consent and give them equal choices for denial or acceptance (user can also choose consent to different categories of cookies, like for example “I allow statistics but I deny marketing” etc.).
My major considerations and fears when using dialog to get cookie consent choices from users via dialog:
- will user hate it and just left the site because of dialog blocking the content to be seen and page be interacted with?
- will search engine punish our SEO efforts because we are using such a dialog before allowing them to “see” content?
- will assistive technology user be distracted even more by additional interaction?
Some important and difficult questions that require our attention and investigation, for sure.
What are others doing?
I like to see what “big players” are doing when it comes to such matters. They are for sure testing their user interfaces, asking their legal departments for proper solutions, hiring consultants and evaluating the results. And in some cases they are even authors of the legislation, so I think it is smart to see what they are doing.
I’ve decided to pick a short but representative list of mayor actors and just check what they have done and how their cookie consent is made. It was important to pick those that are targeted to European market and that really must comply to GDPR. At the same time I also picked those that are trying to opt-in as only an informative banner is not enough to really respect the GDPR in my opinion (and there are a lot of sites still just informing user of their cookie usage, so not adhering to GDPR if I may add my non-legal opinion).
Testing and checks included the following:
- checking the rendered DOM and defining it’s position (this is important for accessibility and also for search engine optimization),
- testing the rendered DOM with keyboard and screen-reader,
- checking for negative SEO signals and if search engines punish the banners, overlays or modals with cookie consent in some way.
Below are my findings (they can change with time, so it is crucial to say that tests were made 22th of July 2020):
BBC.com (British Broadcasting Corporation)
- Visually as banner, on top or in the bottom, but website content is behind an opacity overlay
- DOM for cookie consent is first child of document body
- keyboard focus set to cookie consent
- keyboard not trapped inside cookie consent, so it is possible to navigate page with screen reader
ICO.org.uk (Information Commissioner’s Office)
- Visually as banner, on left of the site, but website content is behind an opacity overlay
- DOM for cookie consent is second child of document body, just behind “skip to main content” link,
- keyboard focus not set – so defaults to body,
- keyboard not trapped inside cookie consent, so it is possible to navigate page with screen reader
Onetrust.com (one of cookie consent solution providers)
- Visually as banner, in the bottom of the site, but website content is behind an opacity overlay
- DOM for cookie consent is last child of document body,
- keyboard focus set on cookie notice,
- keyboard trapped inside cookie consent, so it is not possible to navigate the page before a cookie consent choice is made by the user
Cookiebot.com (one of cookie consent solution providers)
- Visually as banner, in the bottom of the site,
- DOM for cookie consent is first child of document body,
- keyboard focus not set – so defaults to body,
- keyboard not trapped inside cookie consent, so it is possible to navigate the page
Europa.eu (official site of European Union)
- Visually as banner, in the top of the site,
- DOM for cookie consent is second child of document body, just after some micro navigation banner, before “skip to main content” banner,
- keyboard focus not set – so defaults to body,
- keyboard not trapped inside cookie consent, so it is possible to navigate the page
ECHR.coe.int (European Court of Human Rights)
- Visually as banner, in the bottom of the site,
- DOM for cookie consent is actually positioned in the middle of the content
- keyboard focus not set – so defaults to body,
- cookie banner close button is not accessible with keyboard as non-semantic elements were used for button, no keyboard trap
Euroblind.org (blind and partially sighted people org. in EU)
- Visually as banner, in the bottom of the site,
- DOM for cookie consent is last child of the document DOM,
- keyboard focus not set – so defaults to body,
- cookie consent banner is last in keyboard tab order, no keyboard trap
Telenor.no (Norwegian telecommunications provider)
- Visually as modal dialog, in the center of the page, with an overlay behind it that covers the content,
- DOM for cookie consent is last child of the document DOM,
- keyboard focus set to cookie consent modal window,
- no keyboard trap, so it is possible to tab through content on the page with modal still opened
Telekom.com (Deutsche Telekom, German telecommunications provider)
- Visually as modal dialog, in the center of the page, with an overlay behind it that covers the content,
- DOM for cookie consent is last child of the document DOM,
- keyboard focus set to “Accept” button inside modal window,
- no keyboard trap, so it is possible to tab through content on the page with modal still opened
HSBC.co.uk (Bank in UK)
- Visually as modal dialog, in the center of the page, with an overlay behind it that covers the content,
- DOM for cookie consent is one of last children of the document DOM,
- keyboard focus set to cookie consent modal window,
- keyboard trap inside the consent modal window, so it is not possible to tab through content on the page before consent is decided
Unicreditgroup.eu (European bank)
- Visually as banner, on the right of the page, with an overlay behind it that covers the content,
- DOM for cookie consent is one of last children of the document DOM,
- keyboard focus not set, so defaults to body,
- no keyboard trap inside the consent banner, so it is possible to tab through content on the page
Nordea.com (Nordic financial company)
- Visually as modal dialog, in the center of the page, with an overlay behind it that covers the content,
- DOM for cookie consent is one of last children of the document DOM, content is hidden by screen-readers when modal is shown (aria-hidden=”true” on all of content behind the cookie consent modal),
- keyboard focus set to cookie consent button that accepts all cookies,
- keyboard trap inside the consent modal window, so it is not possible to tab through content on the page before consent is decided / or navigated to other pages in other languages
Thoughts and conclusion after tests
As written before tests – I have not included some prominent businesses and organizations that are not trying to be GDPR compliant (again, this is my personal opinion and I am not an expert in any legal matters).
- it is difficult to know the differences in bounce rate (users that navigate away) caused by the cookie consent for all of the sites, but we can probably assume that most of users will just want to get rid of it if it is in a modal and if it is in a banner it would probably just be ignored. I do not have any numbers to support this, but I’ve seen some similar user experience conclusions (opens in new window), and they are sounding pretty logical to me. To cite one of them: “…display cookie consent notices to their visitors. This has quickly led to users becoming fatigued with privacy notifications…” (source: (Un)informed Consent: Studying GDPR Consent Notices in the Field, opens in new window).
- search engines seems to understand and also ignore cookie consent markup when indexing the pages. I have not been able to find any traces of cookie consent when searching for the organizations with Google, and neither was I able to get some old indexed texts that would prioritize cookie consent texts over normal content. So, I guess, DOM position of cookie consent does not matter to the Search Engines at all and they seem to not index the cookie consent content at all.
- when I tested the pages with screen-reader I was actually disappointed a bit because many of implementations did not make the consents prominent enough. This can of course mean that they did not think of accessibility in the first place or maybe that they just did not test it well enough. There is of course also the question of importance of the cookie consents to the organization; do they really need the analytics and marketing (like majority of those using modal windows) or do they not care for them at all ( I guess than some public organizations can live with some other kind of visitor statistics just as well).
Nonetheless – there is, as always, room for accessibility improvements, and I think that all of them should test their websites with keyboard as I have discovered a lot of other problems too (missing focus indication for sighted keyboard users or for example tabbing through page behind a modal consent window etc.)
Personally I think best solution for website owners is a modal window with proper branding in the top (but not too much clutter) that is also automatically focused (not on the buttons but on the window itself – so that screen-reader can read it) and including a keyboard trap (so that keyboard users and mouse users are having same experience and has to make a choice). Content interaction should therefore not be possible before user decides to either accept cookies or deny them / choose them by some category).
The positive side here is that we are promoting active consent to the user and therefore respecting GDPR and at the same way not letting it be totally ignored (as it may happen with banner versions). But we all need more time to measure the effects and check the consequences. Again, just my private opinion, but I think that browsers should actually be the real cookie consent interface and it should not be up to the site owners, so that everybody would have equal opportunities and consistent user experiences.
And with current trends in browsers – when third party cookies are being blocked by default (opens in new window) it looks like something in this direction is actually happening and maybe just a matter of time.
But until then – we need an accessible cookie consent that should be a dialog between the user and the website owner, so that user has full control over cookies and so that owner has a possibility to be sincere about their intentions.
