> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.pandectes.io/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# ¿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](https://pandectes.io/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](/es/article/como-cambiar-al-nuevo-banner-o-volver-a-la-version-anterior-1wiw894/).

### 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](https://pandectes.io/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.

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

Más detalles: [Cómo usar el consentimiento obligatorio (modales) en el nuevo banner](/es/article/como-usar-el-consentimiento-forzado-modales-en-el-nuevo-banner-nx4oqp/).

#### "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:

1. Abre **Shopify Admin > Apps > Pandectes GDPR Compliance**.
2. Ve a **Cookie banner**.
3. Abre la pestaña **Content** y desplázate hasta **Links**.
4. 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)`.
5. 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)](/es/article/como-editar-los-textos-y-enlaces-del-banner-nueva-version-11xdtfs/).

### 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.

### Artículos relacionados

* [Cómo usar el consentimiento obligatorio (modales) en el nuevo banner](/es/article/como-usar-el-consentimiento-forzado-modales-en-el-nuevo-banner-nx4oqp/)
* [Cómo editar los textos y enlaces del banner (versión nueva)](/es/article/como-editar-los-textos-y-enlaces-del-banner-nueva-version-11xdtfs/)
* [Cómo cambiar al nuevo banner o volver a la versión anterior](/es/article/como-cambiar-al-nuevo-banner-o-volver-a-la-version-anterior-1wiw894/)