Imagina que un día te levantas y no puedes usar el ratón. O que llevas gafas nuevas y todavía no ves bien de cerca, así que necesitas ampliar el texto de la pantalla para leer algo con comodidad. O que estás en el metro, sin auriculares, e intentas ver un vídeo pero sin sonido no te enteras de nada porque no tiene subtítulos. Estas situaciones, que parecen anécdotas puntuales, son el día a día de millones de personas que navegan por internet con algún tipo de limitación, ya sea permanente, temporal o simplemente circunstancial.
La accesibilidad web es, dicho de forma sencilla, diseñar y construir páginas web para que las pueda usar cualquier persona, independientemente de sus capacidades. No hablamos solo de personas ciegas usando lectores de pantalla, que es la imagen que a la mayoría le viene a la cabeza cuando oye la palabra accesibilidad. Hablamos también de personas con daltonismo que no distinguen ciertos colores, personas con problemas motrices que no pueden usar un ratón con precisión, personas mayores que necesitan textos más grandes, personas con dislexia que necesitan tipografías y espaciados concretos, y muchísimas situaciones más que probablemente ni te hayas planteado.
En este artículo vamos a ver por qué la accesibilidad importa de verdad, más allá de cumplir una norma, cuáles son los estándares que existen y qué significan en la práctica, y sobre todo, cómo empezar a aplicarla en tu propia web con ejemplos concretos y reales, sin necesidad de rehacer tu página entera de la noche a la mañana.
Por qué la accesibilidad web importa de verdad
Antes de entrar en el cómo, conviene entender bien el por qué, porque cuando se entiende de verdad el impacto real, deja de verse como un trámite burocrático y empieza a verse como lo que es, una parte fundamental de hacer bien tu trabajo.
La cantidad de personas afectadas es mucho mayor de lo que se piensa
Según datos de la Organización Mundial de la Salud, más de mil millones de personas en el mundo viven con algún tipo de discapacidad. Y esto sin contar las limitaciones temporales, como un brazo escayolado que impide usar bien un ratón, o las situacionales, como estar conduciendo y necesitar que un asistente de voz te lea un mensaje en lugar de tener que leerlo tú. Si sumas todo esto, la cifra de personas que en algún momento se benefician de una web accesible es enorme, mucho mayor de lo que la mayoría de negocios se imagina.
Es una cuestión legal, no solo una buena práctica
En España y en el resto de la Unión Europea existe normativa que obliga a que determinadas webs, especialmente las de administraciones públicas y, cada vez más, las de empresas privadas de cierto tamaño, cumplan unos requisitos mínimos de accesibilidad. La directiva europea sobre accesibilidad y su transposición en la ley española establecen sanciones para quien no cumpla, y esta obligación se está ampliando progresivamente también al sector privado, sobre todo en sectores como la banca, el transporte y el comercio electrónico.
Un caso real que se ha repetido varias veces en Estados Unidos, donde este tipo de demandas están más extendidas, es el de empresas de comercio electrónico que han sido demandadas por clientes con discapacidad visual que no podían completar una compra porque el formulario de pago no funcionaba con lectores de pantalla. Estas demandas no solo suponen un coste económico en sanciones o indemnizaciones, sino también un daño reputacional considerable para la marca.
Una web accesible es, casi siempre, una web mejor para todo el mundo
Esto es algo que se repite constantemente en el mundo de la accesibilidad y que merece la pena explicar con un ejemplo. Los subtítulos en los vídeos se diseñaron pensando en personas sordas, pero hoy en día la mayoría de la gente que ve vídeos en redes sociales lo hace con el sonido apagado, en el transporte público o en la oficina, y los subtítulos benefician a todo el mundo, no solo a quien los necesita por una discapacidad auditiva.
Lo mismo pasa con un buen contraste de colores, que ayuda tanto a una persona con baja visión como a cualquiera que esté mirando el móvil bajo el sol en la calle y le cueste ver la pantalla. O con una navegación clara por teclado, que ayuda tanto a alguien con una discapacidad motriz como a un usuario avanzado que simplemente prefiere moverse por la web sin soltar el teclado.
El impacto en el negocio es real y medible
Más allá de lo legal y lo ético, hay un argumento puramente de negocio. Si tu web no es accesible, estás cerrando la puerta a una parte de tus potenciales clientes, que además suelen ser muy fieles a las marcas que sí les tratan bien, porque las alternativas accesibles no siempre abundan. Un negocio que atiende bien a este colectivo gana clientes que la competencia está dejando escapar sin darse cuenta.
La accesibilidad también ayuda al SEO
Muchas de las prácticas de accesibilidad coinciden directamente con lo que Google recomienda para el posicionamiento. Un buen uso de encabezados, textos alternativos descriptivos en las imágenes, una estructura clara de navegación y un código HTML bien estructurado son señales que Google también valora a la hora de entender y posicionar tu contenido. No es casualidad que muchas auditorías de SEO técnico incluyan también revisiones de accesibilidad.
Los tipos de discapacidad que debes tener en cuenta
Para diseñar pensando en accesibilidad, ayuda mucho tener claro qué tipo de dificultades pueden encontrarse las distintas personas al navegar por una web. No se trata de una sola categoría, sino de varias, cada una con necesidades distintas.
Discapacidad visual
Incluye desde la ceguera total, donde la persona navega con un lector de pantalla que convierte el contenido en voz o braille, hasta la baja visión, donde se necesita ampliar el texto o aumentar el contraste, pasando por el daltonismo, que afecta a la percepción de ciertos colores y combinaciones.
Discapacidad auditiva
Afecta directamente al consumo de contenido en audio y vídeo. Sin subtítulos ni transcripciones, todo ese contenido queda completamente fuera de alcance para estas personas.
Discapacidad motriz
Incluye a personas que no pueden usar un ratón con precisión, o que no pueden usarlo en absoluto, y que dependen del teclado, de dispositivos de asistencia como pulsadores o de tecnología de seguimiento ocular para navegar.
Discapacidad cognitiva
Incluye condiciones como la dislexia, el autismo o problemas de memoria y atención, entre muchas otras. Estas personas se benefician especialmente de un lenguaje claro, una estructura sencilla, y la ausencia de animaciones o elementos que distraigan innecesariamente.
Limitaciones temporales y situacionales
Como comentábamos antes, un brazo roto, un entorno muy ruidoso, una conexión a internet muy lenta o incluso el simple cansancio ocular al final del día son situaciones que hacen que cualquier persona, sin discapacidad permanente alguna, se beneficie de una web bien diseñada en términos de accesibilidad.
Las pautas WCAG, el estándar internacional
Cuando se habla de accesibilidad web de forma seria, siempre se acaba mencionando las WCAG, que son las siglas en inglés de las Pautas de Accesibilidad para el Contenido Web. Son el estándar de referencia a nivel mundial, desarrollado por el consorcio W3C, y en el que se basa la mayoría de legislación sobre accesibilidad, incluida la europea.
Los niveles de conformidad
Las WCAG se organizan en tres niveles de cumplimiento, de menor a mayor exigencia:
- Nivel A, el mínimo indispensable. Sin cumplir este nivel, una web tiene barreras graves de accesibilidad.
- Nivel AA, el nivel recomendado y el que exige la mayoría de legislación, incluida la normativa europea para el sector público y, cada vez más, para el privado.
- Nivel AAA, el nivel más exigente, que en la práctica es muy difícil de cumplir al cien por cien en una web comercial completa, aunque conviene aplicar sus criterios siempre que sea razonable.
Si estás empezando, el objetivo realista es apuntar al nivel AA, que es el que se considera un buen equilibrio entre accesibilidad real y viabilidad práctica.
Los cuatro principios, conocidos como POUR
Toda la normativa WCAG se organiza alrededor de cuatro principios fundamentales, que en inglés forman el acrónimo POUR, y que ayudan mucho a entender la lógica detrás de cada recomendación concreta.
Perceptible
La información debe poder percibirse de alguna manera por los sentidos disponibles del usuario. Si algo solo se puede percibir viendo una imagen, debe existir también una alternativa textual para quien no puede verla.
Operable
Los elementos de la interfaz y la navegación deben poder utilizarse, no solo verse. Un botón que solo funciona haciendo clic con el ratón, sin ninguna alternativa de teclado, no es operable para todo el mundo.
Comprensible
La información y el funcionamiento de la interfaz deben ser comprensibles. Esto incluye desde usar un lenguaje claro hasta que los formularios avisen de los errores de forma que se entiendan fácilmente.
Robusto
El contenido debe poder interpretarse de forma fiable por una gran variedad de agentes, incluidas las tecnologías de asistencia actuales y futuras. Esto tiene mucho que ver con usar código HTML correcto y bien estructurado.
Cómo empezar, primeros pasos prácticos
Toda esta teoría está muy bien, pero seguramente lo que quieres saber es por dónde empezar de verdad con tu web. Vamos a ver las mejoras más importantes, ordenadas de forma que puedas ir aplicándolas de manera progresiva.
Textos alternativos en las imágenes
Es probablemente el punto más conocido y, aun así, uno de los que menos se hace bien. Cada imagen que tenga significado para el contenido debe llevar un atributo alt que la describa. Una persona que usa un lector de pantalla no ve la imagen, escucha esa descripción en su lugar.
Un error muy habitual es escribir textos alternativos genéricos como imagen1.jpg o foto, que no aportan ninguna información real. Otro error, menos conocido pero igual de importante, es poner texto alternativo en imágenes puramente decorativas, como un separador visual sin significado, cuando en esos casos lo correcto es dejar el atributo alt vacío para que el lector de pantalla lo ignore directamente y no interrumpa la lectura con información irrelevante.
Un ejemplo real de cómo debería escribirse un texto alternativo bien hecho, para la foto de producto de una silla de oficina en una tienda online, sería algo como silla de oficina ergonómica en color gris con reposabrazos ajustables, en lugar de simplemente silla o IMG_2481.
Contraste de color suficiente
El contraste entre el texto y el fondo debe ser suficiente para que se pueda leer con comodidad, incluso con baja visión o en condiciones de mucha luz ambiental. Las WCAG establecen ratios concretos de contraste mínimo, que se pueden comprobar fácilmente con herramientas gratuitas.
Un caso muy habitual es el de webs con un diseño muy minimalista que usan texto gris claro sobre fondo blanco porque visualmente parece elegante y moderno. El problema es que ese contraste tan bajo hace que el texto sea difícil de leer para una parte importante de los usuarios, no solo para quienes tienen baja visión, sino para cualquiera que esté mirando la pantalla en un día soleado o simplemente al final de una larga jornada frente al ordenador.
No depender solo del color para transmitir información
Es habitual ver formularios que marcan un campo como incorrecto solo poniendo el borde en color rojo. Para una persona con daltonismo, que no distingue bien el rojo del verde, esa señal visual puede pasar completamente desapercibida. Lo correcto es acompañar siempre el color con otro elemento, como un icono, un texto explicativo o un cambio de forma, para que el mensaje llegue independientemente de si la persona percibe bien ese color concreto o no.
Estructura correcta de encabezados
Los encabezados, del h1 al h6, no son solo una cuestión de tamaño de letra, son una cuestión de estructura lógica del contenido. Una persona que usa lector de pantalla puede navegar saltando directamente de encabezado en encabezado para hacerse una idea rápida del contenido de la página, algo parecido a cuando una persona vidente ojea rápidamente los títulos de un artículo antes de decidir si le interesa leerlo entero.
Para que esto funcione bien, los encabezados deben seguir un orden jerárquico lógico, con un único h1 por página que resuma el tema principal, seguido de h2 para las secciones principales, h3 para subsecciones dentro de esas secciones, y así sucesivamente, sin saltarse niveles solo por una cuestión de estilo visual.
Navegación completa por teclado
Todos los elementos interactivos de tu web, como enlaces, botones, campos de formulario o menús desplegables, deben poder usarse completamente con el teclado, sin necesidad de un ratón. Esto es imprescindible para personas con discapacidad motriz que no pueden usar un dispositivo señalador, pero también lo usan muchos usuarios avanzados por comodidad.
Para comprobarlo tú mismo, puedes hacer una prueba muy sencilla, aparta el ratón y navega por tu propia web usando solo la tecla tabulador para moverte entre elementos, y la tecla enter o espacio para activarlos. Si en algún momento te quedas atascado, no puedes acceder a algún menú, o pierdes de vista dónde estás situado dentro de la página, es una señal clara de que hay una barrera de accesibilidad que corregir.
Indicadores de foco visibles
Cuando navegas con teclado, el navegador suele resaltar visualmente el elemento que tiene el foco en ese momento, normalmente con un contorno de color alrededor. Es muy habitual que, por motivos puramente estéticos, se elimine este indicador con una línea de código CSS, dejando a los usuarios de teclado completamente perdidos sin saber en qué parte de la página se encuentran en cada momento.
Si en algún momento has eliminado este estilo por diseño, la solución no es eliminarlo sin más, sino sustituirlo por un indicador de foco propio que combine bien con el diseño de tu web, pero que siga siendo claramente visible.
Formularios accesibles
Los formularios son uno de los puntos donde más problemas de accesibilidad suelen aparecer, y también uno de los más críticos, porque muchas veces son el paso final antes de completar una compra o una consulta.
- Cada campo debe tener una etiqueta asociada correctamente en el código, no solo un texto que aparece visualmente cerca del campo pero sin conexión real con él.
- Los mensajes de error deben ser claros, específicos y estar asociados al campo correspondiente, en lugar de un mensaje genérico como hay errores en el formulario sin especificar cuáles.
- Los campos obligatorios deben indicarse de forma que se entienda tanto visualmente como para un lector de pantalla, no solo con un asterisco de color que puede pasar desapercibido.
- Debe poder completarse todo el formulario usando solo el teclado, incluyendo los desplegables y los botones de envío.
Subtítulos y transcripciones en vídeo y audio
Cualquier vídeo con contenido hablado relevante debería incluir subtítulos, y si es posible, también una transcripción completa en texto debajo del vídeo. Esto no solo beneficia a personas con discapacidad auditiva, sino también a cualquiera que vea el contenido sin sonido, algo cada vez más habitual en el consumo de vídeo en redes sociales y páginas web.
Un caso real de esto lo vemos constantemente en empresas que suben vídeos corporativos o testimoniales a su web sin ningún tipo de subtítulo. Con la cantidad de herramientas automáticas de generación de subtítulos que existen hoy en día, revisar y corregir manualmente unos subtítulos generados automáticamente lleva relativamente poco tiempo comparado con el beneficio que aporta en accesibilidad y en tiempo de visualización, ya que muchos usuarios simplemente abandonan un vídeo sin subtítulos si no pueden o no quieren activar el sonido en ese momento.
Texto que se pueda ampliar sin romper el diseño
Muchas personas con baja visión aumentan el tamaño del texto en su navegador, a veces hasta un 200 por ciento o más. Una web accesible debe seguir funcionando correctamente cuando esto ocurre, sin que el texto se salga de su contenedor, sin que los botones dejen de verse completos, y sin que aparezcan barras de desplazamiento horizontales incómodas que obliguen a mover la página de un lado a otro para leer una sola línea.
Uso correcto de ARIA, con precaución
ARIA son unas siglas que hacen referencia a un conjunto de atributos que se pueden añadir al código HTML para dar información adicional a las tecnologías de asistencia sobre elementos que, de otra forma, no serían comprensibles para ellas, como componentes interactivos personalizados hechos con JavaScript.
La primera regla de ARIA es no usar ARIA si no hace falta
Esto suena contradictorio, pero es un principio muy repetido entre quienes trabajan en accesibilidad. Siempre que exista un elemento HTML nativo que ya cumpla la función que necesitas, como un botón, un enlace o un campo de formulario estándar, es mejor usar ese elemento nativo que intentar recrear su comportamiento con una capa de ARIA añadida encima. Los elementos nativos ya vienen con toda la accesibilidad incorporada de serie, mientras que replicarla manualmente con ARIA es mucho más fácil de hacer mal.
Cuándo sí conviene usar ARIA
ARIA resulta muy útil para componentes que no tienen un equivalente nativo directo en HTML, como pestañas personalizadas, ventanas modales, menús desplegables complejos o notificaciones dinámicas que aparecen sin recargar la página. En estos casos, los atributos ARIA ayudan a que un lector de pantalla entienda qué tipo de componente es, cuál es su estado actual, por ejemplo si está abierto o cerrado, y qué relación tiene con otros elementos de la página.
Herramientas para comprobar la accesibilidad de tu web
No hace falta ser un experto para empezar a detectar problemas de accesibilidad en tu web. Existen herramientas gratuitas que hacen buena parte del trabajo de diagnóstico inicial.
WAVE
Es una herramienta gratuita, disponible como extensión de navegador o como página web donde introduces tu URL, que analiza tu página y señala visualmente los problemas de accesibilidad detectados, como imágenes sin texto alternativo, contrastes insuficientes o problemas de estructura, todo directamente sobre la propia página para que veas exactamente dónde está cada fallo.
Lighthouse de Google Chrome
Integrada directamente en las herramientas de desarrollador de Chrome, Lighthouse incluye una auditoría de accesibilidad además de las de rendimiento y SEO que ya conoces si has trabajado en la velocidad de tu web. Te da una puntuación y un listado concreto de qué corregir, con enlaces a documentación para entender cada problema.
Axe DevTools
Otra extensión muy usada, especialmente entre desarrolladores, que se integra en las herramientas de desarrollador del navegador y ofrece un análisis detallado con explicaciones claras de cada problema detectado y cómo solucionarlo.
Comprobadores de contraste de color
Herramientas como el comprobador de contraste de WebAIM permiten introducir un color de texto y un color de fondo y te dicen al instante si cumplen los ratios mínimos exigidos por las WCAG, tanto para texto normal como para texto grande.
Pruebas manuales, insustituibles
Aunque las herramientas automáticas detectan una buena parte de los problemas, se calcula que solo son capaces de identificar entre un 30 y un 40 por ciento de los problemas reales de accesibilidad. El resto requiere pruebas manuales, como navegar por tu web solo con teclado, o probarla con un lector de pantalla real, como NVDA, que es gratuito y funciona en Windows, o VoiceOver, que viene integrado de serie en los dispositivos de Apple.
Un ejemplo real de mejora progresiva de accesibilidad
Para que veas cómo se aplica todo esto en un caso concreto, vamos a repasar el proceso de una empresa de servicios financieros que decidió mejorar la accesibilidad de su web, en parte por cumplimiento normativo y en parte porque detectaron quejas recurrentes de usuarios mayores que tenían dificultades para usar la web.
El proceso se organizó en varias fases, empezando por lo más urgente y de mayor impacto:
- Auditoría inicial con Lighthouse y WAVE, que reveló más de doscientas imágenes sin texto alternativo, contrastes insuficientes en los botones principales de llamada a la acción, y un formulario de contacto completamente inutilizable con teclado.
- Corrección de los textos alternativos de todas las imágenes relevantes, priorizando primero las páginas con más tráfico.
- Ajuste de la paleta de colores corporativa para cumplir los ratios de contraste exigidos, manteniendo la identidad visual de la marca pero oscureciendo ligeramente algunos tonos que resultaban demasiado claros.
- Reconstrucción del formulario de contacto y del formulario de solicitud de productos, asegurando que cada campo tuviera su etiqueta correctamente asociada y que todo el proceso se pudiera completar sin usar el ratón en ningún momento.
- Revisión completa de la estructura de encabezados de todas las páginas principales, que en muchos casos usaban etiquetas de encabezado solo por su tamaño visual, sin seguir ningún orden lógico.
- Incorporación de subtítulos a todos los vídeos explicativos de productos financieros que tenían en la web.
El resultado, además de acercarse mucho más al cumplimiento del nivel AA de las WCAG, fue una reducción notable en las quejas de usuarios recibidas por el servicio de atención al cliente relacionadas con dificultades de uso de la web, y un aumento medible en la tasa de finalización de los formularios de solicitud de productos, lo que confirma que la accesibilidad, además de ser lo correcto, también tiene un impacto directo y positivo en los resultados del negocio.
Errores comunes al abordar la accesibilidad
Al igual que pasa con otras áreas técnicas, hay ciertos errores que se repiten mucho cuando una empresa empieza a trabajar en accesibilidad por primera vez.
Pensar que un plugin lo soluciona todo automáticamente
Existen en el mercado ciertos widgets que se instalan con una línea de código y prometen hacer accesible una web de forma automática mediante inteligencia artificial. La realidad es que estas soluciones, aunque pueden ayudar en algunos aspectos superficiales, no solucionan los problemas de fondo relacionados con la estructura del código, y en algunos casos incluso han sido objeto de demandas porque no cumplían lo que prometían. La accesibilidad real requiere trabajar directamente sobre el código y el diseño de la web, no añadir una capa superficial encima.
Tratarlo como un proyecto puntual en lugar de un proceso continuo
Es habitual hacer una gran revisión de accesibilidad una vez, corregir los problemas encontrados, y después olvidarse completamente del tema mientras la web sigue evolucionando con contenido nuevo. Cada página nueva, cada imagen nueva, cada funcionalidad nueva que se añade a la web debe pasar por los mismos criterios de accesibilidad que se aplicaron en la revisión inicial, o los problemas volverán a acumularse con el tiempo.
Confiar solo en herramientas automáticas
Como comentábamos antes, las herramientas automáticas son un buen punto de partida, pero no detectan todos los problemas. Confiar exclusivamente en una puntuación alta de Lighthouse sin haber hecho ninguna prueba manual con teclado o con un lector de pantalla real puede dar una falsa sensación de seguridad.
No involucrar a personas con discapacidad real en las pruebas
La forma más fiable de saber si tu web es realmente accesible es que la pruebe alguien que de verdad la necesite accesible, no solo un equipo técnico simulando el uso de un lector de pantalla. Cada vez más empresas incorporan pruebas de usuario con personas con distintas discapacidades como parte habitual de su proceso de desarrollo, y los resultados suelen revelar matices que ninguna herramienta automática ni ningún equipo interno, por bien preparado que esté, habría detectado por su cuenta.
Cómo integrar la accesibilidad en el proceso de trabajo diario
La accesibilidad funciona mucho mejor cuando se integra desde el principio del proceso de creación de contenido y desarrollo, en lugar de tratarla como una revisión final antes de publicar algo.
En la fase de diseño
- Comprueba el contraste de colores desde el primer boceto, no al final cuando ya está todo maquetado.
- Diseña pensando en cómo se vería la interfaz con el texto ampliado un 200 por ciento.
- Ten en cuenta el orden lógico en el que un usuario de teclado recorrería cada pantalla.
En la fase de creación de contenido
- Escribe siempre un texto alternativo descriptivo al subir cualquier imagen nueva.
- Usa un lenguaje claro y frases no excesivamente largas, algo que además beneficia a cualquier lector, no solo a quien tiene una discapacidad cognitiva.
- Estructura el contenido con encabezados de forma jerárquica y coherente, no solo por estética visual.
- Añade subtítulos a cualquier vídeo antes de publicarlo, no como una tarea pendiente para más adelante.
En la fase de desarrollo
- Usa siempre elementos HTML nativos cuando exista una opción adecuada, antes de recurrir a soluciones personalizadas con ARIA.
- Prueba cada nueva funcionalidad con navegación por teclado antes de darla por terminada.
- Ejecuta una auditoría automática con Lighthouse o Axe como parte del proceso habitual antes de publicar cambios importantes.
Checklist inicial para empezar a mejorar tu web hoy mismo
Si has llegado hasta aquí y quieres empezar a actuar, aquí tienes un resumen ordenado con los primeros pasos, pensados para dar los mayores resultados con el menor esfuerzo inicial.
- Ejecuta un análisis con Lighthouse y WAVE para tener un primer diagnóstico general de tu web.
- Revisa y corrige los textos alternativos de las imágenes más importantes, empezando por las páginas con más visitas.
- Comprueba el contraste de los textos y botones principales con una herramienta de contraste de color.
- Navega por tu web entera usando solo el teclado y anota cada punto donde te quedes atascado.
- Revisa la estructura de encabezados de tus páginas principales para asegurarte de que sigue un orden lógico.
- Comprueba que tus formularios más importantes, como el de contacto o el de compra, se pueden completar enteros sin usar el ratón.
- Añade subtítulos a los vídeos de tu web que todavía no los tengan.
- Establece la accesibilidad como un criterio habitual en cada nueva pieza de contenido o funcionalidad que publiques a partir de ahora.
La accesibilidad web no es un lujo reservado para grandes empresas con departamentos técnicos enormes, ni tampoco un simple requisito legal que cumplir por obligación y olvidar. Es, en el fondo, una forma de asegurarte de que el trabajo que has puesto en tu web llegue realmente a todas las personas que podrían beneficiarse de él, sin dejar a nadie fuera por el camino. Empieza por lo básico, ve avanzando poco a poco, y verás cómo, además de hacer lo correcto, tu web se vuelve más clara, más usable y mejor para absolutamente todo el mundo que la visite.
Comentarios