With Complianz Privacy Suite, we aim to meet the WCAG 2.1 AA guidelines as created by W3C, for our generated documents and cookie banners. This means all default cookie banners, including elements, and documents with our Document CSS meet these guidelines and are updated when needed.
Before explaining what differences we made for this update, it will be helpful to quickly note the following;
By default, the newer default WordPress front-end will pass WCAG2.1 guidelines, for a minimum of the A rating. We opted to conform with a double A-rating, both will be extremely helpful in making the web accessible to your users. The problem lies in maintaining this conformity when using third party software, themes and scripts to build your website. These will include new CSS, libraries, and functionalities which might not pass the accessibility scan you might use. (We use wave.webaim.org). Therefore, accessibility with Complianz depends on using our cookie banner, and Document CSS which is shipped. Any modifications after might cause your rating to fall. To remove this obstacle, we used an Automattic theme for developers, to minimize interference from the theme and/or added libraries.
We have changed the following to our HTML mark-up and CSS for the 4.7.0. release;
- Color contrast for default templates. Subtle changes have been made to meet the requirements to service the color-blind and visually impaired, by improving contrast on the banners. The documents default to black and white.
- Restructuring form labels so they are recognized for keyboard users.
- Added icons for each external link to notify an exit off the page.
- Headings are correctly structured
- Removed justify on text to make it more readable
These actions will make your cookie banner and legal documents ready for WCAG2.1
Removing these changes
If you’re not happy with our approach, or you rather do it yourself. You can always design the cookie banner the way you want, by configuring it under cookie banner settings, with additional CSS if needed. You can also disable Document CSS under settings if you rather have your theme handle the styling part. This will remove the external link icons for example.