Accesibilidad web: quién está obligado y cuánto cuesta

La accesibilidad web es la propiedad de una web que sigue funcionando cuando falla una suposición: la visitante no ve la pantalla, no puede usar el ratón, no oye el vídeo, o está leyendo a pleno sol en el móvil con una mano.

La mayoría de empresas llega al tema como un susto normativo justo antes de una revisión. Ese orden produce el peor resultado posible: un montón de parches sobre una web terminada. Pensado desde el primer boceto, el mismo requisito no cuesta casi nada y de paso mejora la web para todo el mundo.

Esta guía trata las decisiones de diseño y no la norma: qué seis fallos aparecen en casi toda auditoría, cómo probar tu web en diez minutos, cuánto cuesta el trabajo, y quién está realmente obligado desde el 28 de junio de 2025.

La accesibilidad no es un estilo visual, y conviene aclararlo primero. Las webs que cumplen se ven como cualquier otra web bien hecha. Lo que cambia es un conjunto de decisiones que normalmente se toman sin pensarlas: cuánto contraste tiene el texto, qué pasa al pulsar el tabulador, si un campo sigue entendiéndose cuando desaparece el texto de ayuda.

Según la Iniciativa de Accesibilidad Web del W3C, las pautas se apoyan en cuatro principios: el contenido debe ser perceptible, operable, comprensible y robusto. Esas cuatro palabras sirven más en una reunión con una agencia que los criterios numerados, porque de ellas salen preguntas que cualquiera puede hacerle a un diseño.

El argumento comercial es más simple que el moral. Alrededor de una de cada seis personas en el mundo vive con una discapacidad significativa, y la proporción sube claramente con la edad, lo que importa en cualquier producto dirigido a mayores de cincuenta.

Desde el 28 de junio de 2025 se aplica en España la ley que traspone la Directiva europea de accesibilidad, conocida como European Accessibility Act. No alcanza a todas las webs, y la idea extendida de que «ahora toda web debe ser accesible» es falsa.

Quedan cubiertos los productos y servicios dirigidos a consumidores, entre ellos el comercio electrónico, los servicios bancarios para consumidores, los libros electrónicos, las telecomunicaciones y el transporte de viajeros. Una web corporativa de presentación, sin función de venta, normalmente queda fuera; una tienda online, dentro.

Hay una excepción para microempresas: quien presta servicios con menos de diez personas empleadas y un volumen de negocio o balance anual que no supera los dos millones de euros queda exento de las obligaciones sobre servicios. Para productos esa excepción no aplica.

El sector público lleva más tiempo obligado por su propia norma, con la referencia técnica de la norma europea EN 301 549. Las cuantías de sanción dependen del caso concreto y aquí no se cifran a propósito: quien necesite certeza sobre su situación lo consulta con un abogado y no en un artículo.

Seis fallos concentran la mayor parte de lo que aparece en auditorías reales, y todos son decisiones de diseño y no errores de programación. El análisis anual WebAIM Million encuentra incumplimientos detectables de forma automática en más del 95 % de las portadas más visitadas. Corregidos en el boceto no cuestan nada; después del lanzamiento significan tocar plantillas terminadas.

• Contraste insuficiente, casi siempre gris sobre blanco porque en el diseño quedaba más sobrio.
• Textos alternativos ausentes, o que repiten el nombre del archivo.
• Enlaces que dicen «leer más», que un lector de pantalla anuncia fuera de contexto como una lista de entradas idénticas.
• Formularios cuya única etiqueta es el texto de ayuda, que desaparece con la primera tecla.
• Controles construidos con divs, invisibles para la tecnología de apoyo porque no llevan rol.
• Vídeo sin subtítulos, que excluye a personas sordas y a todo el que mira sin sonido.

Cada uno se arregla en minutos en un archivo de diseño y en horas en código de producción. Esa proporción es todo el argumento para tratar la accesibilidad como restricción de diseño y no como tarea de desarrollo.

El contraste es el fallo más frecuente y el más fácil de evitar, porque se comprueba antes de que exista una línea de código. Se pide una relación mínima de 4,5 a 1 entre texto y fondo en texto normal, y de 3 a 1 en texto grande y en los bordes visibles de los controles.

La trampa está en que las paletas de marca se eligen en monitores calibrados y salas en penumbra. Un gris medio que allí parece elegante deja de leerse en el móvil a plena luz. Comprobar la paleta al definir la marca, y no al montar las páginas, evita toda una categoría de rehacer trabajo.

El color tampoco puede ser lo único que transmite significado. Un formulario que marca los errores solo en rojo resulta inservible para la parte considerable de hombres con daltonismo. Añadir un icono y una frase cuesta una línea.

Queda el indicador de foco. Es habitual que se elimine el contorno que trae el navegador porque desentona con el diseño, y no se reemplace por nada. Esa sola decisión deja toda la web inutilizable con teclado, y es el fallo grave que más encontramos en trabajos por lo demás cuidados.

La navegación con teclado es la forma más rápida de juzgar una web y no necesita herramientas. Aparta el ratón, pulsa el tabulador repetidamente y observa. Si llegas a todos los controles, siempre ves dónde estás y nunca te quedas atrapado, la web está en un estado razonable.

