Trabajar con Accesibilidad / WCAG
De forma predeterminada, la capa de consentimiento está preparada para ser accesible para lectores de pantalla y herramientas similares, pero en algunos casos pueden ser necesarios ajustes en la configuración de diseño.
Habilitar la compatibilidad con WCAG para los banners de cookies
Para habilitar el soporte para WCAG (Pautas de Accesibilidad al Contenido Web 2.2), inicie sesión en su cuenta y vaya a Menú > Diseños y edite el diseño correspondiente. Expanda la configuración en "Configuración de la caja" y habilite WCAG:
Cambios de WCAG en la salida de la capa de consentimiento
Si la configuración WCAG está habilitada para un diseño, se aplicarán los siguientes cambios a la capa de consentimiento:
- La capa de consentimiento estará envuelta en un elemento shadowRoot
- Los titulares en la capa de consentimiento utilizarán el elemento y en lugar de
- Los textos alternados utilizarán elementos en lugar de
- El menú en la capa de configuración personalizada utilizará el elemento en lugar de
- Los elementos de verificación de edad se adjuntarán con una etiqueta
- Las tablas estarán subtituladas
- Los elementos recibirán aria-label, aria-checked, aria-modal, role y atributos similares.
- La opción de portero está disponible (ver a continuación)
Opción de portero
Cuando WCAG está habilitado, también se puede habilitar la opción Gatekeeper. Esto evita que la capa de consentimiento pierda el foco: si el usuario presiona la tecla TAB (o un elemento de navegación similar en su teclado), el foco siempre permanecerá dentro de la capa de consentimiento y no saltará a posiciones dentro del sitio web.
Consideraciones de diseño
Tenga en cuenta que los cambios técnicos también pueden requerir cambios adicionales en el diseño en sí para cumplir totalmente con las WCAG. Algunos ejemplos incluyen:
- Usando un tamaño de fuente adecuado (por ejemplo, em o pt en lugar de px)
- Utilizando una tipografía sans serif ampliamente disponible (por ejemplo, Times New Roman, Verdana, Arial, ...)
- Utilizar una relación de color y contraste que se pueda distinguir fácilmente (por ejemplo, una relación de contraste de 3:1 entre el texto y el fondo)
- Utilice un espaciado de texto que permita una fácil lectura del contenido (por ejemplo, una altura de línea de 1.5 em)
Además de los cambios puramente gráficos, algunos requisitos WCAG pueden requerir que utilices ciertas configuraciones en el diseño. Por ejemplo, para cumplir con los requisitos WCAG, es posible que debas habilitar menús en el diseño de la capa de consentimiento.
Seguí leyendo
- Directrices WCAG en w3.org: https://www.w3.org/TR/WCAG22/
