As discussed in the article What the "EU Cookie Law" Means For Your Website, most websites, including the BBC News website, have chosen to use the Implied Consent method in becoming compliant with the EU directive. This means that website users who continue to use the BBC website have, in effect, given consent to the storage of BBC website cookies by their browser. And most websites that strive to be EU Cookie Law compliant allow the user to dismiss the notice of consent by clicking on a consent button or link such as "I agree" or "OK". This functionality is nearly always dependent on the website user's browser having JavaScript (JS) enabled.
However, for the vast proportion of websites that we checked, including the BBC News website, no notice of consent was displayed when JS was disabled. Since in most cases the storage of most cookies was not JS-dependent, this instantly makes these websites non-compliant with the EU Cookie Law for any website user with JS disabled. Some estimates put the proportion of users that have JS disabled at up to 2% of website visitors, and while this may not sound like much, would you happily have a door to a real-world shop that was too small for 2% of your potential customers?
A major premise of web design that follows website accessibility standards is that a website should offer the same basic functionality to all users, whether or not they have the same browser capabilities - an approach that is often termed "graceful degradation". In this context, many major websites' efforts in complying with the EU Cookie Law fall short. We believe that a solution for EU Cookie Law compliance needs to be independent of whether JS is enabled.
Methods of EU Cookie Law compliance employing the <noscript> tag would not allow users who have JS disabled but cookies enabled to give their consent or for any styling to properly integrate the solution into your website. In addition, having a notice inside a <noscript> tag at the top of every page could potentially damage your website's search engine rankings, since search engine robots would be able to read this text even when your website visitors cannot.
Example of Correct Implementation
In the example we're going to discuss, let's assume the website owner wants to use the Implied Consent method, and that they want the consent notice to persist until the website user clicks on a consent button or link. Most implementations of EU Cookie Law compliance consist of a consent notice that is floating over the web page, but in nearly all cases we have seen this is not displayed to the JS-disabled user. And in the event that it could be displayed to such users, it's unlikely in the extreme that both JS-enabled and -disabled users would experience the same consistency of design. Here are our recommendations for the structure of the consent notice:
- The notice of consent should occupy a relatively-positioned <div> that comprises part of the web page.
- The notice of consent should be of a contrasting or different color to the rest of the website - otherwise it may not be noticed by the website user. This is especially important in meeting website accessibility guidelines.
- In order to satisfy the EU directive and UK regulations, the consent notice should prominently link to details about your website's use of cookies (More Information).
When the page loads, we can use PHP (or equivalent) to check for a cookie that indicates whether or not the website user has already dismissed this notice. If the cookie is not present, the HTML page would contain the block of code that contains the consent notice, and vice versa. Here's how we recommend that the consent notice should function:
- The notice of consent should contain two different consent buttons - one that is hidden by default using a Cascading Style Sheet (CSS) and one that is displayed by default.
- The JS-disabled user will only see the consent button that is displayed by default, but when the user has JS enabled, the consent button that was hidden by default for JS-disabled browsers is displayed, using JS, and the one that was displayed by default for JS-disabled browsers is now hidden using JS.
- Because these two different consent buttons theoretically occupy the same location on the page, they must look identical and be positioned in exactly the same place so that the JS-enabled user does not notice a flicker while JS is momentarily hiding and displaying the two different buttons.
- When a JS-disabled user clicks on the consent button presented to them, a form is submitted that instructs the website's PHP code (or equivalent) to save the website user's preference in a cookie and refresh the page.
- When a JS-enabled user clicks on the consent button presented to them, the entire notice will instantly become hidden (without the page being refreshed) and a cookie saving the website user's preference is stored using JS.
- When a JS-enabled or -disabled user subsequently visits any page on the website they will no longer be presented with a notice of consent, since a cookie would now be present indicating that they have given consent.
The solution above works perfectly for website users who have browsers set to accept cookies. However, if cookies were not set to be accepted, in either of the above instances, the website user would continue to see the consent notice on every subsequent web page visited. We can detect if a user's browser is set to accept cookies using JS and present them with a notice to enable cookies, but if they do not have JS enabled we would not have this luxury. Instead, we could display a notice requesting the user enable JS, which would by default be displayed and hidden by JS in other circumstances, but we require the standard notice of consent to be displayed to JS-disabled browsers if cookies are enabled. We therefore came to the conclusion that we can not cater for browsers that have JS disabled and cookies disabled with the same standard with which we deal with all other users:
- When JS is enabled, we can hide the notice of consent using JS and CSS, and instead issue a notice to the effect that cookies need to be enabled and that to dismiss this notice the user needs to enable cookies and refresh the page. They would then be presented with the standard JS-enabled consent notice.
- If JS is disabled, the user will be presented with the standard JS-disabled consent notice. While clicking on the consent button will re-load the page, the form will not be able to set a cookie and the user will be continually presented with the consent notice.
While this way of catering for browsers that have both JS and cookies disabled is not perfect, these users are in the minority, and since they can not accept cookies there is no EU Cookie Law compliance issue to consider. In addition, their use of the website will not be affected in any way except where noted above.
