Conformidad con WCAG: Cuatro principios para la accesibilidad digital

Si te preocupa la accesibilidad web, probablemente hayas oído hablar de la Ley de Estadounidenses con Discapacidades (ADA)(opens in a new tab) — legislación federal de EE. UU. que prohíbe la discriminación contra personas con discapacidad por parte de organismos gubernamentales y empresas del sector privado.

Aunque la ADA se redactó antes de que la mayoría de las empresas estuvieran en la web, ahora se acepta comúnmente que se aplica tanto a la accesibilidad de los espacios físicos como a las propiedades digitales como sitios web, aplicaciones web y aplicaciones móviles.

El Departamento de Justicia (DOJ) recomienda evaluar el contenido según las Pautas de Accesibilidad para el Contenido Web (WCAG)(opens in a new tab), los estándares internacionales de accesibilidad digital. Una actualización reciente del Título II de la ADA ahora establece que WCAG 2.1 Nivel AA es el estándar para gobiernos estatales y locales. Aunque el Título III de la ADA no tiene estándares explícitos para la accesibilidad digital, seguir la última versión de WCAG puede ayudar a cumplir con la normativa.

¿Qué es la conformidad con WCAG? 

En la industria de la accesibilidad digital se suele hablar de cumplimiento de WCAG, pero el término más preciso es conformidad con WCAG. WCAG es un conjunto de directrices voluntarias, no una ley, lo que significa que no es algo con lo que se pueda cumplir. Sin embargo, sí se puede conformar a las directrices incluidas en WCAG.

En pocas palabras, la conformidad con WCAG significa seguir las directrices tanto como sea posible. Puede ser útil establecer un objetivo de conformidad para ayudarte a crear un sitio web o una app móvil más accesible y mejorar el cumplimiento de las leyes nacionales e internacionales de accesibilidad.

¿Es obligatorio el cumplimiento de WCAG para mi contenido digital?

La respuesta corta es sí. Todos los sitios web propiedad de organizaciones estadounidenses y/o utilizados por ciudadanos estadounidenses están bajo el ámbito de la ADA. WCAG 2.1 es el estándar de facto que utiliza el sistema judicial estadounidense para evaluar el cumplimiento del Título II de la ADA. 

Esto es una novedad desde abril de 2024. Antes de una nueva norma publicada por el Departamento de Justicia(opens in a new tab), el estándar efectivo de conformidad era WCAG 2.0. Para el cumplimiento general, la mejor práctica es seguir la versión más reciente de las directrices, actualmente WCAG 2.2.

Es importante reconocer que la ADA se aplica a todas las organizaciones y a todo tipo de contenido digital que utilicen. Los organismos gubernamentales han opinado regularmente que la ADA se aplica a los sitios web, pero también es aplicable a documentos web (como PDF), contenido multimedia y aplicaciones móviles. 

Desafortunadamente, muchas empresas creen que su contenido digital “no es utilizado por personas con discapacidad”. Teniendo en cuenta que más de 1 de cada 4 adultos en EE. UU. tiene una discapacidad(opens in a new tab), eso rara vez es cierto. Si tu sitio web no tiene visitantes con discapacidad, deberías preguntarte por qué el 25% de tu audiencia potencial está evitando tu contenido.

Dado que WCAG se cita frecuentemente en demandas sobre accesibilidad web, ignorar la accesibilidad puede ser costoso. La conformidad con la ADA es importante para todas las empresas, y el enfoque basado en principios de WCAG ofrece el mejor camino a seguir.

¿Cuáles son los cuatro principios de WCAG?

Las normas WCAG incluyen cuatro principios clave llamados principios POUR: El contenido debe ser Perceptible, Operable, Uncomprensible y Robusto. 

Estos conceptos proporcionan una base sólida para crear contenido web accesible y utilizable por todos. Aquí tienes una breve introducción a cada principio de WCAG.

1. Perceptible 

Un sitio web es perceptible si toda la información que contiene y sus componentes de interfaz de usuario (enlaces interactivos, cuadros de texto, botones, etc.) se presentan de manera que todos los usuarios puedan percibir y comprender. Dicho de otro modo, si algún contenido útil de un sitio web es completamente invisible para cualquier usuario, el sitio no supera la prueba de perceptibilidad.

2. Operable

Un sitio web es operable si todos los usuarios pueden interactuar con la interfaz y navegar por el portal. Si el sitio web contiene componentes interactivos, todos los usuarios deben poder operarlos.

3. Comprensible

El contenido digital debe funcionar de manera predecible. Un sitio web debe permitir que todos los usuarios comprendan la información y los componentes de la interfaz que contiene. Si un usuario no puede entender cómo funciona un sitio web o qué significa su información, no supera la prueba de comprensibilidad.

4. Robusto 

El contenido de un sitio web debe ser lo suficientemente robusto y sólido como para ser interpretado por una amplia variedad de agentes de usuario, como navegadores web estándar y tecnologías de asistencia, como lectores de pantalla (software que convierte texto en audio o braille).

