Accesibilidad web fácil: tu guía definitiva de 2024

La accesibilidad web significa hacer que tu sitio web sea accesible para todos, incluyendo los usuarios con discapacidades o déficits de algún tipo. Internet es un espacio que no es físico, así que debería ser igualmente de accesible para todos, pero solo si planeamos esa accesibilidad.

“El poder de la Web está en su universalidad. El poder de la Web está en su universalidad. Un acceso para todo el mundo independientemente de su discapacidad es un aspecto esencial” — Tim Berners-Lee, inventor de la Web.

¿Quién necesita un sitio web accesible?

Piensa en los problemas usuales de los sitios web inaccesibles. ¿Has visitado un sitio web con una fuente pequeñita que apenas si podías leer?, ¿páginas confusas donde no se sabe qué hacer a continuación?, ¿o con botones pequeños que no estaban claramente definidos? Como mínimo, es probable que te hayas sentido frustrado. Eso es lo que la accesibilidad web viene a solucionar.

Algunas usuarios con discapacidades comunes que son tenidas en cuenta por los planificadores de accesibilidad web, son:

• Visitantes con discapacidad visual total.
• Usuarios con visión baja o discapacidad visual parcial.
• Usuarios con discapacidad auditiva.
• Usuarios con dislexia, a quienes se les dificulta entender textos largos.
• Usuarios con alteraciones cognitiva o neurológicas.
• Usuarios con discapacidad física.

Los sitios web accesibles son buenos para todos

Los sitios web accesibles no son solo para usuarios con discapacidad, sino que ayudan a todo el mundo:

• A usuarios de Internet de edad avanzada, a los que se les puede dificultar hacer clic en botones pequeños en un sitio web.
• A usuarios que no están familiarizados con Internet, a quienes les puede costar entender dónde hacer clic en una nueva pestaña.
• Si estás en una estación de tren ruidosa y quieres ver un vídeo, pero olvidaste tus auriculares, dependes de los subtítulos para personas con discapacidad auditiva.
• Al usar tu tableta bajo la brillante luz del sol, necesitas mejores opciones de contraste que sirven para ayudar a usuarios con discapacidad visual.
• Puede que necesites usar sitios web accesibles si te rompes un brazo y no puedes usar el ratón de forma efectiva, o si tienes un bebé en una mano y necesitas completar un formulario importante en línea con la otra.

Cuando creas un sitio web accesible, también rellenas muchas otras casillas al mismo tiempo, puesto que el diseño web móvil, la usabilidad, el SEO y la experiencia óptima de usuario son prácticas que se solapan con el diseño accesible. Además, si tu sitio web es fácil de usar, no causa frustración y está abierto a usuarios con discapacidad, será mucho más atractivo para cualquiera que te visite. Los sitios web accesibles usualmente tienen mejores resultados de SEO, mayor alcance, menores costes de mantenimiento y un nivel más alto de responsabilidad social corporativa.

Las leyes sobre accesibilidad web

Aunque hay muchos beneficios de tener sitios web accesibles, es importante recordar que no es algo opcional. La Convención Internacional sobre los Derechos de las Personas con Discapacidad de las Naciones Unidas define el acceso a las tecnologías de la información y de la comunicación como un derecho humano básico, y esto incluye el Internet. La mayoría de países, incluida España, tienen leyes que obligan a los sitios web a cumplir ciertos estándares de accesibilidad. El Consorcio World Wide Web (W3C), el órgano rector de la web, ha publicado guías de accesibilidad con base en cuatro principios:

• Perceptible, es decir que los usuarios puedan percibir los sitios web con sus sentidos (principalmente la vista y el oído).
• Operable con ratón, teclado y dispositivos de asistencia.
• Comprensible sin causar confusión.
• Robustez, en cuanto a ser accesible a una variedad de tecnologías nuevas y antiguas.

En los Estados Unidos, los sitios gubernamentales, organizaciones educativas y grupos sin ánimo de lucro usualmente están obligados a tener sitios web accesibles según la Sección 508 y 504 de la Ley Estadounidense de Rehabilitación de 1973. Todos los sitios web tienen que cumplir con las obligaciones de la Ley sobre Estadounidenses con Discapacidades (ADA) de 1990 y con la Sección 255 de la Ley de Comunicaciones que legisla que los sitios web deben estar disponibles de forma equitativa para los usuarios con discapacidades.

