5 efectos visuales que mejoran la accesibilidad

Según los CDC, 61 millones de adultos en los EE. UU. viven con una discapacidad. Dada la cantidad de personas con discapacidades y el aumento de demandas relacionadas con los sitios web de estadounidenses con discapacidades (ADA) en los últimos años, es imperativo que diseñemos para estas personas. Después de todo, el diseño accesible mejora la usabilidad. Los estándares de accesibilidad, como las Pautas de accesibilidad al contenido web (WCAG), son un buen punto de partida para aquellos que buscan mejorar la accesibilidad de su diseño. Además, las pautas de interfaz de usuario específicas de la plataforma, como las pautas de interfaz humana de Apple y el diseño de materiales de Google, también incluyen pautas de accesibilidad para los diseñadores que trabajan en esos ecosistemas. Este artículo proporciona 5 pautas generales que puede utilizar para mejorar la accesibilidad de sus elementos visuales:

  1. Diseño para contraste de color.
  2. Proporcione señales visuales además del color.
  3. Haz que los elementos interactivos sean fácilmente identificables
  4. Use texto alternativo fuerte para imágenes o gráficos
  5. Prueba con usuarios reales

1. Diseño de contraste de color.

Las personas con discapacidad visual pueden tener problemas para leer textos en fondos de bajo contraste. PERO mayor relación de contraste entre el texto y su fondo ayuda a los usuarios con problemas de visión a leer sin tecnología de asistencia que mejore el contraste. Este contraste de color también puede ayudar a los usuarios con visión normal a leer cómodamente. Según las WCAG, la proporción de color y contraste entre el texto y su fondo debe ser de al menos 4,5:1. Para el texto que tiene al menos 18 o 14 puntos en negrita, la proporción es ligeramente mayor, 3:1.

Hay varias herramientas para comprobar el contraste de color. Me gusta usar access-colors.com porque ofrece colores alternativos decentes si su relación de contraste no está a la par. Para verificar la relación de color y contraste, deberá ingresar el tamaño del texto, el peso del texto y los códigos hexadecimales para el color del texto y el color de fondo.

Captura de pantalla del sitio web available-colors.com
Para usar la herramienta de contraste de color, necesita el tamaño, el peso y el color de la fuente, así como el color de fondo del texto.

2. Proporcione señales visuales además del color

Es posible que las personas con daltonismo o poca agudeza visual no puedan distinguir entre elementos que difieren solo en el color. entonces es importante usar señales adicionales (por ejemplo, trazos, patrones) para comunicar información importante.

Para informar un error, use un mensaje de error claro y un ícono de advertencia, y coloréelo para que las personas con discapacidades visuales puedan verlo.

Si no está seguro de si necesita un elemento de diseño adicional además del color para transmitir el mensaje, pruebe el truco de la escala de grises. Convierta su diseño en escala de grises y vea si puede obtener el diseño correcto.

Cuando convierte su diseño en escala de grises, puede ver rápidamente que el cambio de color por sí solo no es suficiente para señalar un error.

3. Determinar el estado de enfoque

Hacer que los elementos interactivos sean fácilmente identificables no solo es conveniente, sino también útil para aquellos que usan el teclado para navegar por la web. El indicador de enfoque, que es un contorno azul alrededor de un elemento de forma predeterminada, ayuda a las personas a saber qué elemento activo tiene el foco del teclado.

Los estados de enfoque se pueden personalizar fácilmente para adaptarse a sus necesidades de diseño visual o estándares de marca. Los enlaces, campos de formulario, widgets, botones y elementos de menú deben ser enfocables y su estado de enfoque debe estar claramente indicado.

recomiendo usar trazo perceptible visualmente (por ejemplo, una línea gruesa alrededor del elemento que está enfocado) definir claramente el estado de enfoque por dos razones:

  • Este indicador es la señal predeterminada y muchos usuarios lo esperan.
  • El cambio de color por sí solo no es suficiente para distinguir entre diferentes condiciones (consulte la regla n.º 3 anterior), ya que es posible que algunas personas con discapacidad visual no lo perciban.
Un borde grueso fácilmente reconocible alrededor del elemento de enfoque ayuda a los usuarios a navegar por la web usando el teclado.

4. Use texto alternativo fuerte para las imágenes

Algunos usuarios pueden utilizar lectores de pantalla para interactuar y utilizar el sitio web. Texto alternativo (o Texto alternativo) debe usarse para describir imágenes y otros elementos gráficos para que las personas que no pueden verlos puedan hacerse una idea de lo que se muestra. Algunas pautas a tener en cuenta al escribir texto ALT:

  • El texto ALT debe ser corto.
  • El texto alternativo no debe repetir el título imágenes (porque ambas serán leídas por el lector de pantalla).
  • El texto ALT no debe usarse para imágenes puramente decorativas. Si no hay texto ALT en la imagen, el lector de pantalla lo saltará, reduciendo así la carga en la memoria de trabajo de los usuarios.

Si tiene problemas para encontrar algo de valor para incluir en su texto alternativo, comuníquese con un diseñador de contenido.

Use texto ALT para describir brevemente la imagen.

5. Prueba con usuarios reales

Haga que la accesibilidad sea parte de su investigación. Estos son algunos consejos para probar sus proyectos:

  • Echa un vistazo a las herramientas de soporte comunes. Aprenda cómo funcionan las herramientas como los lectores de pantalla, los ampliadores de pantalla o los dispositivos braille y cómo usarlos en su diseño.
  • Inténtalo tú mismo. Use su teclado para navegar por los proyectos o use un lector de pantalla. ¿Qué extrañaste o no consideraste? ¿Hay algo incomprensible en esta experiencia? Solucione estos problemas antes de probar su diseño con usuarios reales.
  • Pruebe su diseño en usuarios reales. Solo necesita 5 usuarios para obtener comentarios valiosos. Solucione los problemas y vuelva a probar según sea necesario.
  • Considere reclutar usuarios con diferentes necesidades de accesibilidad: por ejemplo, personas con baja visión y personas con problemas motores.

Conclusión

¿Qué tan bien cumplen sus imágenes con estas pautas? Si no ha considerado la accesibilidad, agréguela como tema a su hoja de ruta de UX. Verifique la accesibilidad de sus proyectos y pruébelos con usuarios reales con necesidades de accesibilidad. Es más fácil diseñar teniendo en cuenta la accesibilidad a medida que avanza, por lo que hay menos reelaboración. No sacrifiques la usabilidad por la estética.

Obtenga más información en nuestro curso de fundamentos de diseño visual de día completo.

Previous post Por qué dejé Figma. ¿Cansado del diseño de carga frontal? Esto es… | Shamsi Brinn | octubre 2022
Next post 5 aterradoras campañas de marketing de Halloween 2022

Deja una respuesta