A medida que los agentes de usuario y las tecnologías evolucionan, el contenido debe seguir siendo accesible. Utilizar HTML semántico adecuado y otros tipos de marcado puede mejorar la compatibilidad con diferentes tecnologías. El contenido de un sitio web debe ser lo suficientemente robusto y sólido como para poder ser interpretado por una amplia variedad de agentes de usuario — por ejemplo, navegadores web estándar y tecnologías de asistencia como lectores de pantalla (software que convierte texto en audio o braille).

A medida que los agentes de usuario y las tecnologías evolucionan, el contenido debe seguir siendo accesible. Utilizar HTML semántico adecuado y otros tipos de marcado puede mejorar la compatibilidad con diferentes tecnologías.

¿Qué significa la conformidad con los estándares WCAG?

Los cuatro principios de los estándares de accesibilidad suenan razonables, pero ¿cómo se aplican en la práctica?

WCAG desglosa cada principio en varias directrices de nivel inferior para temas específicos y, a su vez, cada directriz se divide en un conjunto de criterios de éxito, que pueden servir como lista de verificación para el cumplimiento. Para cada criterio de éxito, WCAG también enumera varias “técnicas suficientes”: ejemplos de cómo aplicar la directriz en la práctica.

Los criterios de éxito también se clasifican en tres niveles de conformidad: A, AA y AAA. El nivel A proporciona el nivel más básico de accesibilidad y AAA es el más completo. Los expertos en accesibilidad generalmente consideran que el nivel intermedio, AA, es el punto de referencia para la conformidad con la ADA.

¿Cómo puedo seguir los estándares de conformidad WCAG?

Para empezar a utilizar los principios POUR, primero tendrás que establecer un objetivo. Para la mayoría de las organizaciones, la conformidad con el Nivel AA es una meta razonable (y alcanzable).

A continuación, algunos ejemplos de medidas que te permitirían cumplir los criterios de éxito en cada uno de los tres niveles bajo la directriz de Perceptibilidad: Directriz 1.4, “Distinguible”.

Como no podemos enumerar todas las directrices y criterios en este artículo, consulta la guía rápida “Cómo cumplir con WCAG” del World Wide Web Consortium (W3C)(opens in a new tab). Obtendrás un desglose más detallado de los criterios de éxito y una hoja de ruta más clara para la conformidad.

1. A: Haz tu sitio accesible para algunos usuarios

Los criterios de éxito de nivel A generalmente se centran en pasos básicos que pueden tomarse para evitar los errores de accesibilidad más graves. Como ejemplo, veremos el Criterio de Éxito 1.4, que se centra en la distinguibilidad: facilitar que los usuarios perciban el contenido.

La Sección 1.4.1 Uso del color(opens in a new tab) es un criterio de éxito de nivel A, que indica que los sitios no deben usar el color como el único medio para transmitir información, indicar una acción, solicitar una respuesta o distinguir un elemento visual.

Por ejemplo, si una página web incluyera un fragmento de texto en color verde y los hipervínculos dentro de ese fragmento estuvieran resaltados en rojo, podría ser difícil o imposible para un usuario con daltonismo rojo/verde o baja visión distinguir los enlaces del resto del texto. Para cumplir el criterio de éxito, una posible mejora sería añadir algún otro tipo de señal visual a los enlaces, como subrayarlos o mostrarlos en una fuente diferente. También es importante asegurarse de que tienes un buen contraste de color — un verificador de contraste de color como el de AudioEye puede ayudarte con esto.

2. AA: Haz tu sitio accesible para casi todos los usuarios.

Para conformarse al Nivel AA de WCAG, debes cumplir todos los criterios de éxito del nivel A. Como las directrices de Nivel AA se basan en las de Nivel A, los requisitos generales para el Nivel AA son más estrictos que los del Nivel A.

En el Criterio de Éxito 1.4, por ejemplo, el 1.4.3 Contraste (Mínimo)(opens in a new tab) de Nivel AA amplía las recomendaciones de 1.4.1 Uso del color. Recomienda que cualquier texto o imagen de texto en la página tenga una relación de contraste de color de 4.5:1 o superior (a menos que el texto sea grande o las imágenes de texto sean puramente decorativas o parte de un logotipo o nombre de marca). Puedes leer más sobre cómo crear contenido digital que use el contraste de color de forma adecuada aquí.

Otro ejemplo es 1.4.2 Control de audio(opens in a new tab). Este criterio recomienda que cualquier contenido multimedia basado en el tiempo que se reproduzca automáticamente durante más de tres segundos tenga una opción de ‘pausa’ o ‘detener’ o un límite de tiempo. Esto garantiza que las personas que utilizan lectores de pantalla puedan escuchar el lector sin que otros sonidos se reproduzcan, algo especialmente útil para quienes tienen dificultades auditivas. 

Un último ejemplo es el Criterio de Éxito de Nivel AA 1.4.4 Redimensionar texto(opens in a new tab), que indica que los usuarios deben poder aumentar el tamaño del texto hasta un 200% del tamaño estándar sin necesidad de utilizar tecnologías de asistencia para hacerlo.

3. AAA: Haz tu sitio accesible para todos los usuarios.

