WCAG stands for Web Content Accessibility Guidelines. It is a collection of guidelines and standards provided to improve the accessibility of a website or web application for the visually or physically impaired. It works by enhancing the visual readability but also provides context for tools like screen readers.

As the users visit your website, they will be first greeted with a consent pop-up to collect their consent. All users must understand the information about cookies and submit consent using a keyboard, mouse, or other assistive technologies.

Below is a list of pop-up consent templates and the version since which the templates are adhering to the WCAG 2.1 accessibility standard:

The Overlay templates (Overlay, Overlay v2, and v3) appear on top of the page with a dark and slightly transparent background. This overlay effect indicates that the user cannot interact with the website before giving consent. This message is emphasized by adding a bounce effect when users click outside the modal to bring attention back to the pop-up.

A user should be able the navigate the consent pop-up without the need for a mouse. Therefore keyboard navigation is essential. All elements that the user can interact with within any form should be focusable with the keyboard TAB key or SHIFT + TAB. These could be links, buttons, tabs.

In the Overlay templates, we have also provided a trapping focus within the pop-up when it is visible on the screen. This trapping focus prevents the user from tabbing and getting focus on elements beyond the pop-up.

Styling of elements affects adherence to the WCAG. An example of this could be an interactable element like a link, identified by underlined text, differentiating color, text size, and font-weight. It is essential to keep these elements distinguishable and with proper contrast. Contrast is measured by the difference between the foreground element and the background.

In the above example, the darkening of the background resulted in better contrast for the white text. The text size can also change contrast, but not as much as color.

By default, the Overlay templates use colors with sufficient contrast for WCAG accessibility. When changing colors of elements, text, and background, keep this in mind if you would like to maintain the WCAG accessibility of the consent pop-up.

If you add new elements to the pop-up, add a proper title or aria-label attributes to interactable elements (links, buttons). Screen readers use these attributes to provide the visually impaired with the appropriate context.

Related articles: