Cuando se trata de accesibilidad, los diseñadores tienden a enfocarse en los colores (es decir, el contraste) y la copia de UX (es decir, la redacción), mientras que los desarrolladores tienden a enfocarse en los atributos ARIA (es decir, el código que hace que los sitios web sean más accesibles). Esto se debe al hecho de que, a menudo, se dibujan líneas gruesas entre "quién hace qué".

Además, debido a que la creación de aplicaciones y sitios web accesibles no se considera emocionante, esta línea casi nunca se cuestiona.

La accesibilidad sigue siendo una oveja negra, incluso en 2020.

So, dado que la copia de UX es responsabilidad del diseñador y los atributos de ARIA son responsabilidad del desarrollador, ¿de quién es exactamente la responsabilidad de atender a los lectores de pantalla? Ya que:

1. La copia de UX del lector de pantalla se expresa en Braille o dictado (entonces, ¿cómo comunicamos esto cuando nuestras herramientas de UI son visuales?)
2. La implementación es territorio de los desarrolladores (entonces, ¿podemos realmente transferir la responsabilidad de escribir la copia de UX a los desarrolladores?)

Como puede ver, es un trabajo de dos personas - y sin embargo, las herramientas simplemente no existen para facilitar esto. Quiero decir, no se equivoquen, algunos aspectos del diseño de accesibilidad son unilaterales (por ejemplo, los diseñadores de interfaces de usuario pueden encargarse fácilmente del contraste de color por sí mismos). Sin embargo, otros aspectos, como el diseño para lectores de pantalla, requieren la colaboración entre diseñadores y desarrolladores.

Aquí es donde Adobe XD CC's transferencia de diseño y prototipos de voz las características son útiles. En este artículo, discutiremos qué considerar al diseñar para lectores de pantalla y también explicaremos cómo usar las funciones mencionadas anteriormente.

¿Qué son los lectores de pantalla?

Un lector de pantalla es un tipo de tecnología de asistencia que comunica lo que sucede en la pantalla (para las personas con discapacidad visual). El software lector de pantalla se puede utilizar en combinación con el teclado (por ejemplo, los usuarios de la pestaña. y entrar en lugar de usar el mouse), pero también se puede usar en combinación con hardware lector de pantalla, lo que permite una navegación más eficiente y también se adapta a los usuarios que usan Braille.

Si eres un usuario de Apple, por ejemplo, estarás al tanto de VoiceOver de Apple, que es el software de dictado nativo de Apple que actúa como lector de pantalla. Los usuarios de Windows, sin embargo, suelen utilizar MANDÍBULAS or NVDA, ya que no hay herramientas de lectura de pantalla nativas en el sistema operativo Windows.

Vamos a sumergirnos

1. Utilice títulos

Los lectores de pantalla a menudo utilizan títulos como una forma de descifrar la estructura de un sitio web, y si pensamos demasiado visualmente corremos el riesgo de omitir estos títulos. En el siguiente ejemplo, la omisión del encabezado "Capítulos" hace que los lectores de pantalla asuman que la lista de capítulos es una continuación del contenido del lado izquierdo, lo que obviamente no lo es.

Como resultado, los usuarios de lectores de pantalla no podrán pasar a "Capítulos" y es posible que no descubran la información que contienen.

Si bien hay soluciones de código disponibles (como el aria-label atributo), teniendo un visibles encabezado inclusive ofrece una experiencia más clara para todo el mundo. , ya sea discapacitado o no.

Por supuesto, la sección es muy obviamente una lista de capítulos, como podemos inferir del contexto (es decir, el contenido). Sin embargo, aquellos que usan lectores de pantalla muy raramente tener el lujo del contexto. Es como intentar encontrar un objeto almacenado donde ninguna de las cajas está etiquetada. Nuestros diseños necesitan estas etiquetas y títulos.

En el aspecto técnico, la regla es que cada sección (definida por un <section> or <article> tag) no solo debe tener un encabezado, sino un encabezado explícito que no entra en conflicto con ningún otro encabezado. Por ejemplo, si el encabezado de nivel más alto dentro de una sección es un <h2>, entonces no debería haber otro <h2> encabezado dentro de esa sección. De lo contrario, los lectores de pantalla no tienen ni idea de qué título es la etiqueta de la sección.

2. Utilice etiquetas

Los iconos son mejores, por todo el mundo. - cuando tienen una etiqueta de texto. Si este enfoque parece desordenado, considere usar , solamente una etiqueta de texto. ¿Prefieres el icono? Bueno, en ese caso, al menos declare una "etiqueta invisible" para los desarrolladores que solo aparecerá para los lectores de pantalla (sí, estoy hablando de aria-label). Lo mismo se aplica a los campos de entrada, donde una etiqueta de texto visible siempre es mejor. aria-label debería ser un último recurso.

Las imágenes tienen un requisito similar, excepto que su texto descriptivo se implementa a través del alt etiqueta. Dicho esto, asegúrese de comunicarse cuando una imagen sea decorativa, ya que los desarrolladores deberán ocultarla de los lectores de pantalla que usan aria-hidden="true".

Uso de Design Handoff para comunicar el texto del lector de pantalla

