miércoles, 5 de septiembre de 2018

El daltónismo y la accesibilidad web


Tres tipos de dáltonismo más uno de visión normal

El color juega un papel integral en el diseño de la interfaz de usuario. Cuando se hace bien, mejora la experiencia del usuario, influye en las decisiones de compra y refleja la voz de la marca. la esencia de esto es que las personas daltónicas tienen dificultad para ver claramente el color o diferenciar entre algunos colores.
Según los estudios sobre daltónismo, aproximadamente 1 de cada 12 hombres (y 1 de cada 200 mujeres) son daltónicos. La mayoría de las personas daltónicas son capaces de ver las cosas con la misma claridad que otras personas, pero no pueden "ver" completamente la luz roja, verde o azul. Existen diferentes tipos de daltonismo y hay casos extremadamente raros en los que las personas no pueden ver ningún color en absoluto. La forma más común de daltonismo se conoce como ceguera al color rojo / verde y la mayoría de las personas daltónicas sufren de esto. Aunque se conoce como daltonismo rojo / verde, esto no significa que los pacientes mezclen rojo y verde, lo que significa es que mezclan todos los colores que tienen un poco de rojo o verde como parte de todo el color.
Lo que esto significa desde el punto de vista del diseño es que confiar solo en el color para la legibilidad y la accesibilidad haría que su sitio web sea difícil de usar para alguien que es daltónico.
Puede usar el simulador de ceguera de color de Coblis  para ver cómo se ve su sitio para los usuarios de daltónicos.
Ahora enseñaremos algunas de las formas en que puede diseñar una interfaz de usuario más accesible teniendo en cuenta a los usuarios de daltónicos.


USA PATRONES Y TEXTURAS EN GRAFICOS

Las diferencias de color son increíblemente importantes con la visualización de datos, por ejemplo, gráficos y gráficos circulares. Elegir colores con una baja relación de contraste puede hacer que su cuadro sea difícil de interpretar para los usuarios de daltónicos.
Esto es lo que debe hacer en su lugar:
Use patrones y texturas para facilitar a los usuarios la diferenciación de diferentes segmentos.
Agregue etiquetas de texto a los segmentos para que sean aún más fáciles de entender.

cuatro graficos en barras modificando la textura y la información dentro de él


UTILIZA COLORES Y SÍMBOLOS

No debe confiar únicamente en el color para comunicar errores o transmitir información
El uso de iconos y símbolos en los formularios para que el usuario sepa que cometió un error mejora la accesibilidad y los ayuda a corregir su error más rápidamente.

Como se enfrenta un daltonico al formulario de Facebook


USAR ETIQUETAS DE TEXTO DESCRIPTIVO

Agregar etiquetas de texto a filtros de color y muestras mejora la accesibilidad para usuarios daltónicos. Dependiendo del tipo de daltonismo, los usuarios pueden encontrar difícil diferenciar entre diferentes colores (o tonos) sin algún tipo de texto descriptivo.

En una tienda on-line se señala el color de la prenda en esté caso red


ENLACES DE SUBRAYADO

Alguien con monocromía no podrá diferenciar entre el texto y el texto de anclaje en absoluto y tendría que desplazarse sobre el texto para ver si el cursor cambia a un puntero.

Un texto con sus enlaces sin subrrayar

COMBINACIONES DE COLORES A EVITAR

Aquí hay una lista de combinaciones de colores que debe evitar usar en los diseños de su interfaz siempre que sea posible:

verde-rojo
verde-azul
verde-marrón
verde-negro
gris-verde
gris-azulado
luz verde-amarillo
azul-púrpura

RESALTAR LOS BOTONES PRINCIPALES

Muchas veces, los diseñadores confían en el color para resaltar los botones principales. El problema con esto es que el color que usa puede ser difícil de percibir para los daltónicos.

Tienda de Amazon donde los botones tienen más contraste


MARCAR CAMPOS DE FORMULARIO OBLIGATORIOS

Los usuarios de daltónicos pueden tener dificultades para diferenciar entre los campos obligatorios y opcionales

Las opciones son:

  • Marque los campos obligatorios con un asterisco (*).
  • Etiquete los campos con la palabra Requerido u Opcional .
  • Eliminar campos opcionales de los formularios
Formulario con el campo opcional de segundo telefono



No hay comentarios:

Publicar un comentario