Guía fácil de las WCAG para hacer tu producto digital accesible

Todo lo que necesitas saber sobre las Pautas WCAG A y AA en lenguaje accesible.

Hace años que el término “accesibilidad”, suena cada vez más y más fuerte, y aunque muchos diseñadores de producto creíamos que hacer un site accesible era utilizar colores contrastados y cuerpos grandes, la realidad se impone a la ficción, y es innegable que diseñar accesiblemente va mucho más allá, este artículo está aquí para intentar definir de una manera fácil los requisitos AA de las WCAG.

El diseñador UX/UI o diseñador de producto del 2025 tiene que poseer el diseño accesible como una skill más dentro de su repertorio, porque diseñar accesiblemente requiere decisiones previas mucho antes de escoger un color o un cuerpo tipográfico. Por si aún lo dudas, la realidad es que la ley pica a nuestra puerta, y la ley 11/23 que se basa en la directiva Europea 2019/882 (European Accessibility Act EAA) determina que a partir del 28 de junio de 2025 todo servicio/producto digital de nueva creación ha de cumplir los requisitos de accesibilidad, si no se enfrentará a posibles multas. Pero más allá de las multas, ¿Quieres que tu producto o diseños sigan excluyendo a alguna parte de los usuarios?

¿Por qué hacer tu producto digital accesible?

A nivel global, nuestra población es una población envejecida. Teniendo en cuenta los bajos índices de natalidad, esto solo va a ir a más, por ello, en unos años, nuestra mayoría de  usuarios quizás requieran de niveles más altos de accesibilidad.

Una persona discapacitada tiene prácticamente las mismas necesidades que una persona que no tiene ninguna discapacidad; por lo tanto, debería poder acceder a cualquier servicio en internet. Hace la compra online, necesita comprar unas deportivas o suscribirse a un periódico digital, entre otros. Deberíamos ver sus limitaciones como una realidad más que nos impone retos adicionales para llegar a soluciones de diseño al mismo nivel que el resto de requerimientos.

Actualmente, el 96% de sites tienen errores de accesibilidad (según un estudio de WebAIM)

El 16 % de la población cuenta con una discapacidad reconocida, y no solo eso. Cualquier persona, como tú y como yo, puede necesitar funcionalidades accesibles en un momento dado de su vida, y si me permites, en un momento dado de su día a día. Si quieres saber más sobre esto, te recomiendo mi artículo Nuestro Futuro solo puede ser accesible.

La UX y la accesibilidad están estrechamente relacionadas. Un site no puede tener una buena UX si no es accesible y la accesibilidad requiere de una buena UX para que esta no suponga ninguna traba para el usuario.

¿Por dónde empezar?

Entender que la accesibilidad no solo es un requisito de diseño.

Has de conocer las realidades y las necesidades de personas diversas y cómo estas se relacionan con la tecnología. Conoce sus herramientas y cómo se relacionan con ellas.

Imagen de Unsplash

Integra a personas diversas en el proceso. Desde la fase de Discovery, hasta el QA final. En interactius tenemos un área de Research y podemos ayudarte con ello.

Entender que rehacer un site para hacerlo accesible es mucho más costoso que hacerlo accesible de inicio.

Asumir que un site accesible requiere de un coste más elevado que un site no accesible. Ejemplo: si tienes un buscador en tu eCommerce, no es lo mismo diseñar y desarrollar un buscador básico, que un buscador que ofrece funcionalidades que cubren las necesidades de todas las personas.

¿Qué son las WCAG?

(Web Content Accessibility Guidelines)

Son pautas desarrolladas por el W3C para desarrollar sitios más accesibles. Actualmente, la versión vigente son las WCAG 2.2, pero ya se está trabajando en la versión 3.

Niveles de conformidad