Algunas organizaciones han sido enjuiciadas con éxito por no tener sitios web accesibles, fueron castigadas con multas considerables y su reputación se vio afectada en el proceso. En muchos casos en que la ley no está tan clara con respecto a los requisitos de accesibilidad, los negocios han decidido hacer todo lo que esté en su poder, en lugar de arriesgarse a un incumplimiento de las leyes.

Hacer tu sitio más accesible

Ciertas correcciones de accesibilidad son relativamente fáciles de implementar en tu sitio, como por ejemplo, cambiar el color de fondo a blanco o añadir subtítulos en tus vídeos. Otros son mucho más complejos de resolver y requieren habilidades de programación, como crear jerarquías de encabezados. Hemos hecho un resumen de las principales soluciones para accesibilidad web y te damos consejos sobre cómo conseguir aplicarlas.

Accesibilidad para usuarios con discapacidad visual

El Internet es muy visual, así que uno de los principales tipos de discapacidad para los que tienes que planificar al crear un sitio web accesible, es la discapacidad visual. Este tipo de discapacidad incluye:

• Ceguera total o parcial
• Visión baja
• Daltonismo
• Dificultad al distinguir colores y contrastes

Cuando planeas adaptarte a tus usuarios con discapacidad visual, también ayudas a todas las personas que:

• Estén visitando tu sitio web desde móvil o tableta con una pantalla pequeña.
• Tienen dislexia o les cuesta seguir instrucciones escritas.
• Están usando su dispositivo en la luz directa o intentan lidiar con reflejos en la pantalla.
• Tienen epilepsia que puede desencadenarse por imágenes resplandecientes o parpadeantes.

Cómo hacer que tu sitio sea más accesible para visitantes con discapacidad visual

El diseño accesible incluye:

Contenido: el sitio debe ser fácil de entender incluso cuando se lea en voz alta fuera de contexto por una herramienta lectora de pantallas.

Formato: las páginas con formato inadecuado no pueden agrandarse, ni se puede navegar en ellas o ajustarlas fácilmente para mejor visibilidad.

Diseño y disposición: a muchos visitantes con discapacidad visual les resultará difícil ver contrastes o ciertos colores.

Aquí hay algunas cosas que puedes comprobar en tu sitio web para asegurarte de que es accesible para visitantes con discapacidad visual:

• Asegúrate de que tus títulos describan la página claramente y que sean diferentes de los títulos de otras páginas para que los usuarios ciegos que escuchen con un lector de pantalla, puedan entender el contexto de la organización; y para que los usuarios con visión baja puedan obtener la información que necesitan.
• Comprueba que hay textos alternativos de imágenes para cada imagen. Los textos alternativos de imágenes deberían describir breve y claramente la imagen. Por ejemplo, el texto alternativo de imagen para un botón de búsqueda debería ser “búsqueda” no “lupa”. Estos textos alternativos pueden ser leídos en voz alta por un lector de pantalla.
• Garantiza que todos tus textos tengan una alta proporción de contraste, es decir, que hagan un claro contraste con el fondo, como con texto negro sobre fondo blanco o texto claro sobre fondo oscuro. Ten en cuenta que algunas personas, como los que tienen dislexia, tienen problemas para leer colores brillantes. Es mejor permitir a los usuarios especificar sus propios colores para los textos de tu sitio.
• Los usuarios con discapacidad visual tienden a usar comandos de teclado o de voz en lugar de un ratón. Necesitan botones y listas desplegables que muestren qué opciones tienen elegidas actualmente. Esto puede hacerse al resaltar la opción actual o añadir un borde.
• Todos tus textos tienen que estar en una fuente que sea lo suficientemente grande para ser leída fácilmente por tus visitantes. Las fuentes también deberían ser claras y fácil de entender, sin decoración adicional. Si eliges una fuente más pequeña, asegúrate de que la página carga correctamente si tu usuario decide aumentar manualmente el tamaño de la fuente.
• No tengas texto, botones o imágenes que destellan o parpadean. Esto puede desencadenar una crisis epiléptica, pero también es muy difícil de leer y comprender la información para usuarios con visión baja.
• Escoge tus colores sabiamente. No escojas nada demasiado brillante, ya que puede deslumbrar y confundir los ojos; ni tampoco demasiado tenue para poder verlos fácilmente.
• El 8% de los hombres y el 0,5% de las mujeres tienen daltonismo, así que nunca uses un color para definir un botón o un campo instruccional.
• Las imágenes muy grandes pueden ser confusas para muchos visitantes, especialmente si están viendo en una pantalla que no es lo suficientemente grande para ver toda la imagen. Esto también hace que tarde mucho en cargar o puede bloquearse mientras carga debido a su tamaño, así que los usuarios sin discapacidad también se verán afectados.
• Asegúrate de que cada vídeo tiene una alternativa de sonido o una transcripción en texto a la que se pueda acceder con un lector de pantalla.

