Doble o nada AA: accesibilidad web e inclusión en diseño UI/UX.

Fundamentos de la accesibilidad web

La accesibilidad es un aspecto fundamental en el diseño de interfaces (UI) y la experiencia de usuario (UX). Garantizar que todos los usuarios/as, independientemente de sus capacidades, puedan acceder y disfrutar de la web no es solo una buena práctica, sino un requisito ético y legal en muchos casos.

Este post está dividido en dos partes para ofrecerte una guía completa sobre cómo integrar la accesibilidad en el flujo de diseño de productos digitales. En esta primera parte, exploraremos los conceptos básicos y las directrices clave que rigen la accesibilidad, incluyendo los principios de la WCAG 2.1 y los niveles de conformidad.
Prepárate para descubrir cómo el diseño inclusivo no solo mejora la usabilidad, sino que también amplía el alcance de tus productos digitales.

¿Qué es la accesibilidad web y qué tipos existen?

La accesibilidad web se refiere a la práctica de diseñar y desarrollar sitios web, aplicaciones y otros productos digitales de manera que sean utilizables por el mayor número de usuarios/as posible, incluyendo aquellos/as con discapacidades. Estas discapacidades pueden ser de tipo visual, auditivo, motriz, cognitivo o neurológico.

El poder de la web está en su universalidad.
El acceso para cualquier persona, independientemente
de sus capacidades, es un aspecto esencial.
Tim Berners-Lee,
Director del W3C e inventor de la World Wide Web

Es crucial tener presente cuántas personas pueden estar afectadas por diferentes tipos de discapacidades a nivel mundial para dimensionar la importancia de la accesibilidad web:

Visual

Abarca desde la ceguera completa hasta la baja visión y el daltonismo. Según la Organización Mundial de la Salud (OMS), aproximadamente 2.2 mil millones de personas en todo el mundo tienen alguna forma de deficiencia visual. Esto incluye a personas con ceguera total (alrededor de 43 millones) y baja visión (alrededor de 295 millones), así como a quienes padecen otras afecciones visuales como el daltonismo, que afecta a cerca del 8% de los hombres y al 0.5% de las mujeres en el mundo.

Auditiva

Incluye usuarios/as con sordera o problemas auditivos y se estima que alrededor de 430 millones de personas tienen pérdida auditiva discapacitante, lo que representa más del 5% de la población mundial. Esta cifra se espera que crezca significativamente en los próximos años, alcanzando los 700 millones para 2050.

Motriz

Implica a personas con lesiones medulares, accidentes o discapacidades que limitan su capacidad de movimiento, como temblores o parálisis. Aproximadamente 190 millones de personas a nivel mundial viven con discapacidades motrices graves que limitan su capacidad de movimiento. Esto incluye a personas con enfermedades neuromusculares, artritis severa, parálisis, entre otros trastornos que dificultan la interacción con dispositivos digitales.

Cognitiva y neurológica

Según la OMS, aproximadamente 1 de cada 6 personas en el mundo vive con algún tipo de trastorno neurológico, lo que equivale a más de 1 mil millones de personas. Esto incluye a personas con dislexia, trastornos del espectro autista, TDAH y epilepsia, entre otras condiciones que pueden afectar su capacidad para procesar y entender información en la web.

Directrices para la accesibilidad web

Con todo este juego, hay dos piezas clave para conseguir la jugada perfecta. Y es que para asegurar que los sitios web sean accesibles, existen diversas directrices y estándares a seguir. La primera pieza es el conjunto más reconocido internacionalmente como la Web Content Accessibility Guidelines (WCAG), desarrollada por el World Wide Web Consortium (W3C), la segunda pieza.

Las WCAG ofrecen un marco estructurado para diseñadores/as y desarrolladores/as, describiendo cómo hacer que el contenido web sea más accesible. Estas directrices están organizadas en principios, pautas y criterios de éxito, con el objetivo de ser comprensibles y aplicables a nivel global.

Los 4 principios de la WCAG 2.1

La WCAG 2.1 se basa en cuatro principios fundamentales, conocidos como POUR (por sus siglas en inglés: Perceivable, Operable, Understandable y Robust). Estos principios proporcionan una estructura clara para abordar la accesibilidad:

Perceptible

Este principio se centra en garantizar que los usuarios/as puedan percibir la información y los componentes de la interfaz a través de sus sentidos, principalmente la vista y el oído. La información debe estar disponible en formas que sean accesibles a los usuarios/as con diferentes tipos de discapacidades.

Detalles:

• Texto alternativo para contenido no textual: las imágenes, gráficos, diagramas, vídeos y otros contenidos visuales deben tener alternativas textuales que describan su contenido. Por ejemplo, una infografía debe tener un texto que describa la información presentada para que un lector de pantalla pueda leerla.
• Subtítulos y transcripciones: los vídeos y audios deben contar con subtítulos y/o transcripciones para usuarios/as con discapacidades auditivas.
• Adaptabilidad del contenido: el contenido debe ser adaptable para diferentes formatos, como cambios en el tamaño del texto, contraste de colores, o disposición en pantalla para que pueda ser percibido por todos los usuarios/as.

Operable

Este principio asegura que todos los elementos interactivos y la navegación de una página web sean operables por todos los usuarios/as, sin importar las limitaciones físicas o tecnológicas. Los usuarios/as deben poder utilizar la web con diferentes métodos de entrada.

Detalles:

