ALLY: Lista de verificación de accesibilidad de la interfaz de usuario para diseñadores

✅ Diseñar productos digitales que sean accesibles para todos es crucial. Al hacer que nuestros diseños sean accesibles, estamos creando un mundo más inclusivo. Estos son algunos consejos y acciones a tener en cuenta al diseñar para la accesibilidad:

Tecnología de asistencia:

La tecnología de asistencia son dispositivos como audífonos, herramientas de ampliación y lectores de pantalla que ayudan a mejorar, mantener o mejorar las capacidades funcionales de las personas con discapacidades.

Lectores de pantalla:

Software de accesibilidad de lectores de pantalla, como TalkBack de Google en Android, VoiceOver de Apple en iOS y JAWS de Freedom Scientific en el escritorio. Los lectores de pantalla leen en voz alta el texto y los elementos en pantalla (como los botones), incluido el texto alternativo visible y no visible.

Texto y tipografía:

• La presentación visual de texto e imágenes de texto tiene una relación de contraste suficiente de al menos 4,5:1 (Nivel AA)
• Utilice fuentes que sean fáciles de leer y evite las fuentes decorativas o cursivas.
• Evite usar mayúsculas , ya que hace que el texto sea más difícil de leer para las personas con dislexia.
• Utilice el tamaño de fuente y el espacio entre líneas apropiados para mejorar la legibilidad.
• Evite usar el color solo para transmitir significado.

• No confíe en el color como el único método para transmitir información.
• Asegúrese de que haya suficiente contraste entre el texto y los colores de fondo. Aquí hay una herramienta útil:https://webaim.org/resources/contrastchecker/
• Pruebe su diseño utilizando simuladores de daltonismo para asegurarse de que sea accesible para las personas con daltonismo.

• Asegúrese de que la navegación sea fácil de usar e intuitiva. Debe tener un orden de enfoque (más sobre esto aquí ) donde los componentes enfocables (controles, campos de entrada, botones, enlaces) reciban el enfoque en un orden que asegure el significado y la operatividad.
• Por ejemplo, cuando el usuario hace clic en la barra de búsqueda, ingresa un (estado) enfocado. El campo de entrada recibe lo que ingresan en el teclado y muestra los caracteres que escribe. Debe habilitar la misma interacción para los usuarios del teclado.
• Use etiquetas claras y descriptivas para todos los enlaces y botones.
• Proporcione atajos de teclado y soporte para lectores de pantalla.
• Use texto alternativo descriptivo para todas las imágenes y contenido que no sea de texto.

• Utilice etiquetas claras y concisas para todos los campos del formulario.
• Utilice los tipos de entrada adecuados para los campos de formulario (por ejemplo, correo electrónico, teléfono, etc.).
• Use mensajes de error adecuados y proporcione comentarios claros sobre el envío del formulario usando color, peso de fuente o subrayado de texto.
• Asegúrese de que el formulario sea fácilmente navegable y se pueda completar utilizando la navegación solo con el teclado.
• El enfoque del diseño indica que tienen áreas contrastantes con una relación de contraste mínima de 3:1. Eso se llama un área de contraste (ver más abajo).

• Proporcione transcripciones o subtítulos para todo el contenido de audio y video.
• Asegúrese de que los controles de audio y video sean accesibles y fáciles de usar.
• Proporcione formatos alternativos para contenido multimedia (por ejemplo, descripción de audio para contenido de video).
• Para desarrolladores: use etiquetas aria y etiquetas Alt para imágenes y multimedia para describir lo que son. Dependiendo de la semántica, esto asegurará que los lectores de pantalla no los salten.
• El texto alternativo traduce una interfaz de usuario visual en una interfaz de usuario basada en texto. El texto alternativo es una etiqueta corta (hasta 125 caracteres) en el código que describe una imagen para los usuarios que no pueden verla.

• Asegúrese de que el diseño esté optimizado para dispositivos móviles.
• Use un diseño receptivo para asegurarse de que el diseño se adapte a diferentes tamaños de pantalla.
• Asegúrese de que los objetivos táctiles sean lo suficientemente grandes para activarlos fácilmente. El área debe tener al menos 44x44 píxeles y 48x48dp para Android. Más detalles aquí

Diseñar pensando en la accesibilidad no es una tarea fácil. Comience con empatía: considere los casos extremos y reconozca las diferentes capacidades para usar su producto. Esta lista de verificación no es una lista exhaustiva de estándares de accesibilidad, sino un punto de partida, así que consulte los enlaces a continuación.

Al seguir esta lista de verificación de accesibilidad, puede hacer que sus diseños sean más inclusivos y accesibles para una gama más amplia de usuarios, incluidos aquellos con discapacidades. Esto puede mejorar la experiencia del usuario para todos los usuarios y ayudar a crear un entorno digital más inclusivo y accesible.

Más lecturas y recursos:

https://m2.material.io/design/usability/accessibility.html

https://design.gitlab.com/accessibility/keyboard-only

https://web.dev/focus/

https://www.sarasoueidan.com/blog/focus-indicators/