Consejos avanzados de accesibilidad para usuarios con discapacidad visual

Muchas de las prácticas más avanzadas de accesibilidad visual son mejor dejarlas a un programador. Aquí hay algunos consejos avanzados de accesibilidad para desarrollar pensando en accesibilidad:

• Asegúrate de que los encabezados están claramente descritos en tu marcado HTML, para que los lectores de pantalla puedan navegar entre ellos.
• La programación CSS y los efectos de formato visual a menudo dificultan o hacen imposible a los usuarios ciegos poder acceder a la información del texto. Es mejor evitar el CSS y crear textos limpios y sin decoraciones.
• Diseña tus textos para agrandarlos fácilmente. Usa valores relativos de tamaño para que cuando el usuario agrande la pantalla, las letras no se solapen, no se eliminan los espacios entre líneas o se corten los finales de las frases de modo que se requiera desplazarse horizontalmente. Evita las imágenes de mapa de bits de texto, ya que son difíciles de agrandar.
• Permite a los usuarios navegar el sitio web usando entrada de voz, herramientas de voz a texto y texto a voz, lectores de voz y otras tecnologías de apoyo.
• Ofrece información clave en formato de sonido y visualmente. Por ejemplo, permite a los usuarios escuchar los textos de captcha para encontrar bots, a través de sonidos y visualmente.
• Determina las opciones de contraste y color para que sean ajustables, y que cada usuario pueda ajustarlos en su navegador según el color y contraste que les parezca más fácil de leer.
• Ofrece etiquetas descriptivas para tus enlaces, para que los usuarios con discapacidad visual que se encuentren una lista de enlaces en una página sin contexto, sepan a dónde va a cada enlace.
• Admite el uso total de teclado, lo que incluye una estructura de navegación intuitiva y lógica, y un foco de teclado que resalta los campos en un formulario y las opciones en un menú desplegable o lista mientras se usan los controles de teclado, y no solo el ratón.

Accesibilidad para personas con discapacidad auditiva

Hay muchas formas en que a las personas con discapacidad auditiva les cuesta usar Internet. Los visitantes de tu sitio web con discapacidad auditiva incluyen:

• Personas con sordera profunda con pérdida auditiva severa en ambos oídos.
• Personas con hipoacusia en uno o ambos oídos.
• Personas que pueden escuchar sonidos pero no lo suficientemente claro para distinguir lo que se dice.

Algunos usuarios de Internet que tienen discapacidad auditiva usan la lengua de signos para comunicarse y les puede costar leer texto. Esto significa que el texto usado en los sitios web tiene que ser sencillo y fácil de entender, con imágenes explicativas junto a instrucciones escritas.

Cuando te adaptas a usuarios con discapacidad auditiva, también se lo pones más fácil a:

• Usuarios en ambientes ruidosos como en estaciones de tren.
• Usuarios que desean mantener su actividad privada, por ejemplo, si están en el trabajo o comparten una habitación.
• Tu propio sitio, ya que puede archivar los vídeos por contenido y tema.

Cómo hacer que tu sitio sea accesible para visitantes con discapacidad auditiva