• Navegación por teclado: todos los elementos de la página web deben ser accesibles mediante el teclado. Esto es vital para usuarios/as que no pueden usar un ratón.
• Tiempo suficiente para interactuar: los usuarios y usuarias deben tener suficiente tiempo para leer e interactuar con el contenido. Los temporizadores automáticos deben ser ajustables o desactivables.
• Evitar contenidos que provoquen ataques: las páginas deben evitar contenido que pueda causar ataques epilépticos, como luces parpadeantes o animaciones rápidas.
• Fácil navegación: la estructura de la web debe facilitar la navegación, permitiendo a los usuarios/as localizar rápidamente contenido o páginas específicas, utilizando características como menús, barras de búsqueda, y una jerarquía de contenido clara.

Comprensible

El principio de comprensibilidad se refiere a que el contenido y la operabilidad de la interfaz deben ser fáciles de entender. Los usuarios y usuarias deben comprender la información presentada y predecir cómo interactuar.

Detalles:

• Lenguaje claro: el contenido debe ser escrito en un lenguaje sencillo y comprensible. Evitar jerga técnica sin explicaciones y usar un lenguaje claro y directo.
• Previsibilidad en el diseño: la navegación y las interacciones deben ser consistentes en toda la web para que los usuarios/as sepan qué esperar. Los cambios en la interfaz deben ser predecibles y no confundir al usuario/a.
• Asistencia para la entrada de datos: cuando se requiere que el usuario/a introduzca datos, como en formularios, deben proporcionarse instrucciones claras y mecanismos que prevengan o corrijan errores, como autocompletar, validación en tiempo real, y mensajes de error útiles.

Robusto

El contenido debe ser suficientemente robusto como para ser interpretado de manera fiable por una amplia variedad de agentes de usuario, incluidos navegadores y tecnologías asistivas. Esto significa que el código y la estructura deben ser semánticamente correctos y compatibles con los estándares web.

Detalles:

• Compatibilidad con tecnologías asistivas: el sitio debe estar codificado de manera que los lectores de pantalla y otros dispositivos asistivos puedan interpretar correctamente todo el contenido. Esto implica utilizar etiquetas correctas para encabezados, listas, enlaces, etc.
• Uso adecuado del HTML y ARIA: las etiquetas HTML deben ser utilizadas según su propósito y, cuando sea necesario, se deben implementar roles ARIA (Accessible Rich Internet Applications) para mejorar la accesibilidad.
• Futuro escalable: el sitio debe estar preparado para ser compatible con futuras tecnologías y navegadores, lo que significa seguir las mejores prácticas de desarrollo web y estándares actuales.

Niveles de conformidad

Los niveles de conformidad de la WCAG (Web Content Accessibility Guidelines) 2.1 están diseñados para evaluar cuán accesible es un sitio web o una aplicación. Estos niveles son A, AA, y AAA, y cada uno tiene criterios de aceptación específicos que deben cumplirse para alcanzar dicho nivel. A continuación, entraremos más en detalle en cada nivel y algunos de los criterios más relevantes para cada uno:

Ver todos los criterios de conformidad.

Nivel A

El Nivel A es el nivel de conformidad más básico. Cubre los aspectos esenciales y garantiza un mínimo de accesibilidad que debe cumplirse para que un sitio web sea mínimamente accesible. Este nivel consta de 25 criterios, algunos de los más relevantes son:

• Contenido no textual: proveer texto alternativo para imágenes y otros contenidos visuales.
• Información y relaciones: usar etiquetas, encabezados y estructuras semánticas para transmitir información de manera accesible.
• Uso del color: no usar solo el color para transmitir información; debe haber alternativas como texto o patrones.
• Teclado: asegurar que toda la funcionalidad sea operable solo con un teclado.
• Orden de enfoque: mantener un orden lógico de enfoque a través de la interfaz para que la navegación sea intuitiva.

Nivel AA

El Nivel AA es el estándar más comúnmente recomendado. Cubre la mayor cantidad de criterios que hacen que un sitio sea accesible para un grupo más amplio de usuarios y usuarias con discapacidades. Este nivel es considerado el mínimo aceptable para cumplir con la mayoría de las leyes de accesibilidad. Este nivel consta de un total de 38 criterios ( A + AA ), algunos de los más relevantes son:

• Contraste (mínimo): asegurar un contraste de al menos 4.5:1 entre el texto y su fondo.
• Redimensionar texto: permitir que el texto se redimensione hasta un 200% sin pérdida de funcionalidad o contenido.
• Imágenes de texto: evitar el uso de imágenes para representar texto, salvo que sea absolutamente necesario, y en ese caso, ofrecer alternativas textuales.
• Navegación coherente: mantener una disposición de navegación coherente en todas las páginas para facilitar el acceso y la usabilidad.

Nivel AAA

El Nivel AAA es el más alto y más exigente. Cumplir con este nivel asegura que el sitio web sea accesible para el mayor número posible de usuarios y usuarias con una amplia gama de discapacidades. Sin embargo, este nivel no siempre es práctico o necesario, ya que algunos criterios pueden comprometer el diseño o la funcionalidad. Este nivel consta de un total de 61 criterios ( A + AA + AA ), algunos de los más relevantes son:

• Contraste mejorado: asegurar un contraste de al menos 7:1 entre el texto y su fondo.
• Presentación visual: ofrecer opciones para que los usuarios/as personalicen la presentación visual, como el interlineado, el espaciado de párrafos y la justificación del texto.
• Enlace con propósito: proveer enlaces claramente identificables y descriptivos para que el propósito de cada enlace sea evidente sin contexto adicional.
• Encabezados de sección: utilizar encabezados para dividir el contenido en secciones lógicas, facilitando la navegación.
• Niveles de lectura: usar un nivel de lectura apropiado para el contenido, ofreciendo versiones simplificadas si es necesario.

Sigue pendiente, porque en el siguiente post veremos cómo incluir en el proceso de diseño todas las herramientas y utilidades para implementar diseños accesibles.