Hoy, amigos míos, vamos a adentrarnos en un tema que no solo es importante, sino que también puede cambiar vidas. Sí, estás pensando bien: ¡el diseño accesible!

 ¿Alguna vez te has topado con esas páginas web que parecen estar hablando otro idioma? Resulta que, en términos sencillos, el 89,4% de las páginas de inicio presenta algún que otro problemita. Pero, ¿por qué ocurre esto? ¿Es la falta de información? ¿Quizás los gastos para ponerlo en marcha? ¿O podría ser que simplemente no hemos dado suficiente atención a este asunto? En este artículo hablaremos un poco de todo esto.

1- Qué es el diseño accesible

El Diseño Accesible trata de hacer que la información y la tecnología sean accesibles para todas las personas, independientemente de sus habilidades o discapacidades. Es como diseñar un edificio con rampas y ascensores para que todos puedan acceder, en lugar de solo escaleras que excluyen a aquellos con dificultades de movilidad.

El diseño accesible es una herramienta que nos permite transformar el mundo, convirtiéndolo en el lugar que imaginamos. Es un medio que nos permite a todos participar sin limitaciones.

Si compartes esta visión y deseas construir un mundo mejor, te recomiendo que leas ‘Los Generalistas y el Diseño de un Mundo Mejor’

2- El Desafío de la Educación y la Accesibilidad en el Diseño UX/UI

Ahora bien, el próximo tema que me parece importante al hablar de accesibilidad es la educación. Por un lado, porque en el contexto de la educación, el Diseño Accesible se vuelve aún más crucial. Implica crear contenido y recursos educativos de manera que estén disponibles y utilizable para todos los estudiantes, incluyendo aquellos con discapacidades visuales, auditivas, motoras o cognitivas.

Investigando un poco, me di cuenta de que este tema tiene muchas capas (como una cebolla, pero sin las lágrimas), y en mi experiencia como docente y estudiante, me hizo pensar: “¡Es cierto! También he visto la falta de accesibilidad en acción”. Esto ocurre más seguido de lo que desearíamos, y parecería que la educación se ha olvidado un poco de formarnos con los principios básicos del diseño accesible.

Es acá donde quiero enfatizar la importancia de la educación autónoma. Si bien este artículo proporciona algunas reglas básicas, el aprendizaje continuo es esencial en un entorno donde la tecnología y las mejores prácticas evolucionan constantemente.

En mi caso particular hay algunas herramientas y recursos de los que me sirvo para seguir aprendiendo de forma independiente. Si eres nuevo, o simplemente tienen pasión por el diseño UX/UI accesible te recomiendo:

-Bootcamps: Explora programas de capacitación en línea, como los cursos de UX/UI y accesibilidad web disponibles en plataformas como Coursera, edX y Udacity.

-Blogs: Sigue blogs y sitios web dedicados al diseño UX/UI y la accesibilidad, donde encontrarás artículos, tutoriales y consejos actualizados.

-Libros y Publicaciones: Lee libros y estudios relevantes sobre el tema. Autores como Don Norman y Jakob Nielsen ofrecen una perspectiva valiosa.

-Participación en Comunidades: Únete a comunidades en línea o grupos de discusión donde puedas compartir experiencias y aprender de otros profesionales en el campo. En mi caso amo los club de lecturas, uno de los que soy parte y recomiendo es “Club de Lectura UX”.

3-Cinco reglas básicas para evitar errores en la accesibilidad UX/UI.

Por último creo importante remarcar la idea que la accesibilidad UX/UI no solo es un aspecto técnico, es un compromiso con la inclusión digital que puede marcar la diferencia en la vida de muchas personas. Así que, prepárate para descubrir los secretos detrás de una web más accesible y amigable para todos los usuarios.

A continuación, te presentaré cinco puntos claves donde se ven los  errores más comunes en la accesibilidad web, con ejemplos y consejos prácticos para ayudarte a diseñar un espacio virtual que sea inclusivo y accesible para todos.

