Login

Try consentmanager
Book a call

Trabajo con accesibilidad / WCAG

Por defecto, la capa de consentimiento está preparada para ser accesible para lectores de pantalla y herramientas similares, pero en algunos casos puede ser necesario realizar ajustes en la configuración del diseño.

Habilita la compatibilidad con las WCAG para los banners de cookies

Para habilitar la compatibilidad con las WCAG (Pautas de Accesibilidad al Contenido Web 2.2), inicia sesión en tu cuenta, ve a Menú > Diseños y edita el diseño correspondiente. Expande la configuración en «Mostrar configuración avanzada» y habilita las WCAG:

Cambios en las WCAG en la salida de la capa de consentimiento

Si la configuración de WCAG está habilitada para un diseño, se aplicarán los siguientes cambios a la capa de consentimiento:

  • La capa de consentimiento se envolverá en un elemento shadowRoot
  • Los titulares de la capa de consentimiento utilizarán los elementos <h1> y <h2> en lugar de <div>.
  • Los textos de los botones de alternancia utilizarán el elemento <label> en lugar de <div>
  • El menú de la capa de configuración personalizada utilizará el elemento <nav> en lugar de <div>.
  • Los elementos de verificación de la edad se añadirán con una etiqueta
  • Las tablas llevarán un título
  • Los elementos recibirán los atributos aria-label, aria-checked, aria-modal, role y otros similares.
  • La opción Gatekeeper está disponible (véase más abajo)

Opción de filtro

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 pulsa la tecla TAB (o un elemento de navegación similar en su teclado), el foco permanecerá siempre dentro de la capa de consentimiento y no saltará a otras posiciones dentro del sitio web.

Consideraciones de diseño

Ten en cuenta que los cambios técnicos también pueden requerir modificaciones adicionales en el propio diseño para que cumpla plenamente con las WCAG. Algunos ejemplos son:

  • Utiliza un tamaño de fuente adecuado (por ejemplo, em o pt en lugar de px).
  • Utiliza una tipografía sans serif que esté ampliamente disponible (por ejemplo, Times New Roman, Verdana, Arial, …)
  • Utiliza una combinación de colores y una relación de contraste que se distinga fácilmente (por ejemplo, una relación de contraste de 3:1 entre el texto y el fondo).
  • Utiliza un espaciado entre líneas que facilite la lectura del contenido (por ejemplo, una altura de línea de 1,5 em).

Además de los cambios puramente gráficos, algunos requisitos de las WCAG pueden obligarte a utilizar determinados ajustes en el diseño. Por ejemplo, para cumplir con los requisitos de las WCAG, es posible que tengas que habilitar los menús en el diseño de tu capa de consentimiento.

Más información

We do our best to keep this purely informative documentation up to date. However, if you notice that any of these guides need a little touch-up, let us know!