Tres cosas fallan en la práctica. El orden salta porque los elementos se colocaron visualmente en vez de ordenarse en el marcado. Se abre una ventana modal y el tabulador sigue recorriendo la página de detrás, así que no se alcanza el botón de cerrar. Y un desplegable que solo se abre al pasar el cursor sencillamente no es alcanzable.

Hace falta además una manera de saltar los bloques repetidos. En una web con cabecera grande y menú largo, una persona pulsa si no veinte veces el tabulador en cada página antes de llegar al contenido. Un enlace de salto son unas pocas líneas y está entre las correcciones más rentables que existen.

Nada de esto exige un lector de pantalla. Tabulador, Enter, Escape y las flechas sacan a la luz la mayoría de los problemas serios en menos de diez minutos.

Los formularios son el punto donde las barreras cuestan dinero directamente, porque el formulario suele ser la conversión. Los requisitos son poco vistosos y breves, y casi toda web comercial incumple al menos uno.

Cada campo necesita una etiqueta visible que siga visible. El texto de ayuda dentro del campo no es una etiqueta: desaparece con la primera tecla y deja adivinando a quien se distrajo. Los campos relacionados necesitan agrupación para que un lector de pantalla los anuncie como conjunto.

Los errores tienen que decir qué hacer, no qué pasó. «Campo no válido» no sirve de nada; «introduce la fecha como DD/MM/AAAA» sí. El error además debe anunciarse, asociarse al campo y ser alcanzable, y ahí es donde falla a menudo un resumen de errores visualmente bonito al principio de la página.

Los límites de tiempo merecen mención porque son invisibles hasta que hacen daño. Una reserva que cierra la sesión a los diez minutos excluye a quien lee despacio o usa lector de pantalla, y ese grupo tarda medibemente más en el mismo recorrido.

Los widgets superpuestos, esos botones flotantes de accesibilidad que prometen cumplimiento inmediato por una cuota mensual, merecen una respuesta directa porque se comercializan justo a quien lee esto.

No hacen accesible una web. Un overlay se coloca encima del marcado existente y adivina un significado que no puede ver: no sabe qué muestra una imagen sin describir, no puede deducir la estructura de encabezados ni reparar un componente que no lleva rol. Lo que sí hace es cambiar tamaño de letra y colores, algo que la persona ya podía hacer en su navegador.

El argumento práctico pesa más que el teórico. Usuarios de lectores de pantalla llevan años informando públicamente de que los overlays interfieren con su propio software, y profesionales de la accesibilidad han firmado una carta abierta desaconsejándolos.

Dicho con franqueza, un overlay compra por suscripción la apariencia de una solución. Lo que evalúan los organismos y las personas usuarias es el marcado que hay debajo.

Auditar una web existente funciona en tres pasadas, y el orden importa porque cada una es más cara que la anterior. Contratar primero una auditoría externa, antes de las pasadas gratuitas, gasta la mayor parte del presupuesto en hallazgos que podrías haber reunido tú.

La primera pasada es automática. Una extensión de navegador o un comprobador de línea de comandos encuentra contrastes, alternativos ausentes y campos sin etiqueta en minutos. Las herramientas automáticas detectan una minoría relevante de los problemas reales, habitualmente estimada en torno a un tercio, así que un informe limpio es el principio y no el final.

La segunda pasada es manual y gratuita: el recorrido con teclado descrito arriba, más revisar la página con las imágenes desactivadas y con el zoom al 200 %. Aquí salen los problemas estructurales que ningún escáner ve.

La tercera es la revisión experta con tecnología de apoyo, y es la que merece pagarse. Cubre lo que ninguna herramienta detecta: si el orden de lectura tiene sentido, si los anuncios sirven de algo y si la tarea se puede completar. Contrátala después de las dos primeras, no antes.

Integrada en una web nueva, la accesibilidad no suma casi nada a la factura. La revisión de paleta, los estados de foco, los formularios etiquetados y la estructura semántica son decisiones y no trabajo extra, y un equipo competente las toma por defecto. Según nuestros precios publicados, una página única parte de 1.500 € y una web de diez a treinta páginas de 4.500 €, y la accesibilidad va dentro de esas cifras y no encima.

Adaptar una web existente es otra cosa económicamente. Contraste y textos alternativos salen baratos. Rehacer componentes hechos con divs sin rol, o reordenar una página cuyo orden visual no coincide con el del marcado, es trabajo de plantillas y suele situarse entre 2.000 € y 8.000 € según cuántas plantillas tenga la web.

Una revisión experta con tecnología de apoyo sobre una web mediana es por sí sola un encargo de cuatro cifras, y por eso las pasadas gratuitas van primero.

La cifra que más importa no es el precio del arreglo sino la proporción de retrabajo. Un problema de contraste detectado en el archivo de diseño es un cambio de cinco minutos. El mismo problema detectado tras el lanzamiento toca todas las plantillas, el sistema de diseño y las pruebas. Importes sin el 21 % de IVA. Cómo encaja esto en un proyecto completo lo explica nuestra guía de diseño web corporativo.