3.1. Las Etiquetas de Encabezado Mejoran la Accesibilidad

Las etiquetas de encabezado son fundamentales para estructurar tu contenido y facilitar la navegación de los usuarios. Un ejemplo de error común es usar etiquetas de encabezado de manera incorrecta o insuficiente.

Un sitio web bien conocido que ha enfrentado este problema es el gobierno de Estados Unidos. Antes de una revisión de accesibilidad, su sitio carecía de etiquetas H1 en muchas páginas, lo que dificulta que los usuarios, especialmente aquellos que dependen de lectores de pantalla, comprendieran la jerarquía de la información.

Ejemplo de Buenas Prácticas: Un buen ejemplo es el sitio web de la BBC. Utiliza etiquetas de encabezado de manera clara y jerárquica, lo que facilita que los usuarios comprendan la estructura de la página y naveguen de manera eficiente.

3.2. Formularios Claros son Más Fáciles de Navegar

Los formularios son una parte común de muchos sitios web, pero pueden volverse problemáticos si no se diseñan con claridad. Un error común es no proporcionar retroalimentación adecuada cuando se cometen errores en un formulario. Por ejemplo, antes de una revisión de accesibilidad, el sitio web de Airbnb tenía problemas con la validación de formularios, lo que dificulta que los usuarios supieran qué campos se completaron correctamente y cuáles necesitaban corrección.

Ejemplo de Buenas Prácticas: El sitio web de Booking.com es un buen ejemplo de diseño de formularios claros. Proporciona retroalimentación instantánea y clara cuando los usuarios ingresan información incorrecta, lo que facilita la corrección.

3.3. Diseño de Tablas

Las tablas se utilizan comúnmente para mostrar datos tabulares en sitios web. Sin embargo, un error común es utilizar tablas para el diseño en lugar de para datos reales. Esto puede dificultar la interpretación de la información por parte de los lectores de pantalla y otros usuarios con discapacidad visual. Un ejemplo de sitio web que ha cometido este error es el de algunas agencias de viajes en línea que utilizan tablas para el diseño de diseños complejos en lugar de para mostrar datos tabulares.

Ejemplo de Buenas Prácticas: El sitio web de la NASA utiliza tablas de manera efectiva para presentar datos científicos. Estas tablas están bien estructuradas y etiquetadas adecuadamente, lo que facilita su comprensión por parte de todos los usuarios.

3.4. Diseños para Pantallas Ampliadas

Es importante considerar cómo se verá tu diseño cuando los usuarios amplíen la pantalla, especialmente aquellos que necesitan un aumento del 200 por ciento o más. Utilizar unidades de medida flexibles como REM en lugar de píxeles puede ayudar a que el texto y los elementos se ajusten adecuadamente. Además, debes asegurarte de que todos los elementos sean completamente visibles sin necesidad de desplazarse en dos direcciones.

Ejemplo de Buenas Prácticas: El sitio web de A List Apart es conocido por su enfoque en la accesibilidad y la usabilidad. Su diseño es receptivo y se adapta de manera efectiva a diferentes tamaños de pantalla y niveles de aumento de texto.

3.5. Articula Regiones Distintas

Utilizar elementos semánticos apropiados, como “article” o “time”, ayuda a definir claramente las regiones de contenido en tu sitio web. Esto no solo mejora la accesibilidad, sino que también comunica la intención del contenido. Un error común es utilizar divs genéricos en lugar de elementos semánticos, lo que dificulta que los usuarios comprendan la estructura del contenido.

Ejemplo de Buenas Prácticas: El sitio web de The New York Times utiliza elementos semánticos de manera efectiva para definir las regiones de contenido. Esto ayuda a los usuarios a comprender la jerarquía de la información y mejora la accesibilidad global del sitio.

Espero que esta información les haya resultado útil y enriquecedora. Si es así, te invito a activar el botón de accesibilidad en tus diseños. ¡Cada uno de nosotros tiene la capacidad de contribuir y hacer que la web sea más accesible para todos! No duden en compartir sus experiencias en los comentarios.