Imaginá que intentás acceder a contenido digital, pero la interfaz está tan cargada, confusa o mal diseñada que se hace casi imposible de usar. Para muchas personas con discapacidad, esta es una experiencia diaria. Ahí es donde entra la accesibilidad.
Pero, ¿cómo definimos accesibilidad en el contexto del diseño digital?
Diseñar con accesibilidad en mente significa asegurarse de que todas las personas puedan interactuar con y disfrutar del mundo digital, sin importar sus capacidades. Igual que un buen anfitrión, quienes diseñamos tenemos que crear experiencias inclusivas que reciban a todo el mundo. Cuando priorizamos la accesibilidad, nos aseguramos de que nadie quede afuera.
Hay un mito bastante instalado de que sumar accesibilidad al proceso de diseño es caro. Bueno, eso, amigos y amigas, es solo un mito. Incorporarla desde el principio es más barato, más fácil y mucho más efectivo que arreglar todo después como un proyecto separado.
Bonus: Cumplir con los estándares de accesibilidad también va a ayudar indirectamente a tu SEO
La accesibilidad no se trata de una checklist, se trata de personas.
El “Curb-cut effect”
Lo mágico de diseñar con accesibilidad es que no solo estamos ayudando al 16% de la población que tiene alguna discapacidad. En realidad, podemos estar ayudando a todas las personas. ¿Demasiado ambicioso? Tal vez no. Y de eso se trata el “curb-cut effect”.
El “curb-cut effect” muestra que cuando diseñamos para un público con discapacidades, mejoramos las cosas para todo el mundo. El término viene de las rampas en las esquinas de las veredas, pensadas originalmente para sillas de ruedas. Pero también resultaron súper útiles para personas con cochecitos, turistas con valijas, ciclistas y cualquiera que tenga una limitación de movilidad, aunque sea temporal.
También vale recordar que algunas discapacidades pueden ser contextuales. Una pantalla de celular rota o el reflejo del sol en la notebook pueden afectar la accesibilidad incluso en personas sin una discapacidad visual permanente.
Ok, buenísimo. Pero, ¿por dónde empiezo?
En mayo de 1999 se publicaron las Web Content Accessibility Guidelines (WCAG). Estas pautas marcaron los estándares internacionales que todavía hoy guían cómo diseñamos para la accesibilidad en la web. Y cuando decimos pautas, en algunos países también estamos hablando de requisitos legales.
Las WCAG definen tres niveles de conformidad: A, AA y AAA.
Nivel A
Es el nivel mínimo. Incluye ofrecer alternativas textuales para contenido no textual, asegurar compatibilidad con tecnologías de asistencia y permitir la navegación completa con teclado.
Nivel AA
Se apoya en el nivel A y suma requisitos como una relación de contraste mínima de 4.5:1 entre texto y fondo, navegación consistente y mejoras generales de accesibilidad.
Nivel AAA
Es el nivel más alto. Incluye todo lo de los niveles A y AA, más requisitos adicionales como contraste 7:1, interpretación en lengua de señas para videos y un nivel de lectura equivalente a noveno de escuela para el contenido.
El estándar recomendado (y muchas veces exigido por ley) es AA, que asegura un nivel sólido de inclusión.
Ahora sí, lo divertido: diseñar para la accesibilidad
La teoría está buenísima, ¿no? ¿No? Pero cuando llega el momento de diseñar de verdad, perderse en el sitio de las WCAG puede ser un poco abrumador. Así que acá va un punto de partida más simple.
Las WCAG organizan su contenido en torno a cuatro principios clave. La interfaz tiene que ser Perceptible, Operable, Comprensible y Robusta, para que cualquier persona pueda interactuar con productos digitales, ya tenga condiciones visuales, físicas o de neurodiversidad.
Veamos cada una de forma más concreta:
Perceptible
El contenido tiene que estar disponible para todas las personas usuarias. Si aparece información clave en una imagen, esa información también tiene que ser accesible mediante una descripción alt. El contexto también importa: ¿alguna vez intentaste ver un video en una biblioteca o en un lugar donde no podés activar el audio? Los subtítulos hacen que eso sea posible.
Operable
Las personas tienen que poder navegar y usar todas las funciones con el teclado, no solo con el mouse. Probalo en este mismo artículo usando la tecla Tab. Idealmente no deberías quedar “atrapado” en ningún elemento.
Comprensible
Las interfaces deberían comportarse de forma predecible. Mantener patrones claros y consistentes en la navegación y los componentes ayuda a que las personas reconozcan cómo está estructurado el sitio y se sientan cómodas moviéndose por él.
Robusta
El código importa. Un HTML bien estructurado, con etiquetas semánticas correctas, asegura que las tecnologías de asistencia puedan leer y comunicar el contenido de forma precisa.
Suena a un punto de partida bastante directo, ¿no?
Veamos algunos ejemplos de buenas prácticas
Información y relaciones
Es importante preservar la integridad de la información cuando cambiamos entre formatos visuales o auditivos. Por ejemplo, usar títulos más grandes y en negrita para distinguirlos de los párrafos ayuda a dejar clara la jerarquía de contenido para todas las personas.
Identificación de errores
Cuando el sistema puede detectar automáticamente errores en campos de entrada, es clave destacarlos de forma clara y explicar el problema mediante texto, como se ve en el ejemplo de abajo.
Orden de foco
Los elementos que reciben foco durante la navegación deberían seguir una secuencia lógica y tener sentido para la persona usuaria.
Por último, algunos estándares básicos a tener presentes
La W3C también desarrolló estándares de accesibilidad que ayudan a que las experiencias digitales sean más inclusivas. Algunos buenos puntos para empezar:
Contraste de color
Las personas con baja visión o dificultades visuales pueden tener problemas para percibir interfaces con poco contraste. Usar colores con buen contraste, señales visuales claras y textos alternativos descriptivos mejora muchísimo la experiencia.
Como se muestra en el ejemplo, el contraste se mide comparando la luminancia del color de frente y de fondo. Para texto chico (menos de 24 px), se recomienda una relación mínima de 4.5:1. Para texto más grande, 3:1 es aceptable.
Tamaño de texto y zoom
El tamaño de fuente juega un papel clave en la accesibilidad web. Para asegurar una buena legibilidad, es importante prestar atención a los tamaños que usamos.
- Usar un tamaño recomendado de 16 px para el cuerpo de texto, según la audiencia y el dispositivo.
- Evitar tamaños por defecto menores a 12 px.
- Asegurar que las personas puedan aumentar el tamaño del texto hasta un 200%; los layouts flexibles ayudan a soportar esto.
Espaciado de texto
Además de crear una estructura visual clara con títulos, párrafos y listas, hay algunos detalles importantes a tener en cuenta para mejorar la lectura del contenido:
- Interlineado: la altura de línea (distancia entre las líneas de texto) debería ser de al menos 1,5× el tamaño de la fuente.
- Espaciado entre párrafos: el espacio después de cada párrafo debería ser de al menos 2× el tamaño de la fuente.
- Espaciado entre letras: el espaciado (o kerning) debería ser de al menos 0,12× el tamaño de la fuente.
- Espaciado entre palabras: el espaciado (o tracking) debería ser de al menos 0,16× el tamaño de la fuente.
Entonces, ¿estás incorporando accesibilidad en tu proceso de diseño?
Como diseñadores y diseñadoras UX, tenemos la posibilidad de crear experiencias inclusivas si integramos la accesibilidad desde el inicio, y no como un parche rápido al final.