Como mencionamos antes, lograr la conformidad con el Nivel AAA requiere cumplir todos los criterios de éxito de los Niveles A y AA antes de avanzar a un estándar superior. Por ejemplo, el criterio de éxito 1.4.6 Contraste (Mejorado)(opens in a new tab) eleva la relación de contraste de color requerida de 4.5:1 a 7:1. 

De manera similar, 1.4.8 Presentación visual(opens in a new tab) añade a 1.4.4 Redimensionar texto exigiendo que el texto pueda aumentarse hasta un 200% y que el usuario aún pueda leer una línea completa sin tener que desplazarse horizontalmente en la ventana del navegador. 

También sugiere otras mejoras, como permitir al usuario seleccionar colores de fondo y de primer plano, especificar ajustes de espaciado y justificación de líneas, y la posibilidad de desactivar completamente los ruidos de fondo. Cada uno de estos cambios mejora la usabilidad general para que los usuarios con discapacidad puedan navegar y comprender el contenido digital. Por ejemplo, los usuarios con dislexia u otras discapacidades cognitivas se benefician enormemente de la posibilidad de aumentar el tamaño del texto.

Ejemplos de los principios WCAG en la práctica

Ahora que tienes una idea básica de cómo funcionan los criterios de éxito de WCAG, veamos cómo se pueden aplicar los principios POUR al contenido digital.

Perceptibilidad: Contraste de color

Recuerda, para que el contenido sea perceptible, debe presentarse de manera que todos los usuarios puedan comprenderlo. Al diseñar contenido digital, deberás tener en cuenta la perceptibilidad y asegurarte de que nada sea “invisible” o inaccesible para los usuarios con discapacidad.

Por ejemplo, el Criterio de Éxito 1.2.2 Subtítulos(opens in a new tab) exige a los creadores digitales incluir subtítulos para todo el contenido de audio pregrabado o contenido no textual como vídeos o clips de audio. Esto garantiza que las personas sordas o con dificultades auditivas puedan interactuar con el contenido de audio.

Operabilidad: Navegación solo con teclado

Algunas personas utilizan únicamente el teclado para operar tu sitio web. Si no tienes en cuenta a estos usuarios al planificar tu contenido, puede que no puedan utilizarlo fácilmente. 

Por este motivo, WCAG incluye el Criterio de Éxito 2.1.1 Teclado(opens in a new tab), que exige que los sitios web sean totalmente operables solo con el teclado. También deberías considerar otros modos de entrada (como pantallas táctiles, controles por voz y monitores de seguimiento ocular) al crear tu contenido. Cada uno de estos elementos contribuye a un sitio más accesible mediante teclado.

Comprensibilidad: Encabezados y etiquetas claros

Al preguntarte si tu sitio web es comprensible, puedes encontrar formas de ayudar a los usuarios a encontrar lo que necesitan y utilizar tu contenido. 

Por ejemplo, el Criterio de Éxito 3.3.2: Etiquetas o instrucciones(opens in a new tab) exige que los sitios web proporcionen instrucciones escritas (o descripciones de audio) para los componentes de la interfaz de usuario (como los campos de los formularios). Dedicar unos segundos a escribir instrucciones breves y claras hará que tu contenido sea más fácil de entender.

Robustez: Mensajes de estado

Los usuarios deben ser informados cuando el contenido de una página cambia, y esas notificaciones deben ser robustas. Deben poder presentarse a todos los usuarios, independientemente de si utilizan un lector de pantalla, una pantalla táctil u otro tipo de dispositivo.

WCAG aborda esto con el Criterio de Éxito 4.1.3: Mensajes de estado(opens in a new tab), que exige que los mensajes de estado tengan el marcado adecuado. Este es un tipo de problema de accesibilidad que puede detectarse (y potencialmente corregirse) automáticamente, pero si piensas en los diferentes tipos de agentes de usuario al escribir tu marcado, puedes evitar el problema desde el principio.

Utilizar los cuatro principios de accesibilidad para crear mejor contenido

Hemos comentado algunas aplicaciones de los principios POUR, pero las directrices WCAG cubren docenas de otros escenarios, todos ellos relacionados con barreras comunes que pueden afectar a usuarios con discapacidad. 

La buena noticia: todo ese trabajo da sus frutos. Crear contenido digital accesible con una funcionalidad clara y sencilla mejora la participación de los usuarios, aumenta el posicionamiento en buscadores y puede atraer más tráfico. Cumplir la normativa es útil, pero el diseño inclusivo puede ser una herramienta poderosa para hacer crecer tu negocio.

Ahí es donde entra AudioEye. Nuestra plataforma analiza tu contenido en busca de problemas comunes de conformidad con WCAG y soluciona los problemas de accesibilidad más habituales que afectan negativamente a la experiencia del usuario. Empezamos con un escaneo gratuito de accesibilidad que identifica problemas comunes de accesibilidad. Nuestro equipo de expertos humanos luego prueba tu contenido digital para detectar problemas de accesibilidad más complejos y recomienda pasos para su corrección. El resultado: contenido digital accesible e inclusivo que funciona para todos.