Para hacer que los sitios web sean accesibles para visitantes con discapacidad auditiva, es necesario que empieces a pensar sobre el contenido. Algunos usuarios sordos usan principalmente la lengua de signos y necesitan que las instrucciones escritas estén en términos muy sencillos. El formato es otro problema potencial, por lo que se recomienda incluir opciones de control de volumen ajustable. Finalmente, el diseño accesible para usuarios sordos debería incluir el uso de imágenes explicativas, entre otros pasos.

Para mejorar la accesibilidad de tu sitio para visitantes con discapacidad auditiva, empieza revisando los siguientes puntos:

• Imágenes explicativas que acompañan instrucciones de sonido o escritas, para así ajustarte a usuarios sordos que están más familiarizados con la lengua de signos que con la palabra escrita.
• Las instrucciones y comentarios en lengua de signos.
• Los vídeos y otro contenido multimedia que tengan subtítulos deben venir con subtítulos que sean fáciles de activar y desactivar usando los comandos de teclado, no solo el ratón. Deberían estar disponibles en una variedad de idiomas o acompañados por lengua de signos internacional.
• Asegúrate de que no hay nada que solo sea con sonido, como pitidos, alarmas de error o sugerencias en sonido.
• Todos los materiales de sonido deben tener una transcripción por escrito que esté claramente disponible en la misma página que el fichero de audio.
• No tengas controles que solo funcionen con la voz. Todo debe poder ser operado a través de controles de teclado, así como con el ratón.

Consejos avanzados de accesibilidad para usuarios con discapacidad auditiva

Necesitarás la ayuda de un programador o tener conocimientos de programación para incorporar estas funciones de accesibilidad avanzada para usuarios con discapacidad auditiva.

• Facilita a los usuarios ajustar el volumen de un fichero de audio por separado al nivel de volumen del resto del sistema del ordenador.
• Asegúrate de que todos los ficheros de audio sean de la mayor calidad posible, sin ruidos de fondo, zumbidos u otras distracciones auditivas.
• Implementa los subtítulos ajustables que pueden verse especificarse para el tamaño correcto, contraste y color para cada preferencia de usuario.
• Incluye controles fáciles de usar para detener, pausar y retroceder en un fichero de sonido o vídeo.
• Añade una descripción en sonido, así como una transcripción. Esto le dice a los usuarios sordos sobre otras interacciones dentro del fichero de vídeo o audio, no solo las palabras que se hablaron.

Accesibilidad para personas con discapacidad física

Los usuarios de Internet pueden tener discapacidad física por muchas causas diferentes, pero tienden a resolverse de formas parecidas. Los déficits físicos que afectan el uso de Internet son:

• Personas con dedos o miembros amputados.
• Usuarios con artritis, reumatismo u otras condiciones que causan dolor en las articulaciones.
• Usuarios mayores y personas con condiciones que causan dedos temblorosos.
• Personas que sufren de distrofia muscular.
• Usuarios con destreza reducida y alteración de la coordinación ojo-mano.
• Personas con paraplejía o cuadriplejía.

Los usuarios de Internet con trastornos o alteraciones de origen neurológico a menudo sufren de discapacidad física como resultado. Diseñar un sitio web que sea accesible para todos los usuarios con discapacidad física también ayuda a usuarios que:

• Usan los controles de teclado en lugar de un ratón.
• Se les dificulta hacer clic en el espacio correcto en una página, como cuando están a bordo de un viaje movido en tren.
• No pueden usar ambas manos, como un padre que carga a su bebé mientras escribe o alguien con el brazo roto.
• Escriben o navegan por Internet con mucha lentitud, o que son novatos en el uso de Internet.

Cómo hacer que tu sitio sea accesible para visitantes con discapacidad física

Cuando diseñas un sitio que sea accesible para usuarios con discapacidad física, lo primero que hay que considerar es hacerlo usable sin un ratón. Para los usuarios con discapacidad física y debilidad, los controles de teclado son mucho más fáciles de usar que un ratón. Algunos usuarios podrían estar usando su boca o pie para controlar, con lo que es difícil ser precisos; o software de rastreo ocular que no puede interactuar con todo tipo de página web.

Aquí hay algunos pasos a tomar para hacer tu sitio web más accesible para usuarios con discapacidad física.

