Cuando realizamos un diseño web además de tener en cuenta que lo que diseñamos debe ser usable, debemos tener en cuenta que sea accesible. Esto nos permitirá cumplir con nuestros objetivos de negocio ya que facilitamos el camino del usuario durante todo el proceso interactivo mejorando la calidad del producto.
¿Qué es la Accesibilidad Web?
La Accesibilidad Web son un conjunto de pautas, directrices o estándares que permiten que cualquier persona pueda acceder a una página web. Estas pautas están destinadas a facilitar el acceso o interacción con nuestra página web a personas independientemente de sus conocimientos, capacidades personales o características técnicas de su hardware. Se combina por tanto el diseño, la programación y la tecnología para construir un internet sin barreras que permita a todos los usuarios la plena interacción con la web.
En la actualidad no existe una definición formal de este concepto de accesibilidad, pero si se ha desarrollado una iniciativa, la iniciativa WAI (Web Accesibility Iniciative) por la organización W3C (World Wide Web) que reúne los aspectos más relevantes que debe tener una web si ésta quiere ser accesible.
Gracias a los componentes de accesibilidad que ya ponen a nuestra disposición la mayoría de los sistemas operativos solo nos quedará realizar algunos ajustes o adaptaciones adicionales en nuestra página para mejorar todavía más esa experiencia de usuario. Entre estas mejoras podemos encontrar:
Textos y contenido
- No escribas textos en mayúsculas pues algunos lectores de pantalla podrían leer ese texto letra a letra, lo que dificultaría la comprensión al usuario.
- Estructura correctamente los contenidos. Tener una jerarquía en el código HTML con respecto a los títulos H1, H2… facilitará a los lectores de pantalla o Readers leer y procesar la información de una forma óptima.
Colores, diseño y fluidez
- Utiliza una estética y un diseño simple. Intenta dar la mayor información al usuario de donde esta y hacia dónde va.
- Utiliza colores con mucho contraste entre ellos para que un usuario con problemas de visión no tenga dificultades en visualizar los aspectos fundamentales de tu web.
- Diseña páginas fluidas y usables que simplifiquen las acciones a realizar por el usuario, permitiendo conseguir los objetivos más fácilmente.
Formularios o elementos interactivos
- Los formularios deben ser accesibles por teclado, lógicos y fáciles de usar.
- Ayúdate de los atributos ARIA de HTML para aportar más información al usuario, sobre todo si son formularios o elementos que tienen alguna funcionalidad especifica. Estos atributos permitirán identificar al usuario si está ante un botón, un campo para introducir la información o cualquier otro tipo de elemento.
- Añade controles de navegación claros en el formularios. El usuario debe saber como enviar la información, como avanzar, retroceder o cancelar el envío.
- Cuando se produzca algún error de validación, debes proporcionar información textual al usuario que describa la naturaleza del problema y que valores son admitidos.
Facilitar la navegación
- Ayuda a los Readers o lectores de pantalla poniendo en las imágenes texto alternativo y en los vídeos subtítulos descriptivos.
- Facilita la navegación por teclado en toda la página web, aumentando la interacción del usuario con ésta.
- Añade atajos de teclado en el menú principal para poder navegar más fácilmente hacia otras secciones de la web.
- Si existen elementos como iframes, añádeles un título descriptivo para que el usuario sepa que son elementos interactivos.
- Comprueba que el usuario pueda llegar a todos los elementos de la interfaz sin problemas.
Animaciones
- Evita utilizar animaciones que salten de forma muy brusca y no sean fluidas.
- Si hay animaciones automáticas en el site, añade botones de activación/desactivación de dicha animación.
- Evita que la animación sea un elemento que entorpezca la navegabilidad por el menú principal o el contenido.
Informar al usuario
- Informa al usuario que dispone de algún apartado de Accesibilidad Web para que pueda consultar las opciones de accesibilidad disponibles.
- Crea un Mapa Web que permita al usuario el acceso a las diferentes partes de la página con facilidad.
¿Existen herramientas para analizar la Accesibilidad Web?
Sí, disponemos de una serie de herramientas que nos permitirán analizar todos los puntos comentados anteriormente. Muchas de ellas son extensiones para el navegador que nos permitirán analizar in situ el código HTML y nos indicará que errores debemos corregir para mejorar la experiencia del usuario. Entre mis favoritas se encuentran:
- WAVE Web Accessibility Evaluation Tool, extensión para Chrome que analiza y nos indica, de forma general, que debemos cambiar en nuestro código HTML/CSS para mejorar la accesibilidad.
- Read Aloud: Texto A Voz, extensión de Chrome que nos permite ver como un lector o Reader procesa los textos de nuestra web y los transforma en voz.
- HedingsMap, extensión de Chrome que nos permite ver como se ordenan en nuestra página los títulos Hs, para poder darles un orden lógico y facilitar el acceso a la información a los Readers.
Diseñar y desarrollar nuestros productos digitales pensando en la accesibilidad es un reto que nos permitirá llegar cada vez a un mayor número de personas. Es importante porque además mejoramos la calidad del producto ofertado pensando en todas las necesidades del usuario.
*Fuentes bibliográficas:
W3 - Fundamentos de accesibilidad
W3 - Estándares/Pautas
Autor :
Publicado en : Marzo 24, 2022
Post por temática
