12 Formas para Mejorar la Accesibilidad de Nuestra Web

Al optimizar el diseño de tu sitio web, hay un mercado muy importante que querrás tener en cuenta cuando pienses en el acceso y la usabilidad: En todo el mundo hay más de mil millones de personas con discapacidades que van desde discapacidades visuales a dificultades de aprendizaje o pérdidas auditivas, y muchas más.

Dado que Internet no es una plataforma de talla única, el diseño de sitios web inaccesibles impide que las personas de la comunidad de discapacitados tengan una experiencia en línea fluida y coherente. (También es posible enfrentarse a graves sanciones legales por no adherirse a la Ley de Estadounidenses con Discapacidades y no desarrollar un sitio web que sea accesible para todos – ¡así que hable con su equipo legal!)

La creación de un sitio web accesible ampliará inmediatamente su audiencia potencial, mejorará su sitio web desde una perspectiva general de diseño y usabilidad, y mejorará su SEO (Más sobre eso más adelante). Además, crear accesibilidad y usabilidad es mucho más fácil de lo que piensas.

A continuación, describimos los principales obstáculos a los que se enfrentan los usuarios con discapacidad y los cambios que puedes hacer para mejorar la accesibilidad de tu sitio web. Aprenderás a crear un sitio web para personas con discapacidad y para los distintos tipos de hardware y software que utilizan para acceder a los sitios web.

Obstáculos Fundamentales para la Accesibilidad de las Personas con Discapacidad

Aunque existen muchas discapacidades y condiciones que pueden afectar a la forma en que las personas navegan por Internet, nos gustaría destacar algunas de las más comunes:

  • Deficiencia visual: Puede ir desde la ceguera parcial a la total e incluye la dificultad para ver los contrastes de color.
  • Deterioro de la audición: Puede variar desde una pérdida parcial a una total de la audición.
  • Habilidades motrices/discapacidades físicas: Esto incluye la dificultad para mover ciertas partes del cuerpo o ser capaz de realizar movimientos precisos de forma efectiva (por ejemplo, la capacidad de utilizar el ratón de un ordenador).
  • Convulsiones fotosensibles: Esto incluye condiciones, tales como la epilepsia, que pueden causar convulsiones desencadenadas por luces intermitentes.
  • Discapacidades cognitivas: Esto incluye condiciones que afectan a la función cognitiva, como la demencia y la dislexia.

Herramientas que Utilizan las Personas con Discapacidad para Acceder a Internet

Con los avances en las tecnologías de apoyo, las personas pueden utilizar lectores de pantalla (Que leen el texto de cada página en voz alta), software de reconocimiento de voz (que convierte la palabra hablada en texto), terminales Braille y teclados alternativos para adaptarse a necesidades especiales.

Al diseñar (O rediseñar) tu sitio web teniendo en cuenta estas herramientas, estarás un paso por delante de más del 90 por ciento de los sitios web que no son accesibles para las personas con discapacidad.

Comprende a tu Público

Aunque puede ser difícil comprender lo que significa ver tu sitio web como usuario con una discapacidad, hay herramientas que puedes utilizar para entenderlo mejor.

Puedes ver cómo las personas interactúan con tu sitio web utilizando tecnologías de apoyo como los lectores de pantalla (Google ofrece una descarga gratuita llamada ChromeVox) o leer un poco más sobre cómo las personas con discapacidad personalizan sus navegadores. Estas dos actividades te ayudarán a comprender mejor cómo desarrollar un sitio web más accesible.

12 Formas de Hacer que tu Sitio Web sea Accesible

1. Usar Etiquetas Alt

Las etiquetas Alt son esas pequeñas palabras que aparecen cuando se pasa el cursor sobre una imagen en un sitio web. ¿De dónde vienen? Por lo general, es el nombre de archivo que utilizó para guardar esa imagen, pero si tiene conciencia de SEO (¡como debería ser!), ha cambiado las palabras de esa etiqueta alt para que sea algo relevante para su sitio web y la imagen en sí misma.

