Descubre cómo crear un diseño web accesible con estos sencillos consejos
La accesibilidad es un derecho humano y, en algunos países, por ley. De hecho, en 2018 se produjo un gran aumento de las demandas de accesibilidad web. Ahora los diseñadores están empezando a darse cuenta de que un diseño web accesible es una necesidad. Con esto en mente, aquí te doy los ocho principales consejos para asegurar que tu diseño web esté optimizado para ser accesible y lo más inclusivo posible.
Si decides revisar los elementos accesibles de tu sitio web y te das cuenta de que tu diseño web necesita una actualización total, aquí te explico las principales tendencias del diseño web para 2019.
A continuación los 8 pasos para un diseño web accesible:
01. Definir la accesibilidad
La accesibilidad y el diseño inclusivo a veces se mencionan indistintamente, pero no reconocer la distinción entre ellos puede tener consecuencias drásticas. El diseño de accesibilidad consiste en eliminar obstáculos para que todos los usuarios puedan utilizar las aplicaciones y sitios web que diseñamos.
A continuación, recordemos que los tamaños de fuente más grandes reducen el obstáculo «no puede leer el texto», por lo que o bien permitimos que ciertos usuarios cambien a un «modo de accesibilidad» alternativo, o bien creamos una versión accesible, pero separada, a la que se puede acceder mediante un enlace en la navegación. Ahora, esto no sólo difumina la línea entre accesible e inaccesible (ya que los usuarios con discapacidad visual todavía lo tienen que localizar), sino que no es del todo inclusivo, porque hemos aislado a estos usuarios. Han sido segregados, se les ha hecho sentir diferentes, y para colmo, hemos tenido que diseñar y desarrollar dos versiones de nuestra interfaz, gastando tiempo y esfuerzos adicionales.
Una fuente más grande para todos
En su lugar, podríamos haber diseñado simplemente una interfaz singular, más inclusiva, donde la fuente sea más grande para todos. Después de todo, incluso los usuarios que no son discapacitados visuales se beneficiarán de poder leer el texto más fácilmente, y es por esto que el diseño inclusivo es un triunfo tanto para los usuarios discapacitados como para los no discapacitados. El diseño inclusivo no disminuye la experiencia de los que no están discapacitados. De hecho, la gran mayoría de las reglas de accesibilidad definidas por el WCAG – Web Content Accessibility Guidelines, se duplican como consejos de usabilidad que, si se implementan, beneficiarán a todos los usuarios.
02. Simplificar el lenguaje
Cuando se trata de la palabra escrita, hay una gran variedad de consideraciones a tener en cuenta si queremos diseñar experiencias que se adapten a todo el mundo. Está la simplicidad de las palabras mismas (que puede afectar a los que tienen dificultades para leer), está la tipografía (que puede afectar a los usuarios con discapacidad visual), y está la consistencia (que puede afectar a los que tienen discapacidades cognitivas). Y, por supuesto, el diseño subóptimo afecta tanto a los que no están discapacitados como a los que sí lo están.
Cómo mejorar la tipografía y, por tanto, la legibilidad:
Alinear el texto sólo a la izquierda o a la derecha
Enlaces subrayados para un mayor contraste visual
Aplicar el espaciado de línea por lo menos 1.5 veces el tamaño de la fuente
Espaciado entre párrafos: al menos 1,5 veces el espacio entre líneas
Ancho de párrafo: no más de 80 caracteres
Cómo reducir la carga cognitiva:
Usar un lenguaje sencillo
Definir abreviaturas en el primer uso
Asegurarse de que el texto del enlace se describa de forma eficaz
Coincidir URLs idénticas con texto de enlace idéntico
Estructurar el contenido de forma lógica utilizando encabezados claros.
03. Optimizar el contraste de color
El contraste de color es una medida de lo bien que se distinguen los colores de dos elementos de diseño. La unidad de esta medida es una proporción, y hay una proporción mínima a la que apuntar. Suponiendo que varios elementos de diseño cumplan con la relación mínima de contraste de color definida por el WCAG, no sólo estamos permitiendo la legibilidad a los usuarios con discapacidad visual, sino que la estamos potenciando para aquellos que no la tienen también. Esta es una de las muchas maneras en que diseñamos inclusivamente con un esfuerzo prácticamente nulo.
Entonces, ¿cuál es el requisito mínimo, y cómo lo comprobamos? En primer lugar, los analizadores de contraste de color como Stark pueden utilizarse para medir la relación de contraste de color. Sin embargo, la proporción mínima a la que debemos llegar depende del elemento en sí, es decir, si se trata o no de un elemento importante de la interfaz de usuario, como un icono o un campo de formulario, o, si el elemento es textual, si el tamaño de la fuente es pequeño o grande, ya que las fuentes más grandes son más legibles incluso antes de retocar el contraste.
Estos son los requisitos de la relación de contraste de color para el texto sobre el fondo, tal como lo define el WCAG:
14pt negrita o 18pt normal: 4.5:1 (7:1 es mejor)
Negrita de 14pt o normal de 18pt, y más: 3:1 (4.5:1 es mejor)
Estos son los requisitos para los elementos de la interfaz de usuario:
Objetos gráficos (como gráficos): 3:1
Concéntrate, desplaza el cursor y los estados activos: 3:1
Iconos y elementos de formulario en los que se puede hacer clic: 3:1
La aplicación Stark mencionada anteriormente también puede simular el aspecto de nuestro diseño para usuarios con diferentes tipos de daltonismo: después de todo, el 4,5% del mundo es un gran número de usuarios potenciales. Si te resulta difícil conseguir un contraste óptimo con los enlaces de un cuerpo de texto, subrayalos para que los enlaces sean más fáciles de detectar, porque algunos usuarios daltónicos no ven el contraste de color en absoluto.
04. Ayudar a los usuarios a corregir errores
Los errores a menudo resultan una nube de confusión, especialmente cuando el usuario no sabe exactamente lo que hizo, o cómo arreglarlo. Los errores son inevitables, especialmente para el usuario moderno que se apresura a interactuar con las interfaces, fuertemente armado con su modelo mental, y es por esto que ayudar a los usuarios (discapacitados o no) a superar sus errores es vital para la accesibilidad.
Naturalmente, el escenario más común en el que el usuario puede cometer un error es al rellenar un formulario, y a menudo como resultado de una variedad de discapacidades, es decir, dificultad de comprensión como resultado de una discapacidad cognitiva, introducción de datos incorrectos como resultado de una discapacidad motora, etc. En primer lugar, si podemos corregir el error del usuario de forma programada, entonces se evitará la crisis. Un ejemplo de esto en acción podría ser añadir https:// a su URL si aún no ha sido añadido, en lugar de forzar al usuario a arreglarlo por sí mismo.
Considera estos otros consejos para reducir los errores:
Utiliza siempre etiquetas de formulario para describir los campos.
Y marcadores de posición para mostrar un ejemplo de entrada aceptable
Habilitar la función de autollenado y autocompletar para reducir los requisitos de escritura
Y estos consejos para ayudar a los usuarios a corregir errores:
Mostrar los errores de formulario claramente en tiempo real
Permita que el usuario verifique sus datos antes de enviarlos.
Importante y a menudo se olvida: ¡no hagas que los usuarios se sientan estúpidos!
05. Saltar al Contenido Principal
Saltar al contenido principal es una característica de accesibilidad relativamente oscura dirigida a aquellos que navegan por las interfaces de usuario con lectores de pantalla. Lo más probable es que nunca hayas oído hablar de esta función; así de inclusiva es. Los lectores de pantalla, o simplemente aquellos que en su mayoría navegan por las interfaces de usuario utilizando el teclado, tabulan a través de los destinos mediante la tecla de tabulación. Si no está desactivada, es probable que lo hayas experimentado de todas formas al saltar a través de los campos del formulario en un navegador web de escritorio, ya que es mucho más fácil que hacer clic.
Saltar al contenido principal es una mejora de la accesibilidad para ayudar a este subconjunto de usuarios a escapar de la repetitividad evitando la navegación principal; esto funciona al tener el primer elemento de la pestaña un enlace que salta al contenido principal. Es oscuro para aquellos que no usan lectores de pantalla porque este enlace sólo se muestra una vez con pestañas. Intenta buscar algo en Google y luego presiona la tecla de tabulación.
También es importante indicar visualmente qué elemento está actualmente enfocado, ya que el índice de pestañas puede cambiar a una ubicación inesperada (índices de pestañas y, por lo tanto, lectores de pantalla leídos de arriba hacia abajo). En términos de código CSS, esto a menudo aparece como si fuera una sombra azul, pero en realidad es un esquema, ¡así que asegúrate de no sobreescribir este estilo!
06. No crees presión (diseño web accesible)
A nadie le gusta sentirse presionado, pero para las personas con discapacidades motoras o cognitivas, la presión puede provocar ansiedad. Las interfaces se han vuelto mucho más dinámicas con el paso de los años, a medida que más y más tareas pueden ser completadas usando un dispositivo. Lamentablemente, demasiadas experiencias dinámicas son el resultado de que los diseñadores intentan hacer que las interfaces de usuario sean más imaginativas a costa de la usabilidad. Un consejo útil sería simplificar el diseño y eliminar elementos dinámicos innecesarios.
Esto incluye carruseles, ventanas emergentes, alertas y animaciones que distraen.
A continuación, veamos cómo podemos hacer que estos elementos, en caso de que los necesitemos, sean accesibles para las personas con discapacidades. En primer lugar, necesitamos añadir un nivel de control para la reproducción automática de medios que exija atención, ya que esto podría añadir una cantidad incómoda de carga cognitiva adicional para las personas con discapacidades cognitivas. La regla es, tal y como se define en la WCAG 2.0, que si el medio se ejecuta durante más de tres segundos, debe ser controlable. Cualquier otra cosa que se desplace, parpadee o se mueva automáticamente sin que el usuario tenga que interactuar con ella (es decir, animaciones y carruseles) también debería ser controlable si dura más de cinco segundos.
Los movimientos inesperados son desagradables
Por lo general, los movimientos de comunicación inesperados son desagradables para los usuarios y es mejor evitarlos. Ten en cuenta que una regla similar se aplica a los elementos que parpadean más de tres veces por segundo, especialmente si es de alto contraste y rojo, ya que esto puede provocar convulsiones.
En cuanto a los mensajes de chat, alertas, recordatorios, noticias, etc, los usuarios deben poder limitar su frecuencia para disponer de más tiempo para leer y comprender lo que se está comunicando, y también es aconsejable dejar que el usuario descarte fácilmente cualquier alerta u obstrucción visible con la tecla esc. La presión para llevar a cabo una tarea es a veces inevitable, ya que algunas interfaces (como las interfaces bancarias) pueden tener un tiempo de espera por razones de seguridad, y naturalmente estas alertas tienen que ser obvias. En este escenario, a los usuarios con discapacidad que necesiten más tiempo se les debe ofrecer la oportunidad de hacerlo, haciéndole saber a la interfaz que el usuario no la ha abandonado y que por error dejó sus datos expuestos.
07. Relevo con los desarrolladores
Cuando se trata de mejorar la accesibilidad, los desarrolladores deben compartir la mitad de la responsabilidad, especialmente cuando se trata de hacer que las interfaces de usuario sean fáciles de leer para el lector de pantalla. La optimización del diseño web accesible para lectores de pantalla se realiza principalmente entre bastidores y no afecta en absoluto a los usuarios no discapacitados, lo que hace que estos sitios web sean muy inclusivos para los usuarios de todas las capacidades.
Para aquellos que se lo pregunten, un lector de pantalla ayuda a los usuarios con discapacidad visual leyendo en voz alta lo que hay en la pantalla. ¿Pero qué hay de las imágenes? ¿Qué pasa con los iconos sin etiquetas de texto? ¿Cómo es que los lectores de pantalla transmiten exactamente elementos de diseño sin descripción de texto, y cómo estas tecnologías de asistencia cambian rápidamente el enfoque a puntos de referencia clave como la búsqueda y la navegación? Bueno, aquí es exactamente donde el desarrollador entra en escena.
Repasemos algunos de los aspectos clave en el diseño web accesible:
Utilizar elementos HTML semánticos como <nav> y <header>.
Utiliza las funciones de referencia de ARIA para añadir más contexto a los elementos HTML
Declarar el lenguaje (correcto) (guía WCAG aquí)
Formar siempre elementos
Utilice «texto alt» (Error! Nombre de archivo no especificado.) para alternativas de texto a las imágenes puedes revisar este artículo.
Proporcionar opciones sin JS y nunca utilizar scripts en línea.
08. Elige gestos sencillos
La elección de gestos sencillos en lugar de gestos complejos ganará a los usuarios no discapacitados, al tiempo que hará que las interfaces de usuario sean accesibles para los usuarios discapacitados. Los gestos tienden a diferir entre aplicaciones y sitios web. En primer lugar, está la cuestión de las expectativas del usuario; por ejemplo, es bastante normal que las interacciones en las aplicaciones de pantalla táctil se produzcan al pasar el dedo por la pantalla, pero los usuarios no suelen pensar en pasar el dedo por un sitio web (ni siquiera por un sitio web para móviles). Aparte de eso, ¿hay algo que vaya más allá de la simple pulsación y el clicteo para los usuarios discapacitados?
La respuesta es sí, pero también son un poco intimidantes para los usuarios no discapacitados, con la posibilidad de que el swiping sea una excepción, ya que se puede hacer sólo con el pulgar. Quiero decir, ¿alguna vez has intentado girar un mapa de Google? Es una experiencia muy quisquillosa, y para aquellos con alguna discapacidad motora sería una tarea casi imposible de llevar a cabo. Dado que Google Maps no ofrece una forma alternativa de rotar utilizando botones en los que se pueda hacer clic, esta funcionalidad no es accesible ni inclusiva.
¿Realmente necesitamos este gesto?
Así que tenemos que preguntarnos caso por caso, ¿realmente necesitamos este gesto complejo? Por ejemplo, ¿funcionaría una columna estática y vertical tan bien como un carrusel deslizante? En ambos escenarios tendríamos el contenido desbordando la vista de cualquier manera, así que ¿qué es lo que realmente consigue un carrusel de deslizamiento? ¿Podría ser el swiping una mejora progresiva para los usuarios no discapacitados? Más simple es mejor en este caso.
Mientras tanto, asegúrate de que los objetivos de las tomas sean al menos 44px2 (para que sean fáciles de tocar y hacer clic, y también para el diseño web accesible visualmente) y razonablemente espaciados (para reducir el número de clics de error).