• A - Nivel básico (31 criterios)
• AA - Nivel recomendado (24 criterios + criterios A) - El nivel que deberíamos cumplir en la mayoría de casos.
• AAA - Nivel máximo de accesibilidad. Solo recomendado para sitios con necesidades especiales. (31 criterios + criterios A y AA)

Organización de las WCAG

Están organizados en 4 principios:

1. Perceptible: Nuestro sitio ha de ser consumido por personas con diferentes necesidades, también por robots. Por eso siempre hemos de proporcionar alternativas para aquellas personas que no pueden utilizar alguno de sus sentidos.

2. Operable: Los diseñadores hemos de incorporar elementos de interacción y navegación para aquellas personas con capacidades diversas. Ejemplo: establecer un estado focus para botones e inputs que visualicen el foco en la navegación por teclado.

3. Comprensible: La persona que accede a nuestro sitio ha de entender lo que le estamos explicando, además de que debemos ofrecer información de ayuda para rellenar campos requeridos. Ejemplo: suggestion texts en los inputs. 

4. Robusto: El contenido debe ser accesible en una variedad de dispositivos y tecnologías de asistencia. Nuestro contenido ha de ser compatible con herramientas actuales y futuras.

El Kit de la cuestión. Pautas que hemos de cumplir para alcanzar el requisito AA en lenguaje accesible. 

Bonus track - Etiqueta que identifica aquellas pautas WCAG que 100% son responsabilidad del equipo de UX-UI. (Focus UX/UI)

NIVEL A - Pautas

1.1.1 Contenido no textual - Focus UX/UI

Debes presentar el contenido no textual de maneras alternativas para que puedan acceder todas las personas. Tales como audio, textos ampliados, braille o símbolos o textos simplificados.

1.2.1 Audio solo o video solo (grabado)

Proporciona alternativas de acceso a vídeo o audio, tales como transcripción o descripción que sea equivalente al contenido original.

1.2.2 Subtítulos (grabado)

Proporciona subtítulos en los videos proporcionados en tu sitio.

1.2.3 Audiodescripción o medio alternativo (grabado)

Ofrece un texto alternativo que describa el video o un audiodescripción del mismo.

1.3.1 Información y relaciones

Debes presentar la información visual (tablas, listas, encabezados, titulares) de una manera estructurada para que estos elementos puedan ser interpretados de manera adecuada por los lectores de pantalla. 

Ejemplo: <h1>, <h2>, <h3>, <label>, etc. 

1.3.2 Secuencia significativa

Cuando la secuencia de lectura afecta al significado, se ha de definir el orden correcto de lectura. 

1.3.3 Características sensoriales

Las características determinadas para diferenciar los componentes  no pueden basarse en elementos sensoriales. 

Ejemplo incorrecto: “botón rojo” = “botón de error”

1.4.1 Uso de color - Focus UX/UI

No deberías utilizar el color como único medio para transmitir información, indicar una acción, responder o distinguir un elemento visual. Debes acompañarlo de etiquetas, literales o elementos visuales que transmitan la información del mismo modo.

1.4.2 Control del sonido - Focus UX/UI

Si el audio de un sitio suena más de 3 segundos automáticamente, debemos proporcionar un control de audio que posibilite silenciarlo al margen de los controles de audio del sistema.

2.1.1 Teclado

El contenido ha de ser operable con teclado; le hemos de ofrecer acceso a todas las funcionalidades de nuestro site.

2.1.2 Sin trampas para el foco del teclado

Ofrece posibilidades de poner foco y quitar foco utilizando el teclado. Si es necesario, informa al usuario del método para mover dicho foco.

2.1.4 Atajos de teclado

Si se implementan atajos de teclado, ofrece la posibilidad de desactivarlos o designarlos por parte del usuario.

2.2.1 Tiempo ajustable - Focus UX/UI

Si en el sitio web se implementan límites de tiempo, se han de ofrecer posibilidades para que el usuario lo pueda desactivar, ajustar o pedir una extensión del mismo. 

