Este artículo también está disponible en:

¿Es accesible el banner de cookies? WCAG 2.2 AA y ADA (versión nueva)

Resumen

El banner de cookies de Pandectes cuenta con la certificación WCAG 2.2 nivel AA. Zoonou Limited, una empresa independiente de pruebas de accesibilidad, lo auditó según WCAG 2.2, Section 508 y EN 301 549, y publicó los resultados en un informe de conformidad VPAT 2.5.

La auditoría cubre todas las capas que puede abrir un visitante: el aviso de cookies, las preferencias y los detalles de las cookies. Incluyó pruebas manuales con los lectores de pantalla JAWS, NVDA y VoiceOver, la lupa de Windows, el control por voz Dragon, y VoiceOver y TalkBack en móvil. Todos los criterios de WCAG 2.2 de los niveles A y AA se calificaron como Supports o Not Applicable.

Puedes leer la declaración de conformidad completa en nuestro sitio web: Conformidad en accesibilidad.

Nuevo banner. Para tiendas con la insignia New version en Cookie banner. En el banner Legacy, consulta Cómo cambiar al nuevo banner o volver a la versión anterior.

WCAG, ADA y tu tienda

La ADA no tiene un certificado oficial para sitios web. En Estados Unidos, WCAG es el referente más utilizado cuando la ADA se aplica a sitios web. En la Unión Europea, la Ley Europea de Accesibilidad remite a EN 301 549, que incluye WCAG. El banner cumple con ambos.

La certificación cubre el propio banner. Tu tema, el contenido de los productos y el checkout deben cumplir las pautas por su cuenta. Este artículo es información, no asesoramiento jurídico.

Si compartes nuestros resultados con un auditor, la página Conformidad en accesibilidad es el mejor enlace que enviarle.

Hallazgos habituales de auditorías, explicados

Los escáneres automáticos y algunas auditorías señalan los mismos tres puntos. Así se comporta el banner y qué puedes cambiar.

"El foco no queda atrapado dentro del banner"

Por defecto, el banner es no modal. Los visitantes pueden seguir leyendo y navegando por la página mientras está abierto, así que el teclado pasa del banner a la página y viceversa. Es intencionado: WCAG solo exige que el foco se mantenga dentro de un diálogo cuando este bloquea el resto de la página, y el criterio 2.1.2 (sin trampa de teclado) exige que un visitante siempre pueda mover el foco fuera de un contenido no modal.

Si quieres que los visitantes tomen una decisión antes de usar la página, activa el consentimiento forzado. El banner se abre entonces como diálogo modal: la página que queda detrás se bloquea, y Tab y Shift + Tab permanecen dentro del banner hasta que el visitante elige.

Abre Shopify Admin > Apps > Pandectes GDPR Compliance.
Ve a Cookie banner.
Abre la pestaña Advanced.
En Enforced consent (modals), activa Enforced consent (modals).
Opcional: activa Lock background scroll.
Guarda.

Más detalles: Cómo usar el consentimiento forzado (modales) en el nuevo banner.

"El foco no pasa a la página cuando se cierra el banner"

Cuando se abre el banner, el foco del teclado pasa a él, así que los usuarios de teclado y de lectores de pantalla empiezan en el mensaje del banner.

Cuando el banner se cierra, el foco sale del banner y vuelve a la página:

Si el visitante abrió el banner desde Consent widget o desde un enlace de reapertura, el foco vuelve a ese widget o enlace.
En la primera visita, nada de la página tenía el foco antes del banner, así que la siguiente pulsación de Tab continúa desde la posición del banner en la página.

El foco nunca se queda en un elemento oculto, y ninguna parte de la página se omite. Si quieres que el foco caiga en un elemento concreto al cerrarse el banner (por ejemplo, el enlace Skip to content de tu tema), eso es un cambio en tu tema, no en el banner.

"Los enlaces no anuncian que abren una pestaña nueva u otro sitio web"

Los enlaces del banner son los que configuras en la pestaña Content bajo Links:

Privacy policy y Imprint se abren en la misma pestaña por defecto. Solo se abren en una pestaña nueva si activas Always open links in a new tab.
El enlace Google partners siempre abre la página de Google en una pestaña nueva.
En las preferencias, los enlaces Learn more about provider abren la página del proveedor en una pestaña nueva.

Abrir un enlace en una pestaña nueva sin aviso no es un fallo de WCAG 2.2 de nivel A o AA, pero un aviso ayuda. Puedes añadirlo de dos maneras:

Abre Shopify Admin > Apps > Pandectes GDPR Compliance.
Ve a Cookie banner.
Abre la pestaña Content y desplázate hasta Links.
Desactiva Always open links in a new tab para que tus propias páginas se abran en la misma pestaña, o añade el aviso al texto del enlace, por ejemplo Privacy policy (opens in a new tab).
Guarda y repite el cambio en All settings > Translations para tus otros idiomas.

Más detalles: Cómo editar los textos y enlaces del banner (nueva versión).

Mantén el banner accesible después de personalizarlo

La certificación se aplica al banner tal como lo entregamos. Algunos cambios pueden reducir el contraste o la legibilidad:

Colors: mantén suficiente contraste entre el texto y el fondo, y entre los botones y sus etiquetas. En caso de duda, usa un preajuste de la pestaña Style.
Custom styling (CSS): no ocultes los contornos de foco, no reduzcas el texto por debajo de un tamaño legible ni ocultes botones.
Texts: mantén las etiquetas de los botones claras, como Accept, Decline y Preferences.

Comentarios

Si tú o tu auditor encontráis algo del banner que resulte difícil de usar, contacta con nosotros a través del chat de la app. Preferimos saber de una barrera antes que un visitante se vaya por culpa de ella.