Accesibilidad web: qué es y qué te afecta

La accesibilidad no es una carpeta aparte del diseño: es que la web se pueda usar con el teclado, con el móvil al sol, con poca vista o con un lector de pantalla. Va lo que significa en la práctica, qué se arregla en una tarde y qué dice la norma.

Qué es, sin teoría

• Alguien que no ve y navega con un lector de pantalla, que le lee la web en voz alta. Si tus fotos no tienen descripción y todos tus botones se llaman «Ver más», esa persona no sabe dónde está.
• Alguien que no puede usar el ratón y se mueve con el tabulador. Si no se ve dónde está el foco, va a ciegas.
• Alguien con poca vista que agranda el texto al doble. Si el diseño se rompe, se queda fuera.
• Y alguien sin ninguna discapacidad, con el móvil al sol y una mano ocupada. La mitad de la accesibilidad es eso.

La norma de referencia

El estándar internacional se llama WCAG, las pautas de accesibilidad para el contenido web, y tiene tres niveles: A, AA y AAA. El que se pide habitualmente en normativa es el AA. En Europa se recoge en la norma EN 301 549.

Sobre a quién obliga: en España hay obligaciones para el sector público desde hace años, y la normativa europea de accesibilidad ha ampliado el alcance a ciertos productos y servicios privados, con excepciones según el tamaño de la empresa y el tipo de actividad. Si tu caso concreto entra o no es una pregunta para un abogado, no para tu diseñador web, y cualquiera que te lo asegure sin mirar tu actividad te está vendiendo algo. Lo que sí podemos decirte es que los arreglos de abajo se hacen igual, obligue o no.

Los arreglos que resuelven la mayoría

En una web pequeña, casi todos los problemas están en esta lista corta:

• Texto alternativo en las imágenes que aportan información, y vacío en las decorativas.
• Contraste suficiente entre texto y fondo. El gris claro sobre blanco queda fino en la pantalla del diseñador y es ilegible en la calle.
• Foco visible: al moverse con el tabulador tiene que verse dónde estás.
• Formularios etiquetados de verdad, no con un texto dentro del campo que desaparece al escribir. Y los errores explicados con palabras, no solo en rojo.
• Títulos en orden: un solo h1 por página y sin saltarse niveles. Un lector de pantalla se mueve por los títulos como tú por un índice.
• Enlaces que se entiendan solos. «Ver precios» sí; «aquí» no.
• Todo usable con el teclado, incluidos los menús y las ventanas que se abren encima.
• Zonas de toque grandes y separadas en el móvil.
• Respetar a quien ha pedido menos animación en la configuración de su sistema.

Lo que no arregla un plugin

Hay plugins que ponen un botón flotante con opciones de contraste y tamaño de letra. No hacen accesible una web mal construida: le ponen un parche por encima, y a veces empeoran lo que había. Lo que funciona es el HTML correcto debajo.

De paso, Google

Casi todo lo de esa lista es también SEO: los títulos en orden, el texto alternativo, los enlaces con texto que significa algo, el contraste legible. No lo hagas por eso, pero cuenta con ello.