Ejemplo: En las tiendas online suele haber Sliders HERO que muestran elementos o promociones destacadas; estas han de permitir volver atrás o adelante, además de informar en qué punto estás.

2.2.2 Poner en pausa, detener, ocultar - Focus UX/UI

Debes posibilitar el control de los elementos en movimiento por parte del usuario.

2.3.1 Umbral de tres destellos o menos - Focus UX/UI

No deberías diseñar un contenido que parpadee más de 3 veces por segundo. 

2.4.1 Evitar bloques

Ofrece la posibilidad de saltarse bloques de contenido en nuestro sitio. Una buena práctica sería crear bloques de contenido. 

Ejemplo: Menú principal, categorías principales, promociones destacadas, etc. Antes de leer cada ítem que compone cada bloque, estos bloques de contenido actuarán como índice indicador.

2.4.2 Titulado de páginas

Los títulos de las páginas deben ser descriptivos y claros para el usuario. 

Ejemplo: Si estamos en una eCommerce, se recomienda que las parrillas posean el título de la categoría de ítems.

2.4.3 Orden del foco

Establece un orden de foco que no tiene por qué ser deducible mediante el diseño. Este ha de estar definido en base a su significado y operabilidad.

2.4.4 Propósito de los enlaces (en contexto) - Focus UX/UI

Debes proporcionar un texto lo suficientemente descriptivo para reflejar el propósito del mismo.  Asimismo, si este va acompañado de un link, este puede ayudar a concretar la acción que se va a llevar a cabo.

2.5.1 Gestos del puntero - Focus UX/UI

Debemos posibilitar una navegación alternativa a aquellos elementos que requieran una navegación gestual.

2.5.2 Cancelación del puntero - Focus UX/UI

Debes garantizar que los usuarios puedan cancelar una acción activada mediante el puntero (como un clic del mouse, un toque en una pantalla táctil o el uso de un lápiz digital), para evitar activaciones accidentales.

2.5.3 Etiqueta en el nombre

Los componentes de la interfaz que poseen etiquetas que incluyen texto o imágenes de texto, se recomienda que su contenido contenga el texto que está presentando visualmente.

2.5.4 Actuación por movimiento - Focus UX/UI

Debe posibilitarse la desactivación de aquellas funcionalidades que pueden ser operadas mediante movimiento del usuario o del dispositivo desde el que se accede. 

Ejemplo: si en un reproductor de música permitimos saltar de canción con un gesto con la mano, esta acción debe posibilitarse a su vez con un botón en la interficie.

3.1.1 Idioma de la página

El idioma predeterminado de la página puede ser determinado por el software.

3.2.1 Al recibir el foco - Focus UX/UI

El foco no debe ejecutar una acción. Un cambio de contenido sin el consentimiento del usuario puede provocar desorientación.

3.2.2 Al recibir entradas - Focus UX/UI

Al introducir información en un campo, no dirijas a otro sitio sin previa confirmación del usuario. 

Ejemplo: si al rellenar un último campo de un formulario, el usuario no ha hecho clic en “Siguiente”, no redirijas automáticamente.

3.2.6 Ayuda consistente - Focus UX/UI

Si ofrecemos un acceso a la ayuda en nuestro sitio, debemos ubicar siempre en el mismo lugar de cada una de las pantallas donde aparece. 

3.3.1 Identificación de errores - Focus UX/UI

Si en la entrada de datos el sistema detecta un error, se debe identificar el elemento erróneo, así como informar del motivo del error. 

Ejemplo:

3.3.2. Etiquetas o instrucciones - Focus UX/UI

Debemos proporcionar las indicaciones o etiquetas necesarias para la introducción de datos correctamente.

3.3.7 Entrada redundante - Focus UX/UI

Si el usuario ha facilitado cierta información en un proceso y luego el sistema la vuelve a requerir, dicha información deberá ser sugerida por el sistema.

4.1.2 Nombre, función, valor