Ya sea que esté usando texto alternativo, etiquetas ARIA para elementos que no tienen texto visible, etiquetas ARIA destinadas a "sobrescribir" el texto visible (para agregar contexto), o incluso simplemente indicar cuándo una imagen debe ser ignorada totalmente por la pantalla lectores, la herramienta de transferencia de diseño de Adobe XD CC es la herramienta adecuada para ello.

El flujo de trabajo se vería algo así:

1. Haga clic en el espacio de trabajo "Compartir".
2. Configure los ajustes (en el lado derecho).
3. Haga clic en "Crear enlace" y luego haga clic en el enlace en sí.
4. Dentro de la ventana de transferencia de diseño, haga clic en el botón con el icono “Colocar un alfiler” para comentar sobre elementos específicos del diseño.
5. Dejar comentarios. Por ejemplo:
   • Dictar la versión no abreviada de cada moneda
   • Esta imagen se traduce como "Avatar del autor: Daniel Schwarz"
   • Esta imagen es decorativa; los lectores de pantalla deben ignorarla.

3. Elaborar cuando sea necesario

Supongamos un componente con pestañas que consta de dos botones. Uno está etiquetado como "Recién llegado" y el otro, "Secuencialmente".

Sin ningún contexto visual, uno se pregunta ... ¿qué es lo reciente? ¿Qué es secuencialmente? ¿Son estos botones? ¿Se supone que debo hacer algo? Junto con el contenido circundante, los usuarios sin discapacidades visuales pueden inferir fácilmente lo que está sucediendo: se nos brinda la oportunidad de ordenar el orden de los capítulos.

Sin embargo, esos las deficiencias visuales podrían necesitar alguna elaboración. Específicamente, la copia debe ser más procesable.

La siguiente copia de UX es mejor para aquellos que usan lectores de pantalla:

• "Ordenar capítulos por antigüedad"
• "Ordenar capítulos secuencialmente"

Y cuando se hace clic en un botón:

• "Los capítulos ahora están ordenados por antigüedad"
• "Los capítulos ahora se ordenan secuencialmente"

Uso de prototipos de voz para comunicar cambios dinámicos

Si bien la transferencia de diseño es una excelente manera de comunicar lo que debería suceder cuando un usuario de lectura de pantalla se enfoca en un elemento (como se mencionó anteriormente, aria-label sobrescribe cualquier texto visible para ofrecer contexto adicional), prototipos de voz se puede utilizar para comunicar lo que debería suceder como resultado de una interacción.

El flujo de trabajo de Adobe XD CC se vería así:

1. Haga clic en el espacio de trabajo "Prototipo".
2. Crea una interacción, como lo haría normalmente.
3. Seleccione “Acción” → “Reproducción de voz” (en el lado derecho).
4. Escriba el texto que leerán los lectores de pantalla en "Voz".

Cuando algo cambia en la pantalla, estos cambios deben comunicarse claramente a los usuarios de lectura de pantalla, especialmente si dichos cambios requieren que los usuarios respondan. Aqui hay algunos ejemplos mas:

• "(X) te ha enviado un mensaje"
• "Su sesión expirará en (x) segundos"
• “¿Estás seguro de que deseas cancelar? [Sí No]"

Conclusión

Un sitio web no es simplemente un documento que se debe leer de arriba a abajo, al menos no cuando se trata de tareas e interacciones.

Los flujos de lectura y los flujos de usuarios rara vez son lineales, por lo que diseñar para lectores de pantalla es un poco más complejo que simplemente traducir imágenes en texto. Tenemos que considerar qué contexto ya tiene el usuario, atender los diversos grados de discapacidad y, lo que es más importante, los diseñadores y desarrolladores deben trabajar juntos para que la accesibilidad no se convierta en una ocurrencia tardía.

Aproveche las funciones de transferencia de diseño y creación de prototipos de voz de Adobe XD CC a su favor, y siempre, siempre, siempre Piense en su aplicación y diseños web desde la ventana de visualización de usuarios con poca visibilidad. No todo el mundo tiene el lujo del contexto visual.

Bonificación: funciones de contraste de color en las herramientas de diseño de la interfaz de usuario

UXPin ofrece una función nativa para comprobar el contraste de color y también un simulador de daltonismo. Frijoles pequeños, pero aún así, es el primero. Si no usa UXPin, las opciones son herramientas basadas en la web como WebAIM, Extensiones de la herramienta de interfaz de usuario como Complemento Stark, Contraste para macOSo Analizador de contraste de color para Windows. Desafortunadamente, por alguna razón, el contraste de color nunca ha sido una consideración principal en las herramientas de diseño de UI.

¡Esperamos el 2020!

Bono: Adobe XD habilita el control por voz

Adobe XD comenzó recientemente a admitir Voice Control, lo que significa que ahora hay más formas de interactuar con Adobe XD y, por extensión, ser diseñador. Esta es una noticia fantástica para aquellos con problemas de accesibilidad, y la herramienta incluso beneficia a aquellos que no están discapacitados. ¿Qué tal el diseño inclusivo?

"¡Abre XD!"

Obtenga más información sobre accesibilidad con Accesibilidad para todos de A List Apart en SitePoint Premium.

Fuente: https://www.sitepoint.com/how-to-design-for-screen-readers-with-adobe-xd-cc/?utm_source=rss