Cookie policy

Notes for developers

Ensure a hidden H2 is included at the top of the cookie policy message to improve accessibility by providing better context for the message and also to make it more discoverable by screen reader users.

Ensure that the close link contains understandable hidden text so that it it clear to the users that they are accepting cookies and closing the cookie message.

The default name for the cookie is cookie_decision but this can be changed as required by setting the data attribute data-cookie-name to the required value. If a custom name is used ensure that the serverside implementation matched and the setting is also set for the the accessibilty settings component.

Server-side implementation

There must be a server-side implementation to set a cookie so that the cookie message does not display for X number of months (by default this would be 13 months). When a user accepts the cookie the server-side solution must not take the user away from the page they were on. The JavaScript will hide the cookie policy message if one is found and the cookie has been set but due to the time it takes for assets to load users will momentarily see the message before the JavaScript removes it, please ensure that the message is removed server-side if the cookie had been set.

To match with the cookie set by the JavaScript ensure that the cookie is set with the following values:

Cookie name

cookie_decision

Value

True

Path

/

By default the JavaScript will set the cookie expiration date to 13 months. This can be changed by specifying the number of months in the data-cookie_expires attribute.

Controling cookie policy programatically

Cookie policy can now be closed programatically. The following method is available for use:

For example:

document.addEventListener( 'frameworkready', function () {
	FRAMEWORK.require([ 'blocks/m-cookie-policy' ], function ( mCookiePolicyModule ) {
		var mCookiePolicyEl = document.querySelector( '#cookiePolicyId' ),
			mCookiePolicyInstance = mCookiePolicyModule.initInstance( mCookiePolicyEl );		mCookiePolicyInstance.close();
	});
});

Changing locale settings

The JavaScript includes an alert for assistive technologies to highlight the cookie settings have been saved on closure of the cookie policy message. Please ensure the alert 'The cookie setting has been successfully saved' is translated in your locale.js file.

en: {
	mCookiePolicy : {
		successfullySaved : 'The cookie setting has been successfully saved.',
		failed : 'Cookies are not enabled so your preference could not be saved.',
	},
},

For more information on this, see our page on how to change locale settings within JavaScript.

---

Notes for testers

• The cookie policy message must clearly contain a link to the full cookie policy.
• When JavaScript is available and the user chooses to close the cookie policy. If cookies are enabled a cookie will be set with the expiry set to the chosen number of months, the cookie policy removed from the page without a page refresh and the closure of the cookie message announced to screen reader users.
• When JavaScript is not available and the user chooses to close the cookie policy the page should reload and should no longer contain the cookie policy message. A cookie must have been set with the expiry set to the chosen number of months.

---

Classes overview

The following table gives you a quick overview of the CSS classes that can be applied.

---

Keyboard operations

TAB

Tabbing to a link should make the link clearly visually different so that the focus point on the page is obvious to the user.

Enter

When JavaScript is available hitting enter on the accept and close link should cause a cookie to be set and the cookie policy to be closed without a page refresh.