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

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

Descripción general

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

La auditoría abarca todas las capas que un visitante puede abrir: el aviso de cookies, las preferencias y los detalles de las cookies. Incluyó pruebas manuales con los lectores de pantalla JAWS, NVDA y VoiceOver, Windows Magnifier, 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: Accessibility conformance.

Nuevo banner. Para las tiendas que tienen la insignia New version en Cookie banner. Si usas el Legacy Banner, 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 la referencia más utilizada cuando la ADA se aplica a sitios web. En la Unión Europea, la Ley Europea de Accesibilidad remite a la EN 301 549, que incluye WCAG. El banner cumple ambas.

La certificación cubre el banner en sí. Tu tema, el contenido de tus productos y el proceso de compra siguen debiendo cumplir las pautas por su cuenta. Este artículo es informativo y no constituye asesoramiento jurídico.

Si compartes nuestros resultados con un auditor, la página Accessibility conformance es el mejor enlace que puedes enviarle.

Hallazgos habituales de las auditorías, explicados

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

"El foco no queda atrapado dentro del banner"

De forma predeterminada, el banner es no modal. Los visitantes pueden seguir leyendo y navegando por la página mientras está abierto, por lo que el teclado pasa del banner a la página y viceversa. Esto es intencionado: WCAG solo espera que el foco permanezca dentro de un cuadro de diálogo cuando este bloquea el resto de la página, y el criterio de éxito 2.1.2 (No Keyboard Trap) 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 poder usar la página, activa el consentimiento obligatorio. El banner se abre entonces como un cuadro de diálogo modal: la página que hay detrás queda bloqueada, y Tab y Shift + Tab permanecen dentro del banner hasta que el visitante toma una decisión.

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 obligatorio (modales) en el nuevo banner.

"El foco no se mueve a la página después de que se cierra el banner"

Cuando el banner se abre, el foco del teclado se mueve a su interior, de modo 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 el Consent widget o desde un enlace de reapertura, el foco vuelve a ese widget o enlace.
En la primera visita, ningún elemento de la página tenía el foco antes del banner, por lo que la siguiente pulsación de Tab continúa desde la posición del banner en la página.

El foco nunca permanece en un elemento oculto y no se omite ninguna parte de la página. Si quieres que el foco llegue a un elemento concreto después de que se cierre el banner (por ejemplo, el enlace Skip to content de tu tema), ese es un cambio en tu tema, no en el banner.

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

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

Privacy policy e Imprint se abren en la misma pestaña de forma predeterminada. Solo se abren en una pestaña nueva si activas Always open links in a new tab.
El enlace de 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 avisar no es un fallo de WCAG 2.2 de nivel A ni AA, pero un aviso resulta útil. Puedes añadir uno 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 Política de privacidad (se abre en una pestaña nueva).
Guarda y luego repite el cambio en All settings > Translations para tus otros idiomas.

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

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:

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

Comentarios

Si tú o tu auditor encontráis algo en el banner que resulte difícil de usar, contacta con nosotros a través del chat de la app. Preferimos conocer una barrera antes que un visitante se marche por su causa.