• Crea botones mucho más grandes para que facilites a los usuarios con dedos temblorosos o limitaciones de coordinación, hacer clic dentro del campo del botón.
• Da mucho tiempo para completar las tareas antes de que la página diga que se ha agotado el tiempo de espera (time out), ya que los usuarios con discapacidad física pueden tardar más en introducir textos, teclear o hacer clic a un botón.
• Asegúrate de que todo el contenido está organizado de una forma lógica, con títulos y encabezados claros y bien organizados, para que los usuarios que usen controles de teclado puedan navegar a través del sitio web en una secuencia lógica, sin sentirse confundidos por la siguiente opción.

Consejos avanzados de accesibilidad para usuarios con discapacidad física

Tendrás acceso a muchas más funciones de accesibilidad si tienes a un programador que pueda cambiar el código del back end.

• Asegúrate de que tu sitio web admite controles de teclado. Esto debería incluir diferentes formas de resaltar o indicar una elección en un menú desplegable o al completar un formulario.
• Usa un formato e introduce tu contenido de una forma que sea accesible para los lectores de apoyo y otras herramientas que usan las personas con discapacidad física.
• Asegúrate de que todas las órdenes pueden activarse usando pulsaciones de teclas únicas. La mayoría de usuarios con discapacidad física solo pueden presionar una tecla a la vez.
• Crea un sitio web que pueda responder a control sin manos, como controles de voz, de pie, de boca o rastreadores de movimientos oculares.
• Crea opciones fáciles para corregir errores y equivocaciones, ya que los usuarios con discapacidad física frecuentemente tocan las teclas incorrectas o introducen un texto equivocado.
• Crea mecanismos que permitan a los usuarios saltarse los encabezados de la página, las barras de navegación y otros bloques de diseño sin usar el ratón.

Accesibilidad para usuarios con déficits en la capacidad cognitiva

Los usuarios de Internet con déficits en la capacidad cognitiva usualmente tienen dificultades en la memoria a corto plazo, les es difícil concentrarse y se distraen fácilmente. Estos usuarios pueden incluir:

• Individuos con discapacidad del desarrollo, trastornos de aprendizaje, alteraciones perceptivas o discapacidad intelectual.
• Individuos con problemas de salud mental.
• Usuarios mayores que sufren de las primeras etapas de una demencia.
• Usuarios con TDA o TADH y trastorno del espectro del autismo.
• Usuarios con pérdida de memoria a corto plazo y span atencional más corto.
• Personas con trastornos de salud mental como ansiedad o esquizofrenia, que causan dificultades para concentrarse, procesar o retener información.
• Personas con esclerosis múltiple, especialmente durante las crisis.

Cuando diseñas un sitio web para que sea accesible para usuarios con déficits en capacidades cognitivas, también ayudas a los usuarios que:

• No son hablantes nativos de tu idioma.
• Tienen un bajo nivel de estudios.
• No están acostumbrados a usar Internet.
• Sufren los efectos del envejecimiento.

Cómo hacer tu sitio accesible para visitantes con baja capacidad cognitiva

Diseñar un sitio web que sea accesible para usuarios con capacidad cognitiva baja empieza con el contenido, que necesita ser escrito de forma sencilla, con frases cortas e instrucciones muy directas. El déficit en la capacidad cognitiva no siempre va de la mano con una inteligencia baja, así que es importante que no subestimes a estos usuarios. Muchas de las necesidades de accesibilidad de los usuarios con déficits en las capacidades cognitivas se solapan con los usuarios que tienen discapacidad visual o auditiva, como por ejemplo, controles de teclado y lectores de apoyo, etiquetado consistente y diseño claro de navegación.

Aquí hay algunos pasos que puedes tomar para diseñar pensando en accesibilidad para usuarios con déficits en las capacidades cognitivas:

• Usa lenguaje sencillo y directo que no esté repleto de jerga y metáforas.
• Incluye ilustraciones e imágenes explicativas junto con el texto (como para los usuarios con discapacidad auditiva).
• Evita usar bloques de texto largos y densos que no están divididos por imágenes o espaciado. Es mucho más fácil entender cortos grupos de textos con imágenes claras e instruccionales.
• No uses texto que resplandece, parpadea o se desplaza en la página, porque les cuesta más tiempo poder leerlo y asimilarlo, y se verán limitados por las distracciones visuales.