Por ejemplo: Si tienes una infografía, puede que la hayas guardado como «small_business_growth_infographic_2019», pero al colocar esa infografía en tu sitio web, el diseñador web consciente de SEO habría cambiado esa etiqueta alt por algo parecido a «El crecimiento de las pequeñas empresas alcanza los 1,5 billones de Euro en 2019».

¿Cómo es esto importante para las personas con discapacidad? Para las personas con discapacidad visual que utilizan lectores de pantalla, las etiquetas alt se leen en voz alta para que el usuario sepa cuál es la imagen. Las etiquetas alt mejoradas aumentan la accesibilidad, a la vez que proporcionan a los motores de búsqueda más información para rastrear, así que tómate el tiempo necesario para crear etiquetas alt precisas y sucintas.

También es importante tener en cuenta que cómo estos lectores de pantalla leen la información. Cuando use abreviaturas como FBI, en lugar de la Oficina Federal de Investigaciones, asegúrese de poner puntos entre cada letra (F.B.I.). Sin los puntos, el lector de pantalla leerá la palabra fonéticamente, causando un montón de confusión. (Esto es cierto para todo el contenido, pero es importante mencionarlo aquí, ya que las imágenes juegan un papel clave en las campañas de marketing).

2. Crear Subtítulos y Transcripciones

¿Tiene su sitio web muchos vídeos? Para que estos vídeos sean accesibles a las personas con discapacidad, es necesario proporcionar subtítulos y/o una transcripción del audio.

Muchos sitios de alojamiento de vídeos, como YouTube, proporcionan herramientas gratuitas para que los usuarios añadan sus propios subtítulos, y también hay servicios gratuitos de transcripción de vídeos disponibles, como oTranscribe, Express Scribe y The FTW Transcriber.

3. Cuide sus Enlaces

Cuando integre un enlace en un mensaje, descríbalo si es posible. En lugar de «Haga clic aquí para obtener más información», intente «Para obtener más información sobre cómo hacer que su sitio web sea accesible, haga clic aquí».

También aumente la facilidad de uso para sus usuarios daltónicos o con problemas de color subrayando sus enlaces y asegurándose de que haya un contraste de color entre el texto del hipervínculo y el texto normal.

4. Usuarios Daltónicos

Practique opciones de color inteligentes en todo su sitio Web para que los usuarios daltónicos y con problemas de color puedan navegar mejor por su sitio. Algunas reglas generales a las que debe atenerse incluyen:

  • Evite emparejar colores chillones (Como el amarillo, el azul y el verde) que podrían causar tensión ocular. ¿No está seguro de lo que queremos decir? Revise estos ejemplos de malas elecciones de color.
  • Asegúrese de que tiene un buen contraste de colores en su sitio para que los elementos sean distinguibles.
  • Utilice texto oscuro contra un fondo claro (Como el texto negro sobre un fondo blanco) para que los colores no se mezclen entre sí y dificulten la lectura.

¿Se ha perdido un poco en el departamento de colores? WebAIM tiene una gran herramienta (Y gratuita) que puede utilizar para calificar el contraste de sus opciones de color.

5. Haz clic en él

Para los usuarios con problemas de movilidad que tienen dificultades para hacer clic en los elementos pequeños, haga los elementos sobre los que se puede hacer clic más grandes con un rango de clic más amplio, de modo que mientras hagan clic en la proximidad general de su elemento sobre el que se puede hacer clic, estarán listos para funcionar.

Sabemos lo que está pensando: No tengo ni idea de cómo hacer eso. No temas. No es tan difícil como podrías pensar. Echa un vistazo a esta guía de instrucciones de Webcredible, que muestra (En unos pocos pasos sencillos) cómo puedes manipular tu código para que se pueda hacer clic en él.

6. Hazlo Simple

Divida su copia en párrafos más pequeños, sea específico con un tono conversacional, utilice puntos de viñetas, cree encabezados claros junto con medios interactivos siempre que sea posible, y siempre tenga llamadas súper claras a la acción. Todas estas cosas harán mucho más fácil para aquellos que utilizan lectores de pantalla entender mejor el contenido que usted está entregando.