Hemos de garantizar que los elementos interactivos de una página web (como botones, formularios y enlaces) sean correctamente interpretados por lectores de pantalla y otras tecnologías de asistencia, definiendo un nombre claro, una función  y un valor correcto.

NIVEL AA - Pautas

1.2.4 Subtítulos (En directo)

Se proporcionan subtítulos para contenido emitido en directo.

1.2.5 Audiodescripción (grabado)

Se incluye audiodescripción en vídeos grabados proporcionados en el sitio.

1.3.4 Orientación de la pantalla - Focus UX/UI

No se obliga a consumir el contenido en vertical o vertical. 

Ejemplo: no serían una buena práctica aquellos sites que solo tienen disponible una versión en vertical u horizontal.

1.3.5 Identificación del propósito del campo

Los campos requeridos en un formulario han de tener un propósito identificable y accesible por las diferentes tecnologías, para que así, se pueda sugerir el autocompletado o procesamiento automático.

1.4.3 Contraste (mínimo) - Focus UX/UI

Los textos menores de 18pt han de tener un contraste mínimo de 4,5:1, por debajo han de alcanzar un contraste mínimo de 3:1

1.4.4 Cambio del tamaño del texto - Focus UX/UI

El texto ha de poder agrandarse hasta un 200% sin productos de apoyo y sin pérdida de contenido o funcionalidad.

1.4.5 Imágenes de texto

Debemos evitar el uso de imágenes que contengan texto cuando el mismo efecto visual puede lograrse con texto real.

1.4.10 Reajuste de elementos - Focus UX/UI

Reajuste de elementos. Este criterio garantiza que los sitios web sean responsivos y adaptables para que los usuarios puedan aumentar el tamaño del contenido sin perder información ni funcionalidad. En vertical una anchura equivalente a 320 píxeles y en horizontal con una altura equivalente a 256 px.

1.4.11 Contraste no textual - Focus UX/UI

Algunos elementos contiguos que no son textos,  han de tener como mínimo un contraste de 3:1 entre sus colores. Tales como, componentes u objetos gráficos.

Excepción: No tienen la obligación de pasar este ratio los campos deshabilitados, interacciones sobre el componente principal, logotipos, banderas, gradientes o fotografías.

1.4.12 Espaciado del texto - Focus UX/UI

Espaciado del texto adecuado para garantizar su accesibilidad:

• Entre líneas al menos 1.5 veces el tamaño de la fuente.
• Entre párrafos al menos 2 veces el tamaño de la fuente.
• Interletraje al menos 0.12 veces el tamaño de la fuente.
• Entre palabras al menos 0.16 veces el tamaño de la fuente.

1.4.13 Contenido al pasar el cursor (hover) o al recibir el foco (focus) - Focus UX/UI

Cuando un contenido, al pasar el puntero o al recibir foco, muestra un contenido adicional, se han de cumplir 3 condiciones:

• Descartable: Hay un elemento para descartar el contenido (Por ejemplo una X)
• Desplazable: si el puntero (hover) activa su visualización, este ha de mantenerse visible mientras el puntero esté sobre el elemento.
• Persistente: La información mostrada se mantiene hasta que el puntero se desplaza por encima, hasta que el usuario lo descarta o la información deja de ser válida.

Ejemplo: Los supermenús desplegados al hacer hover.

2.4.5 Múltiples vías - Focus UX/UI

Se ha de facilitar el acceso a una página web mediante más de un único camino. Ejemplo: En eCommerce, debemos poder llegar a un único producto mediante diferentes vías. Una puede ser una parrilla de categoría, otra, un producto destacado en la home, otra, el buscador y, por último, un producto relacionado con el final de una PDP de otro producto.

2.4.6 Encabezados y etiquetas - Focus UX/UI

Debemos definir el tema o propósito de un elemento mediante los encabezados o etiquetas.

2.4.7 Foco visible - Focus UX/UI

