Cómo incorporar la accesibilidad en el proceso de tu equipo.
Hacer que tu sitio sea más accesible puede ser una tarea abrumadora. Si te estás acercando a la accesibilidad por primera vez, la gran amplitud del tema puede hacer que te preguntes por dónde empezar. Después de todo, trabajar para adaptarte a un rango diverso de habilidades significa que hay un rango correspondientemente diverso de problemas a considerar.
Recuerda, la accesibilidad es un esfuerzo en equipo. Cada persona tiene un papel que desempeñar. En este artículo, se describen los criterios que se aplican a cada una de las disciplinas principales (administrador de proyectos, diseñador de UX y desarrollador) para que puedan incorporar las prácticas recomendadas de accesibilidad en su proceso.
Gerente de proyectos
Un objetivo fundamental para cualquier gerente de proyectos es tratar de incluir el trabajo de accesibilidad en cada evento importante. Asegúrate de que sea una prioridad tanto como otros temas, como el rendimiento y la experiencia del usuario. A continuación, hay algunos elementos de la lista de tareas que debes tener en cuenta cuando trabajes en tu proceso.
- Poner a disposición la capacitación sobre accesibilidad para el equipo.
- Identifica los recorridos críticos del usuario en el sitio o la aplicación.
- Intenta incorporar una lista de verificación de accesibilidad en el proceso del equipo.
- Siempre que sea posible, evalúa el sitio o la aplicación con estudios de usuarios.
Capacitación sobre accesibilidad
Hay una serie de excelentes recursos gratuitos para aprender sobre accesibilidad web. Dedicar tiempo a que tu equipo estudie el tema puede facilitar la inclusión de la accesibilidad al principio del proceso.
Estos son algunos de los recursos que proporciona Google:
Accesibilidad web de Google: Es un curso de capacitación interactivo de varias semanas.
Aspectos básicos de la accesibilidad: Son guías de accesibilidad y prácticas recomendadas escritas.
Lineamientos de Material: Accesibilidad: Es un conjunto de prácticas recomendadas de UX para el diseño inclusivo.
Identificar los recorridos críticos del usuario
Cada aplicación tiene alguna acción principal que el usuario debe realizar. Por ejemplo, si compilas una app de comercio electrónico, todos los usuarios deberán poder agregar un artículo a su carrito de compras.
Algunas acciones pueden ser de importancia secundaria y tal vez solo se realizan ocasionalmente. Por ejemplo, cambiar la foto de avatar es una buena función, pero puede que no sea fundamental para todas las experiencias.
Identificar las acciones principales y secundarias en tu aplicación te ayudará a priorizar el trabajo de accesibilidad por delante. Más adelante, puedes combinar estas acciones con una lista de tareas de accesibilidad para realizar un seguimiento de tu progreso y evitar regresiones.
Incorporación de una lista de tareas de accesibilidad
El tema de la accesibilidad es bastante amplio, por lo que tener una lista de tareas de áreas importantes que debes considerar puede ayudarte a asegurarte de abarcar todas tus bases.
Hay una serie de listas de tareas de accesibilidad, entre los que se incluyen algunos ejemplos de la industria:
Lista de tareas de las WCAG de WebAIM Lineamientos de accesibilidad de Vox
Con una lista de tareas a mano, puedes consultar las acciones principales y secundarias para comenzar a clasificar el trabajo que aún falta hacer. Puedes adoptar un enfoque bastante táctico con este proceso y hasta crear una matriz de acciones primarias y secundarias para determinar si faltan bits de accesibilidad para cada paso de esos procesos.
Evaluación con estudios de usuarios
No hay nada mejor que sentarse con usuarios reales y observarlos mientras intentan usar tu app. Si adaptas la accesibilidad a una experiencia existente, este proceso puede ayudarte a identificar rápidamente las áreas que necesitan mejoras. Si estás comenzando un proyecto nuevo, los estudios iniciales de usuarios pueden ayudarte a evitar dedicar demasiado tiempo al desarrollo de una función que es difícil de usar.
Apunta a incorporar los comentarios de la mayor diversidad posible de usuarios. Considera a los usuarios que navegan principalmente con el teclado o que dependen de la tecnología de asistencia, como lectores de pantalla o lupas.
diseñador de UX
Debido a que las personas tienden a diseñar con sus propios sesgos, si no tienes una discapacidad y no tienes colegas con discapacidades, es posible que estés diseñando de manera involuntaria solo para algunos de tus usuarios. A medida que trabajes, pregúntate “¿cuáles son todos los tipos de usuarios que podrían depender de este diseño?” Estas son algunas técnicas que puedes intentar para que tu proceso sea más inclusivo.
- El contenido tiene suficiente contraste de color.
- El orden de tabulación está definido.
- Los controles tienen etiquetas accesibles.
- Hay varias formas de interactuar con la IU.
El contenido tiene un buen contraste de color
El objetivo principal de la mayoría de los sitios es transmitir cierta información al usuario, ya sea a través de texto escrito o imágenes. Sin embargo, si el contraste tiene poco contraste, algunos usuarios (en especial los que tienen una discapacidad visual) pueden tener dificultades de lectura. Esto puede afectar negativamente su experiencia del usuario. Para resolver este problema, intenta que todo el texto y las imágenes tengan suficiente contraste de color.
El contraste se mide mediante la comparación de la luminancia de un color de primer plano y uno de segundo plano. Para texto más pequeño (menor que 18 puntos o 14 pt en negrita), se recomienda una proporción mínima de 4.5:1. Para texto más grande, esta proporción se puede ajustar a 3:1.
En la siguiente imagen, el texto del lado izquierdo cumple con estos valores mínimos de contraste, mientras que el del lado derecho es de bajo contraste.
Existen varias herramientas para medir el contraste de color, como la herramienta de colores de Material de Google, la app de Relación de contraste de Lea Verou y aXe de Deque.
El orden de tabulación está definido
El orden de tabulación es el orden en el que los elementos reciben el foco cuando el usuario presiona la tecla Tab. En el caso de los usuarios que navegan principalmente con un teclado, la tecla de tabulación es su medio principal para llegar a todo lo que aparece en pantalla. Piensa en esto como el cursor del mouse.
Lo ideal sería que el orden de tabulación siga el orden de lectura y fluya desde la parte superior de la página hasta la parte inferior, con los elementos más importantes que aparecen más arriba en el orden. Esto hace que sea más eficiente para cualquier persona que use un teclado alcanzar rápidamente estos elementos.
La interfaz de simulación anterior está numerada para mostrar el orden de tabulación. Crear una simulación como esta puede ayudar a identificar el orden previsto de tabulación. Luego, se puede compartir con los desarrolladores y los verificadores de control de calidad para asegurarte de que se implemente y pruebe de forma correcta.
Los controles tienen etiquetas accesibles
Para los usuarios de tecnología de asistencia, como los lectores de pantalla, las etiquetas proporcionan información que, de otro modo, solo sería visual. Por ejemplo, un botón de búsqueda que es solo un ícono de lupa puede tener una etiqueta accesible de "Buscar" para ayudar a completar la indicación visual faltante.
Estas son algunas sugerencias sencillas que debes seguir cuando diseñes etiquetas accesibles:
- Sé breve: puede ser tedioso escuchar descripciones largas.
- Intenta no incluir el tipo de control o el estado. Si el control está codificado correctamente, un lector de pantalla lo anunciará automáticamente.
- Enfócate en los verbos de acción: usa "buscar" en lugar de "lupa".
Puedes considerar crear una simulación con todos tus controles etiquetados. Puedes compartirlo con tu equipo de desarrollo y el de control de calidad para la implementación y las pruebas.
Varias formas de interactuar con la IU y comprenderla
Es fácil suponer que todos los usuarios interactúan con la página principalmente con un mouse. Al diseñar, ten en cuenta cómo alguien interactuará con un control usando un teclado.
Planifica tus estados de concentración. Esto significa determinar cómo se verá un control cuando el usuario lo enfoque con la tecla Tab o presione las teclas de flecha. Es útil planificar estos estados con anticipación, en lugar de intentar incluirlos en el diseño más adelante.
Por último, para cualquier punto de interacción, debes asegurarte de que el usuario tenga varias formas de entender el contenido. Intenta no usar el color solo para transmitir información, ya que un usuario con deficiencia en la visión del color puede pasar por alto estas señales sutiles. Un ejemplo clásico es un campo de texto no válido. En lugar de solo un subrayado rojo para indicar un problema, también considera agregar texto auxiliar. De esa manera, cubrirás más bases y aumentarás la probabilidad de que un usuario note el problema.
Desarrollador
La función del desarrollador es combinar la administración del enfoque y la semántica para formar una experiencia del usuario sólida. A continuación, se incluyen algunos elementos que los desarrolladores pueden tener en cuenta mientras trabajan en su sitio o aplicación:
- El orden de tabulación es lógico.
- El enfoque se administra y es visible de forma correcta.
- Los elementos interactivos son compatibles con el teclado.
- Los roles y atributos de ARIA se aplican según sea necesario.
- Que los elementos estén etiquetados correctamente.
- Las pruebas son automáticas.
Orden lógico de tabulación
Los elementos nativos, como input, button y select, se habilitan gratis en el orden de tabulación y se pueden enfocar automáticamente con el teclado. Sin embargo, no todos los elementos reciben el mismo comportamiento. En particular, los elementos genéricos, como div y span, no se habilitan en el orden de tabulación. Esto significa que, si usas un objeto div para crear un control interactivo, deberás realizar acciones adicionales para que sea accesible mediante el teclado.
Hay dos opciones:
- Otórgale un
tabindex="0"al control. Al menos, será enfocable, aunque es probable que debas realizar trabajo adicional para agregar compatibilidad con las pulsaciones de teclas. - Siempre que sea posible, considera usar un
buttonen lugar de undivospanpara cualquier control similar a un botón. El elementobuttonnativo es muy fácil de diseñar y ofrece compatibilidad con el teclado de forma gratuita.
Administración del enfoque
Cuando cambias el contenido de la página, es importante dirigir la atención del usuario moviendo el enfoque. Un ejemplo clásico de cuándo esta técnica resulta útil es cuando se abre un diálogo modal. Si un usuario que depende de un teclado presiona un botón para abrir un diálogo y su enfoque no se mueve al elemento del diálogo, su único procedimiento es recorrer todo el sitio con la tecla Tab hasta encontrar el nuevo control. Si trasladas el enfoque al contenido nuevo en cuanto aparece, puedes mejorar la eficiencia de las experiencias de estos usuarios.
Compatibilidad de teclado para elementos interactivos
Si compilas un control personalizado, como un carrusel o un menú desplegable, deberás realizar acciones adicionales para agregar compatibilidad con el teclado. La Guía de prácticas de creación de ARIA es un recurso útil que identifica varios patrones de IU y los tipos de acciones del teclado que se espera que admitan.
Si deseas obtener más información para agregar compatibilidad con el teclado a un elemento, consulta la sección Tabindex itinerante en los documentos de Aspectos básicos de accesibilidad de Google.
Los roles y atributos de ARIA se aplican según sea necesario
Los controles personalizados no solo necesitan la compatibilidad adecuada del teclado, sino que también necesitan una semántica adecuada. Después de todo, una div, a nivel semántico, es solo un contenedor de agrupación genérico. Si usas un objeto div como base para tu menú desplegable, deberás confiar en ARIA para agregar semántica adicional a fin de que el tipo de control se pueda transmitir a la tecnología de asistencia. Una vez más, la Guía de prácticas para creación de ARIA puede ayudarte a identificar qué funciones, estados y propiedades deberías usar.
Como beneficio adicional, muchas de las explicaciones de la guía de ARIA también incluyen código de muestra.
Etiqueta elementos
Para etiquetar entradas nativas, puedes usar el elemento <label> integrado como se describe en MDN. Esto no solo te ayudará a crear una asignación visual en pantalla, sino que también le dará a la entrada un nombre accesible en el árbol de accesibilidad. Luego, la tecnología de accesibilidad (como un lector de pantalla) toma este nombre y lo anuncia al usuario.
Por desgracia, <label> no admite que se les asigne un nombre accesible a los controles personalizados (como los creados con elementos personalizados o a partir de intervalos y div simples). Para estos tipos de controles, deberás usar los atributos aria-label y aria-labelledby.
Pruebas automáticas
La pereza puede ser algo bueno, especialmente cuando se trata de hacer pruebas. Siempre que sea posible, intenta automatizar tus pruebas de accesibilidad para que no tengas que hacer todo de forma manual. En la actualidad, existen una serie de herramientas de prueba excelentes en la industria para facilitar y agilizar la verificación de problemas comunes de accesibilidad:
aXe, que se creó con los sistemas Deque, está disponible como una extensión de Chrome y como un módulo de Node (ideal para entornos de integración continua). En este breve A11ycast, se explican algunas formas diferentes de incorporar aXe a tu proceso de desarrollo.
Lighthouse es el proyecto de código abierto de Google para auditar el rendimiento de tus apps web progresivas. Además de verificar si tu AWP es compatible con elementos como Service Worker y un manifiesto de apps web, Lighthouse también ejecutará una serie de pruebas de prácticas recomendadas, incluidas pruebas de problemas de accesibilidad.
Conclusión
La accesibilidad es un esfuerzo en equipo. Todos tienen un rol que desempeñar. En esta guía, se presentan algunos elementos clave que cada miembro del equipo puede usar para avanzar rápidamente sobre el tema y, con suerte, mejorar la experiencia general de su app.
Para obtener más información sobre accesibilidad, asegúrate de consultar nuestro curso gratuito de Udacity y explorar los documentos sobre accesibilidad disponibles en web.dev.