Componentes de IU accesibles para la web

Para ser accesibles, los componentes de la interfaz de usuario deben funcionar en múltiples dispositivos con diferentes tamaños de pantalla y diferentes tipos de entrada. Además, los componentes deben ser utilizables por el grupo más amplio de usuarios, incluidos aquellos con discapacidades.

Al diseñar la accesibilidad, hay cuatro áreas clave de discapacidad a tener en cuenta: visual, auditiva, movilidad y cognición.

Los problemas visuales pueden variar desde la incapacidad para distinguir los colores hasta la falta de visión.

  • Asegúrese de alcanzar un umbral mínimo de relación de contraste para el contenido de texto.
  • Evite comunicar información utilizando únicamente el color y asegúrese de que todo el texto sea redimensionable.
  • Asegúrese de que todos los componentes de la interfaz de usuario se puedan usar con tecnologías de asistencia, como lectores de pantalla, lupas y pantallas braille. Esto implica garantizar que los componentes de la interfaz de usuario estén marcados de manera que las API de accesibilidad puedan determinar mediante programación el rol, el estado, el valor y el título de cualquier elemento.

Los problemas de audición significan que un usuario puede tener problemas para escuchar el sonido emitido desde una página.

  • Haga que el contenido sea comprensible utilizando alternativas de texto para todo el contenido que no sea estrictamente texto.
  • Asegúrese de probar que sus componentes de la interfaz de usuario siguen siendo funcionales sin sonido.

Los problemas de movilidad pueden incluir la incapacidad de operar un mouse, un teclado o una pantalla táctil.

  • Haga que el contenido de sus componentes de UI sea funcionalmente accesible desde un teclado para cualquier acción para la que de otro modo se usaría un mouse.
  • Asegúrese de que los componentes de la interfaz de usuario estén correctamente marcados para las tecnologías de asistencia; estos usuarios pueden usar tecnologías como el software de control de voz y los controles de interruptor físico, que tienden a usar las mismas API que otras tecnologías de asistencia como los lectores de pantalla.

Los problemas cognitivos significan que un usuario puede requerir tecnologías de asistencia para ayudarlo a leer el texto, por lo que es importante asegurarse de que existan alternativas de texto.

  • Evite una presentación visual que sea repetitiva o intermitente, ya que esto puede causar problemas a algunos usuarios.
  • Evite las interacciones basadas en el tiempo.

Esto puede parecer una gran cantidad de bases para cubrir, pero recorreremos el proceso para evaluar y luego mejorar la accesibilidad de su componente de IU.

¿Es accesible su componente UI?

Resumen (tl; dr)

Al auditar la accesibilidad de su aplicación, pregúntese:

  • ¿Puedes usar tu componente de IU solo con el teclado? ¿Se las arregla para enfocar y evitar trampas de enfoque? ¿Puede responder a los eventos de teclado apropiados?
  • ¿Puedes usar tu componente UI con un lector de pantalla? ¿Ha proporcionado alternativas de texto para cualquier información que se presente visualmente? ¿Ha agregado información semántica utilizando ARIA?
  • ¿Puede su componente UI funcionar sin sonido? Apague los altavoces y revise sus casos de uso.
  • ¿Puede funcionar sin color? Asegúrese de que su componente de IU pueda ser utilizado por alguien que no puede ver los colores. Una herramienta útil para simular el daltonismo es una extensión de Chrome llamada SEE (pruebe las cuatro formas de simulación de daltonismo disponibles). También te puede interesar la extensión Daltonize que es igualmente útil.
  • ¿Puede su componente UI funcionar con el modo de alto contraste habilitado? Todos los sistemas operativos modernos admiten un modo de alto contraste. High Contrast es una extensión de Chrome disponible que puede ayudar aquí.

Los controles nativos (como