Estilo personalizado con CSS en Web Accessibility

Nuestra app te permite personalizar por completo la apariencia de web accessibility mediante CSS personalizado. Dentro de los ajustes de web accessibility, encontrarás un editor de CSS en la pestaña Style donde puedes añadir tus propios estilos. Estos estilos se aplican directamente a los componentes de web accessibility cargados en tu sitio web o app.

Este artículo explica cómo está estructurado web accessibility y cómo apuntar a cada elemento con selectores CSS.

Resumen de la arquitectura del banner

Todo el sistema de consentimiento se carga como un Web Component con la siguiente etiqueta raíz:

<pandectes-a11y></pandectes-a11y>

Todos los elementos de web accessibility viven dentro de este componente. Al escribir CSS, puedes limitar opcionalmente tus reglas a pandectes-a11y para evitar afectar a otras partes de tu sitio.

Ejemplo:

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

Elementos del banner que puedes personalizar

Web accessibility consta de dos** elementos principales**, cada uno de los cuales se puede estilizar de forma independiente.

1. Dialog

Este es el cuadro de diálogo donde están disponibles todas las funciones de tu widget.

Selector

.a11y-option-tile {

}

Ejemplo de personalización

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

2. Widget – Button Icon

Este es el botón flotante o integrado que permite a los usuarios volver a abrir el cuadro de diálogo de accesibilidad.

Selector

button.widget {

}

Ejemplo de personalización

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

Conclusión

Con los selectores anteriores, puedes controlar por completo el aspecto de cada parte de web accessibility para que coincida con tu marca y tu sistema de diseño.

Actualizado el: 19/10/2026