Aquellos elementos que son operables con teclado deben poder mostrarse con el indicador de foco.

2.4.11 Foco no oculto (mínimo) 

Hemos de prestar especial atención a los modales que aparecen sobre contenidos, el foco no puede transcurrir por la página de detrás. También, a los elementos sticky que se muestran superpuestos sobre la página y pueden ocultar elementos con foco.

2.5.7 Movimientos de arrastre - Focus UX/UI

Todos aquellos componentes que requieran un movimiento de arrastre deben poder operar a su vez con un puntero sencillo. 

Ejemplo: En los filtros de resultados de la mayoría de eCommerce tenemos a disposición un slider de rango de precio. Debemos posibilitar que este sea operable con clic, o bien que tenga un input en el from y to adicional.

2.5.8 Tamaño de área de interacción (mínimo) - Focus UX/UI

El tamaño mínimo de las áreas de interacción no puede ser inferior a 24x24px.

3.1.2 Idioma de las partes

Si dentro de un sitio tenemos algún contenido en otro idioma, nombres propios, términos técnicos, entre otros, estos han de ser etiquetados mediante el atributo idioma para que los lectores puedan interpretarlos de manera adecuada.

3.2.3 Navegación coherente - Focus UX/UI

Los elementos de navegación de un sitio siempre se deben de ubicar en el mismo sitio a lo largo de todas sus páginas. 

Ejemplo: un menú burguer, si en la home se ubica en la parte superior izquierda, en las páginas detalle ha de estar ubicado en el mismo sitio.

3.2.4 Identificación consistente - Focus UX/UI

Los elementos que tienen una funcionalidad concreta dentro de un sitio han de ser iguales. Ejemplo: Si en la home tenemos un acordeón que se despliega con un símbolo “+”, en la sección Faqs, si tenemos un grupo de acordeones, estos se han de desplegar con el mismo elemento.

3.3.3. Sugerencias ante errores - Focus UX/UI

Si el sistema detecta un error automáticamente en la entrada de datos y es capaz de sugerir la corrección del mismo, se deben proporcionar alternativas. 

Ejemplo:

3.3.4 Prevención de errores (legales, financieros, datos) - Focus UX/UI

Para aquellos sitios en los cuales se traten temas legales y financieros, que manejen datos del usuario, información confidencial, entre otras, debemos proporcionar mecanismos para deshacer o cancelar envíos, detectar errores, o herramientas de  revisión y corrección.

3.3.8 Autenticación accesible (mínima) - Focus UX/UI

No debemos incluir pruebas de funciones cognitivas para ningún paso en un proceso de autenticación. 

Ejemplo de pruebas de funciones cognitivas: Reconocer objetos, resolver un acertijo, etc.

4.1.3 Mensajes de estado

Los mensajes de estado deben ser accesibles por las tecnologías de asistencia sin necesidad de que el usuario deba poner foco en ese elemento.

Como habrás podido deducir, cumplir con todas las pautas no es algo sencillo, por eso es necesario que las empresas y sus equipos empiecen a tener una mirada sólida hacia la accesibilidad y a las necesidades de sus usuarios. Integrar esta perspectiva en fases tempranas del desarrollo de tu producto digital es clave para reducir costes y ganar impacto. 

¿Necesitas ayuda? En Interactius estamos aquí para acompañarte en el proceso. Auditar tu producto actual, investigar las necesidades de todos tus usuarios, hasta a diseñar o rediseñar la experiencia de tu producto digital, tu ecommerce o app.

Si te interesa el tema, sigue profundizando en artículos sobre accesibilidad en nuestro blog:

Nuestro futuro solo puede ser accesible
Sistema de diseño universal, accesible e inclusivo, ¿cómo conseguirlo?

Fuentes:

https://olgacarreras.blogspot.com/2024/02/libro-accesibilidad-web-wcag-22-de.html https://www.w3.org/TR/WCAG22