Consejos avanzados de accesibilidad para usuarios con déficits de capacidades cognitivas

Un programador podrá añadir más funciones de accesibilidad. Algunos consejos avanzados de accesibilidad son:

• Da suficiente tiempo para que los lectores lentos respondan, completen formularios o comenten en una página web antes de que se acabe el tiempo (time out).
• Asegúrate de que el marcado de tu sitio puede ser leído por dispositivos lectores de pantalla para quienes tienen dificultades para entender las instrucciones escritas.
• Implementa una estructura de navegación lógica y jerárquica para facilitar a los usuarios que se muevan entre páginas y secciones.
• Ofrece la función de búsqueda y un menú jerárquico para una navegación más sencilla.
• Sé consistente en tu diseño web, posición de enlaces, estructura de las páginas y protocolos de etiquetado.
• Facilita a los usuarios el poder quitar animaciones confusas y distractoras, así como el audio en navegadores web y reproductores multimedia. Asegúrate de que el contenido multimedia no se reproduzca automáticamente al abrir una página web, y que sea fácil detenerlo cuando empiece.
• Evita usar diseños visuales de páginas que no pueden ajustarse fácilmente con controles CSS o del navegador web.

Cómo comprobar la accesibilidad de tu sitio web

Si no estás seguro de que tu sitio web cumple los estándares generales y las normas de accesibilidad, hay muchas herramientas y verificadores que pueden ayudarte a comprobar si estás cumpliendo e identificar dónde necesitas mejorar. Primero que todo, puedes realizar comprobaciones básicas de accesibilidad sin descargarte ninguna herramienta. Solo intenta redimensionar el texto, escanear los títulos y comprobar las etiquetas alternativas de imágenes. Encontrarás una selección de acciones básicas de revisión de accesibilidad en el sitio web del W3C o puedes usar herramientas como User1st y AChecker para una revisión rápida.

Es más fácil y rápido realizar comprobaciones si te descargas herramientas de evaluación. W3C recomienda la barra de herramientas Web Developer para Chrome, Opera y Firefox, y la barra de herramienta Web Accesibility para Internet Explorer. Todas estas opciones son extensiones gratuitas disponibles en varios idiomas. También hay muchas más herramientas gratuitas y de pago allí afuera que te pueden ayudar.

Algunas cosas que te sugerimos buscar cuando escojas un comprobador de accesibilidad web son:

• En qué idiomas funciona.
• Qué estándares utiliza como norma.
• Qué formatos comprueba.
• Qué tipo de herramienta es: para navegadores web, app para móvil u ordenador, herramienta de comandos, etc.
• Qué tanto puedes comprobar manualmente.
• Si te ofrece informes, reseñas en la misma página, transformaciones y más.

Finalmente, no hay una sola herramienta que pueda comprobar la accesibilidad completa de tu sitio web. Necesitarás combinar una variedad de herramientas para evaluar diferentes aspectos de tu sitio web. Pero ni siquiera la mayor caja de herramientas de comprobadores de accesibilidad puede garantizar la accesibilidad de tu sitio. Esto requiere que un humano lo supervise y que alguien ponga a prueba varios aspectos como el texto ampliado, que vea las páginas usando visualizaciones específicas y que piense en todas las barreras a las que los usuarios con discapacidad se enfrentan.

¡Lee sobre cómo más del 95% de los sitios web del gobierno excluyen imágenes de personas con discapacidad aquí!

Conclusión

Crear un sitio web accesible toma algo más de tiempo y planificación, pero te permite cosechar muchas recompensas. Además de cumplir con las leyes y regulaciones en tu país, un sitio web accesible es más fácil de usar para todas las personas, mejora tu SEO y ayuda a todos tus visitantes a tener una experiencia más fluida y agradable en tu sitio. También abre tu sitio web para el 15-20% de la población que tienen algún tipo de discapacidad.

Aunque algunos pasos son más complicados y necesitan la ayuda de un desarrollador, puedes hacer más accesible tu sitio web desde el día uno con algunos cambios sencillos y rápidos. Un sitio web accesible puede significar más trabajo, pero no hay duda de que vale la pena para todos.