Custom styling with CSS on Web Accessibility

Our app allows you to fully customize the appearance of the web accessibility by using custom CSS. Inside the web accessibility settings, you’ll find a CSS editor under the Style tab where you can add your own styles. These styles are applied directly to the web accessibility components loaded on your website or app.

This article explains how web accessibility is structured and how to target each element with CSS selectors.

Banner Architecture Overview

The entire consent system is loaded as a Web Component with the following root tag:

<pandectes-a11y></pandectes-a11y>

All web accessibility elements live inside this component. When writing CSS, you can optionally scope your rules under pandectes-a11y to avoid affecting other parts of your site.

Example:

* {
  font-family: Arial, sans-serif;
}

Banner Elements You Can Style

Web accessibility comprises two main elements, each of which can be styled independently.

1. Dialog

This is the dialog where all of the features of your widget are available.

Selector

.a11y-option-tile {

}

Example Customization

[data-role="notice"] {
  background-color: #ffffff;
  color: #333333;
  padding: 16px;
  border-top: 1px solid #e0e0e0;
}

2. Widget – Button Icon

This is the floating or embedded button that allows users to reopen the accessibility dialog.

Selector

button.widget {

}

Example Customization

button.widget {
  background-color: #000000;
  color: #ffffff;
  border-radius: 50%;
  width: 48px;
  height: 48px;
}

Conclusion

By using the selectors above, you can fully control the look and feel of every part of the web accessibility to match your brand and design system.

Updated on: 28/04/2026