No sólo es útil para básicamente todo el mundo, sino que es absolutamente imperativo para sus usuarios de edad avanzada y aquellos con problemas de aprendizaje.

7. Asegúrate de que tu Sitio Web es Compatible con el Teclado

Dado que muchas tecnologías de apoyo se basan en la navegación sólo mediante teclado, debes asegurarte de que tu sitio web puede funcionar sin necesidad de utilizar el ratón y de que funciona sin problemas utilizando únicamente la funcionalidad del teclado.

Esto incluye la utilización de la tecla tab para saltar entre las diferentes áreas de una página, como enlaces, botones y formularios. Para ver si su página web ya está configurada para funcionar sólo con un teclado, intente navegar sin usar el ratón y utilizando sólo la tecla Tab.

¿Es capaz de saltar fácilmente entre diferentes elementos, o es difícil? Si es difícil, consulte la guía de WebAIM para el diseño de la accesibilidad del teclado.

8. Asegúrese de que Todo el Contenido es Fácilmente Accesible

¿Tiene contenido dinámico en su página que cambia sin que la página se recargue (Por ejemplo, un banner giratorio)? Si es así, asegúrate de utilizar los hitos de ARIA para informar a las herramientas de ayuda sobre el cambio de contenido. Los puntos de referencia ARIA son etiquetas que se añaden al contenido para informar a las herramientas de asistencia del contenido adicional.

Para obtener más información sobre los puntos de referencia ARIA y cómo utilizarlos, haz clic aquí.

9. Diseña tus Formularios para la Accesibilidad

Tal y como dijimos sobre el contenido y el diseño, la idea es mantener las cosas simples y claras para aumentar la accesibilidad. Esto se aplica a sus formularios en línea. Querrás asegurarte de que cada campo está claramente etiquetado para que el formulario sea fácilmente leído por los lectores de pantalla.

También es útil incluir instrucciones e información clara en el formulario, explicando cómo rellenarlo correctamente.

10. Habilitar un Texto Redimensionable que no Interrumpa su Sitio Web

Todos los dispositivos, desde su tableta hasta su smartphone y su escritorio, permiten a los usuarios redimensionar el texto, una característica especialmente útil para aquellos que tienen problemas de visión. Cuando construya (O reconstruya) su sitio web, querrá asegurarse de que su diseño es compatible con esta característica. Deberá:

  • Evitar las unidades absolutas (Como la utilización de píxeles para especificar el tamaño del texto).
  • Utilizar tamaños relativos (Que permiten redimensionar el texto en función del contenido y el tamaño de la pantalla).
  • Asegúrese siempre de mantener activada la «escalabilidad de usuario» para que los usuarios tengan la opción de redimensionar su texto.

Si no está seguro de si su sitio web ya está configurado para cumplir estos criterios, puede utilizar la guía de WebAIM sobre tamaños de fuentes.

11. Evite los Medios Automáticos

¿Alguna vez ha tenido abiertas un montón de pestañas del navegador de Internet y, de repente, una de ellas empezó a reproducir automáticamente un vídeo y no pudo averiguar en qué pestaña estaba el vídeo?

Por muy molestos que puedan ser los archivos multimedia de reproducción automática, son un problema aún mayor para la accesibilidad. ¿Te imaginas lo difícil que hubiera sido desactivar ese vídeo con un lector de pantalla?

En general, lo mejor es incluir en tu página web sólo contenidos multimedia que se inicien después de que un usuario los haya solicitado.

12. Toca tu propia bocina

Has hecho todo el trabajo para llegar a este mercado de mil millones de personas y ahora tu página web es accesible. ¿Por qué no se lo cuentas al mundo con tu propia guía de accesibilidad? Explica todas las formas en que tu renovado (O flamante) sitio web es amigable con la discapacidad.

Consulta la propia guía de accesibilidad de la BBC aquí. No tienes que ser tan exhaustivo como lo fue la BBC, pero es un ejemplo excelente y podría darte algunas ideas geniales sobre cómo empezar.

0 comentarios

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *