Diseño para la accesibilidad y la inclusión

“La accesibilidad se resuelve en la etapa de diseño”. Esta es una frase que Daniel Na y su equipo escucharon una y otra vez mientras asistían a una conferencia. Diseñar para la accesibilidad significa ser inclusivo con las necesidades de sus usuarios . Esto incluye a sus usuarios objetivo, usuarios fuera de su grupo demográfico objetivo, usuarios con discapacidades e incluso usuarios de diferentes culturas y países. Comprender esas necesidades es la clave para crear experiencias mejores y más accesibles para ellos.

Uno de los problemas más comunes al diseñar para la accesibilidad es saber para qué necesidades debe diseñar. No es que diseñemos intencionalmente para excluir a los usuarios, es solo que "no sabemos lo que no sabemos". Entonces, cuando se trata de accesibilidad, hay mucho que saber.

¿Cómo hacemos para comprender la gran cantidad de usuarios y sus necesidades? ¿Cómo podemos asegurarnos de que sus necesidades se satisfagan en nuestro diseño? Para responder a estas preguntas, he descubierto que es útil aplicar una técnica de análisis crítico para ver un diseño a través de diferentes lentes.

“Un buen diseño [accesible] ocurre cuando ves tu [diseño] desde muchas perspectivas o lentes diferentes”.

— El arte del diseño de juegos: un libro de lentes

Una lente es “un filtro estrecho a través del cual se puede considerar o examinar un tema”. A menudo utilizados para examinar obras de arte, literatura o películas, los lentes nos piden que dejemos atrás nuestra visión del mundo y, en cambio, veamos el mundo a través de un contexto diferente.

Por ejemplo, ver el arte a través de la lente de la historia nos pide que entendamos el “clima social, político, económico, cultural y/o intelectual de la época”. Esto nos permite comprender mejor qué influencias del mundo afectaron al artista y cómo dieron forma a la obra de arte y su mensaje.

Las lentes de accesibilidad son un filtro que podemos usar para comprender cómo los diferentes aspectos del diseño afectan las necesidades de los usuarios. Cada lente presenta un conjunto de preguntas que debe hacerse a lo largo del proceso de diseño. Al usar estos lentes, se volverá más inclusivo con respecto a las necesidades de sus usuarios, lo que le permitirá diseñar una experiencia de usuario más accesible para todos.

Las Lentes de la Accesibilidad son:

• Lente de Animación y Efectos
• Lente de Audio y Video
• lente de color
• Lente de Controles
• lente de fuente
• Lente de Imágenes e Iconos
• Lente del teclado
• Lente de diseño
• Lente de honestidad material
• Lente de legibilidad
• Lente de estructura
• lente del tiempo

Debe saber que no todas las lentes se aplicarán a todos los diseños. Mientras que algunos pueden aplicarse a todos los diseños, otros son más situacionales. Lo que funciona mejor en un diseño puede no funcionar en otro.

Las preguntas proporcionadas por cada lente son simplemente una herramienta para ayudarlo a comprender qué problemas pueden surgir. Como siempre, debe probar su diseño con los usuarios para asegurarse de que sea utilizable y accesible para ellos.

Lente De Animación Y Efectos

Las animaciones efectivas pueden ayudar a dar vida a una página y una marca, guiar el enfoque de los usuarios y ayudar a orientar a un usuario. Pero las animaciones son un arma de doble filo. El mal uso de las animaciones no solo puede causar confusión o distraer, sino que también puede ser potencialmente mortal para algunos usuarios.

Los efectos de destellos rápidos (definidos como destellos de más de tres veces por segundo) o los efectos y patrones de alta intensidad pueden causar convulsiones, lo que se conoce como "epilepsia fotosensible". La fotosensibilidad también puede causar dolores de cabeza, náuseas y mareos. Los usuarios con epilepsia fotosensible deben tener mucho cuidado al usar la web, ya que nunca saben cuándo algo puede causar un ataque.

Otros efectos, como el paralaje o los efectos de movimiento, pueden hacer que algunos usuarios se sientan mareados o experimenten vértigo debido a la sensibilidad vestibular. El sistema vestibular controla el equilibrio y el sentido del movimiento de una persona. Cuando este sistema no funciona como debería, provoca mareos y náuseas.

“Imagínese un mundo en el que su giroscopio interno no funcione correctamente. Muy similar a estar intoxicado, las cosas parecen moverse por sí solas, tus pies nunca parecen estar estables debajo de ti y tus sentidos se mueven más rápido o más lento que tu cuerpo”.

— Introducción a los trastornos vestibulares

Las animaciones o el movimiento constantes también pueden distraer a los usuarios, especialmente a los que tienen dificultades para concentrarse. Los GIF son notablemente problemáticos ya que nuestros ojos se sienten atraídos por el movimiento, por lo que es fácil distraerse con cualquier cosa que se actualice o se mueva constantemente.

Esto no quiere decir que la animación sea mala y que no deberías usarla. En su lugar, debe comprender por qué está utilizando la animación y cómo diseñar animaciones más seguras. En términos generales, debe intentar diseñar animaciones que cubran distancias pequeñas, que coincidan con la dirección y la velocidad de otros objetos en movimiento (incluido el desplazamiento) y que sean relativamente pequeñas para el tamaño de la pantalla.

También debe proporcionar controles u opciones para satisfacer la experiencia del usuario. Por ejemplo, Slack le permite ocultar imágenes animadas o emojis como una configuración global y por imagen.

Para usar la Lente de Animación y Efectos , hágase estas preguntas:

• ¿Hay algún efecto que pueda causar una convulsión?
• ¿Existen animaciones o efectos que puedan causar mareos o vértigo por el uso del movimiento?
• ¿Hay alguna animación que pueda distraer al moverse, parpadear o actualizarse constantemente?
• ¿Es posible proporcionar controles u opciones para detener, pausar, ocultar o cambiar la frecuencia de animaciones o efectos?

Lente De Audio Y Video

La reproducción automática de videos y audio puede ser bastante molesta. No solo rompen la concentración de los usuarios, sino que también obligan al usuario a buscar los medios ofensivos y silenciarlos o detenerlos. Como regla general, no reproduzca automáticamente los medios.

“Use la reproducción automática con moderación. La reproducción automática puede ser una poderosa herramienta de participación, pero también puede molestar a los usuarios si se reproduce un sonido no deseado o si perciben un uso innecesario de recursos (por ejemplo, datos, batería) como resultado de una reproducción de video no deseada”.

— Directrices de reproducción automática de Google

Probablemente ahora se esté preguntando: "¿Pero qué pasa si reproduzco automáticamente el video en segundo plano pero lo mantengo silenciado?" Si bien el uso de videos como fondos puede ser una tendencia creciente en el diseño web actual, los videos de fondo sufren los mismos problemas que los GIF y las animaciones en constante movimiento: pueden distraer. Como tal, debe proporcionar controles u opciones para pausar o desactivar el video.

Junto con los controles, los videos deben tener transcripciones y/o subtítulos para que los usuarios puedan consumir el contenido de la manera que mejor les funcione. Los usuarios con problemas de visión o que prefieren leer en lugar de ver el video necesitan una transcripción, mientras que los usuarios que no pueden o no quieren escuchar el video necesitan subtítulos.

Para usar la Lente de Audio y Video , hágase estas preguntas:

• ¿Hay algún audio o video que pueda ser molesto por la reproducción automática?
• ¿Es posible proporcionar controles para detener, pausar u ocultar cualquier audio o video que se reproduzca automáticamente?
• ¿Los videos tienen transcripciones y/o subtítulos?

lente de color

El color juega un papel importante en un diseño. Los colores evocan emociones, sentimientos e ideas. Los colores también pueden ayudar a fortalecer el mensaje y la percepción de una marca. Sin embargo, el poder de los colores se pierde cuando un usuario no puede verlos o los percibe de manera diferente.

El daltonismo afecta aproximadamente a 1 de cada 12 hombres y 1 de cada 200 mujeres. La deuteranopía (daltonismo rojo-verde) es la forma más común de daltonismo y afecta aproximadamente al 6% de los hombres. Los usuarios con daltonismo rojo-verde suelen percibir los rojos, verdes y naranjas como amarillentos.

El significado del color también es problemático para los usuarios internacionales. Los colores significan diferentes cosas en diferentes países y culturas. En las culturas occidentales, el rojo suele utilizarse para representar tendencias negativas y el verde tendencias positivas, pero en las culturas orientales y asiáticas ocurre lo contrario.

Debido a que los colores y sus significados se pueden perder debido a diferencias culturales o daltonismo, siempre debe agregar un identificador que no sea de color. Los identificadores, como íconos o descripciones de texto, pueden ayudar a salvar las diferencias culturales, mientras que los patrones funcionan bien para distinguir entre colores.

Los colores sobresaturados, los colores de alto contraste e incluso el color amarillo pueden ser incómodos e inquietantes para algunos usuarios, principalmente aquellos en el espectro del autismo. Es mejor evitar altas concentraciones de este tipo de colores para ayudar a los usuarios a sentirse cómodos.

El contraste deficiente entre los colores de primer plano y de fondo hace que sea más difícil ver para los usuarios con baja visión, que usan un monitor de gama baja o que simplemente están expuestos a la luz solar directa. Todo el texto, los íconos y cualquier indicador de enfoque que se use para los usuarios que usan un teclado deben tener una relación de contraste mínima de 4,5:1 con respecto al color de fondo.

También debe asegurarse de que su diseño y colores funcionen bien en diferentes configuraciones del modo de alto contraste de Windows. Un error común es que el texto se vuelve invisible en ciertos fondos de modo de alto contraste.

Para usar la Lente de Color , hágase estas preguntas:

• Si se quitara el color del diseño, ¿qué significado se perdería?
• ¿Cómo podría proporcionar significado sin usar color?
• ¿Algún color está sobresaturado o tiene un alto contraste que podría hacer que los usuarios se sobreestimulen o se sientan incómodos?
• ¿El color frontal y de fondo de todo el texto, los íconos y los indicadores de enfoque cumplen con las pautas de relación de contraste de 4.5:1?

Lente de controles

Los controles, también llamados "contenido interactivo", son elementos de la interfaz de usuario con los que el usuario puede interactuar, ya sean botones, enlaces, entradas o cualquier elemento HTML con un detector de eventos. Los controles que son demasiado pequeños o demasiado juntos pueden causar muchos problemas a los usuarios.

Los controles pequeños son difíciles de hacer clic para los usuarios que no pueden ser precisos con un puntero, como aquellos con temblores o aquellos que sufren de destreza reducida debido a la edad. El tamaño predeterminado de las casillas de verificación y los botones de radio, por ejemplo, puede plantear problemas a los usuarios mayores. Incluso cuando se proporciona una etiqueta en la que se puede hacer clic, no todos los usuarios saben que pueden hacerlo.

Los controles que están demasiado juntos pueden causar problemas a los usuarios de pantallas táctiles. Los dedos son grandes y difíciles de precisar. Tocar accidentalmente el control incorrecto puede causar frustración, especialmente si ese control lo aleja o lo hace perder el contexto.

Los controles anidados dentro de otro control también pueden contribuir a los errores táctiles. No solo no está permitido en la especificación HTML, sino que también facilita seleccionar accidentalmente el control principal en lugar del que desea.

Para dar a los usuarios suficiente espacio para seleccionar un control con precisión, el tamaño mínimo recomendado para un control es de 34 por 34 píxeles independientes del dispositivo, pero Google recomienda al menos 48 por 48 píxeles, mientras que la especificación WCAG recomienda al menos 44 por 44 píxeles. Este tamaño también incluye cualquier relleno que tenga el control. Entonces, un control podría ser visualmente de 24 por 24 píxeles, pero con 10 píxeles adicionales de relleno en todos los lados lo llevaría a 44 por 44 píxeles.

También se recomienda que los controles se coloquen lo suficientemente separados para reducir los errores táctiles. Microsoft recomienda al menos 8 píxeles de espacio, mientras que Google recomienda que los controles estén separados por al menos 32 píxeles.

Los controles también deben tener una etiqueta de texto visible. Los lectores de pantalla no solo requieren la etiqueta de texto para saber qué hace el control, sino que también se ha demostrado que las etiquetas de texto ayudan a todos los usuarios a comprender mejor el propósito de un control. Esto es especialmente importante para las entradas de formulario y los íconos.

Para usar la Lente de los Controles , hágase estas preguntas:

• ¿Algún control no es lo suficientemente grande para que alguien lo toque?
• ¿Hay controles demasiado juntos que harían fácil tocar el incorrecto?
• ¿Hay algún control dentro de otro control o región en la que se pueda hacer clic?
• ¿Todos los controles tienen una etiqueta de texto visible?

lente de fuente

En los primeros días de la web, diseñábamos páginas web con un tamaño de fuente de entre 9 y 14 píxeles. Esto funcionó bien en aquel entonces, ya que los monitores tenían un tamaño de pantalla relativamente conocido. Diseñamos pensando que la ventana del navegador era una constante, algo que no se podía cambiar.

La tecnología actual es muy diferente a la de hace 20 años. Hoy en día, los navegadores se pueden usar en cualquier dispositivo de cualquier tamaño, desde un pequeño reloj hasta una enorme pantalla 4K. Ya no podemos usar tamaños de fuente fijos para diseñar nuestros sitios. Los tamaños de fuente deben ser tan receptivos como el diseño en sí.

No solo los tamaños de fuente deben ser receptivos, sino que el diseño debe ser lo suficientemente flexible para permitir a los usuarios personalizar el tamaño de fuente, la altura de línea o el espaciado entre letras a un nivel de lectura cómodo. Muchos usuarios utilizan CSS personalizado que les ayuda a tener una mejor experiencia de lectura.

La fuente en sí debe ser fácil de leer. Quizás se pregunte si una fuente es más legible que otra. La verdad del asunto es que la fuente realmente no hace una diferencia en la legibilidad. En cambio, es el estilo de fuente el que juega un papel importante en la legibilidad de las fuentes.

Los estilos de fuentes decorativas o cursivas son más difíciles de leer para muchos usuarios, pero especialmente problemáticos para los usuarios con dislexia. Los tamaños de fuente pequeños, el texto en cursiva y todo el texto en mayúsculas también son difíciles para los usuarios. En general, el texto más grande, las longitudes de línea más cortas, las alturas de línea más altas y el mayor espacio entre letras pueden ayudar a todos los usuarios a tener una mejor experiencia de lectura.

Para usar la lente de la fuente , hágase estas preguntas:

• ¿Es el diseño lo suficientemente flexible como para que el usuario pueda modificar la fuente a un nivel de lectura cómodo?
• ¿El estilo de fuente es fácil de leer?

Lente de Imágenes e Iconos

Dicen que una imagen vale más que mil palabras." Aún así, una imagen que no puedes ver es sin palabras, ¿verdad?

Las imágenes se pueden utilizar en un diseño para transmitir un significado o sentimiento específico. Otras veces se pueden usar para simplificar ideas complejas. Cualquiera que sea el caso de la imagen, un usuario que utiliza un lector de pantalla debe saber cuál es el significado de la imagen.

Como diseñador, usted comprende mejor el significado o la información que transmite la imagen. Como tal, debe anotar el diseño con esta información para que no se omita o se malinterprete más adelante. Esto se usará para crear el texto alternativo para la imagen.

La forma en que describe una imagen depende completamente del contexto, o de la cantidad de información textual ya disponible que describe la información. También depende de si la imagen es solo decorativa, transmite un significado o contiene texto.

“Casi nunca describe cómo se ve la imagen, sino que explica la información que contiene la imagen”.

— Cinco reglas de oro para el texto alternativo compatible

Dado que saber cómo describir una imagen puede ser difícil, hay un árbol de decisiones útil para ayudar a decidir. En términos generales, si la imagen es decorativa o hay texto alrededor que ya describe la información de la imagen, no se necesita más información. De lo contrario, debe describir la información de la imagen. Si la imagen contiene texto, repite el texto en la descripción también.

Las descripciones deben ser breves. Se recomienda usar no más de dos oraciones, pero apunte a una oración concisa cuando sea posible. Esto permite a los usuarios comprender rápidamente la imagen sin tener que escuchar una descripción extensa.

Como ejemplo, si tuviera que describir esta imagen para un lector de pantalla, ¿qué diría?

Dado que describimos la información de la imagen y no la imagen en sí, la descripción podría ser La noche estrellada de Vincent van Gogh ya que no hay otro contexto circundante que la describa. Lo que no debes poner es una descripción del estilo de la pintura o de cómo se ve la imagen.

Si la información de la imagen requiere una descripción extensa, como un gráfico complejo, no debe incluir esa descripción en el texto alternativo. En su lugar, aún debe usar una descripción corta para el texto alternativo y luego proporcionar la descripción larga como un título o un enlace a una página diferente.

De esta manera, los usuarios aún pueden obtener la información más importante rápidamente, pero tienen la capacidad de profundizar más si lo desean. Si la imagen es de un gráfico, debe repetir los datos del gráfico como lo haría con el texto de la imagen.

Si la plataforma para la que está diseñando permite a los usuarios cargar imágenes, debe proporcionar una forma para que el usuario ingrese el texto alternativo junto con la imagen. Por ejemplo, Twitter permite a sus usuarios escribir texto alternativo cuando suben una imagen a un tweet.

Para usar la Lente de Imágenes e Iconos , hágase estas preguntas:

• ¿Alguna imagen contiene información que se perdería si no fuera visible?
• ¿Cómo podría proporcionar la información de una manera no visual?
• Si el usuario controla la imagen, ¿es posible proporcionarle una forma de ingresar la descripción del texto alternativo?

lente del teclado

La accesibilidad del teclado es uno de los aspectos más importantes de un diseño accesible, pero también es uno de los más pasados ​​por alto.

Hay muchas razones por las que un usuario usaría un teclado en lugar de un mouse. Los usuarios que usan un lector de pantalla usan el teclado para leer la página. Un usuario con temblores puede usar un teclado porque brinda mayor precisión que un mouse. Incluso los usuarios avanzados utilizarán un teclado porque es más rápido y eficiente.

Un usuario que usa un teclado generalmente usa la tecla de tabulación para navegar a cada control en secuencia. Un orden lógico para el orden de tabulación ayuda en gran medida a los usuarios a saber dónde los llevará la siguiente pulsación de tecla. En las culturas occidentales, esto generalmente significa de izquierda a derecha, de arriba hacia abajo. Los pedidos de tabulación inesperados hacen que los usuarios se pierdan y tengan que escanear frenéticamente para ver dónde se centró la atención.

El orden de tabulación secuencial también significa que deben pasar por todos los controles anteriores al que desean. Si ese control está a decenas o cientos de pulsaciones de teclas, puede ser un verdadero problema para el usuario.

Al hacer que los flujos de usuarios más importantes estén más cerca de la parte superior del orden de pestañas, podemos ayudar a que nuestros usuarios sean más eficientes y efectivos. Sin embargo, esto no siempre es posible ni práctico de hacer. En estos casos, proporcionar una forma de saltar rápidamente a un flujo o contenido en particular aún puede permitirles ser eficientes. Esta es la razón por la cual los enlaces de “saltar al contenido” son útiles.

Un buen ejemplo de esto es Facebook, que proporciona un menú de navegación con teclado que permite a los usuarios saltar a secciones específicas del sitio. Esto acelera enormemente la capacidad de un usuario para interactuar con la página y el contenido que desea.

Al desplazarse por un diseño, los estilos de enfoque siempre deben estar visibles o un usuario puede perderse fácilmente. Al igual que un orden de pestañas inesperado, no tener buenos indicadores de enfoque hace que los usuarios no sepan qué está enfocado actualmente y tengan que escanear la página.

Cambiar el aspecto del indicador de enfoque predeterminado a veces puede mejorar la experiencia de los usuarios. Un buen indicador de enfoque no se basa únicamente en el color para indicar el enfoque (lente de color), y debe ser lo suficientemente distinto para permitir que el usuario lo encuentre fácilmente. Por ejemplo, un anillo de enfoque azul alrededor de un botón azul de color similar puede no distinguirse visualmente para discernir que está enfocado.

Aunque esta lente se enfoca en la accesibilidad del teclado, es importante tener en cuenta que se aplica a cualquier forma en que un usuario pueda interactuar con un sitio web sin un mouse. Los dispositivos como los palillos para la boca, los botones de acceso al interruptor, los botones para sorber y soplar y el software de seguimiento ocular requieren que la página sea accesible desde el teclado.

Al mejorar la accesibilidad del teclado, permite que una amplia gama de usuarios acceda mejor a su sitio.

Para usar la lente del teclado , hágase estas preguntas:

• ¿Qué orden de navegación del teclado tiene más sentido para el diseño?
• ¿Cómo podría un usuario de teclado llegar a lo que quiere de la manera más rápida posible?
• ¿El indicador de enfoque siempre es visible y visualmente distinto?

lente de diseño

El diseño contribuye en gran medida a la usabilidad de un sitio. Tener un diseño que sea fácil de seguir con contenido fácil de encontrar marca la diferencia para sus usuarios. Un diseño debe tener una secuencia significativa y lógica para el usuario.

Con la llegada de CSS Grid, poder cambiar el diseño para que sea más significativo en función del espacio disponible es más fácil que nunca. Sin embargo, cambiar el diseño visual crea problemas para los usuarios que confían en el diseño estructural de la página.

El diseño estructural es lo que utilizan los lectores de pantalla y los usuarios que utilizan un teclado. Cuando el diseño visual cambia pero no el diseño estructural subyacente, estos usuarios pueden confundirse porque su orden de tabulación ya no es lógico. Si debe cambiar el diseño visual, debe hacerlo cambiando el diseño estructural para que los usuarios que usan un teclado mantengan un orden de tabulación secuencial y lógico.

El diseño debe ser redimensionable y flexible a un mínimo de 320 píxeles sin barras de desplazamiento horizontales para que pueda verse cómodamente en un teléfono. El diseño también debe ser lo suficientemente flexible como para ampliarlo al 400% (también sin barras de desplazamiento horizontales) para los usuarios que necesitan aumentar el tamaño de fuente para una mejor experiencia de lectura.

Los usuarios que usan una lupa de pantalla se benefician cuando el contenido relacionado está muy cerca uno del otro. Una lupa de pantalla solo proporciona al usuario una pequeña vista de todo el diseño, por lo que el contenido que está relacionado pero que está lejos, o los cambios lejos de donde ocurrió la interacción, son difíciles de encontrar y pueden pasar desapercibidos.

Para usar Lens of Layout , hágase estas preguntas:

• ¿El diseño tiene una secuencia significativa y lógica?
• ¿Qué debería pasar con el diseño cuando se ve en una pantalla pequeña o se amplía al 400 %?
• ¿El contenido que está relacionado o cambia debido a la interacción del usuario está muy cerca uno del otro?

Lente de honestidad material

La honestidad material es un valor de diseño arquitectónico que establece que un material debe ser honesto consigo mismo y no usarse como sustituto de otro material. Significa que el concreto debe verse como concreto y no estar pintado o esculpido para que parezca ladrillo.

La honestidad material valora y celebra las propiedades y características únicas de cada material. Un arquitecto que sigue la honestidad material sabe cuándo debe usarse cada material y cómo usarlo sin empañarse.

Sin embargo, la honestidad material no es una regla estricta. Se encuentra en un continuo. Como todos los valores, puedes romperlos cuando los entiendes. Como dice el refrán, son “más lo que llamarías “directrices” que reglas reales”.

Cuando se aplica al diseño web, la honestidad material significa que un elemento o componente no debe verse, comportarse o funcionar como si fuera otro elemento o componente. Si lo hace, engañaría al usuario y podría generar confusión. Un ejemplo común de esto son los botones que parecen enlaces o enlaces que parecen botones.

Los enlaces y botones tienen diferentes comportamientos y prestaciones. Un enlace se activa con la tecla Intro, generalmente lo lleva a una página diferente y tiene un menú contextual especial al hacer clic con el botón derecho. Los botones se activan con la tecla de espacio, se utilizan principalmente para desencadenar interacciones en la página actual y no tienen ese menú contextual.

Cuando se diseña un enlace para que parezca un botón o viceversa, un usuario podría confundirse ya que no se comporta ni funciona como parece. Si el "botón" hace que el usuario se aleje inesperadamente, es posible que se sienta frustrado si pierde datos en el proceso.

“A primera vista todo parece estar bien, pero no resistirá el escrutinio. Tan pronto como un sitio web de este tipo se prueba con el uso real en una variedad de navegadores, la fachada se desmorona”.

— Diseño web resistente

Donde esto se vuelve más problemático es cuando un enlace y un botón tienen el mismo estilo y se colocan uno al lado del otro. Como no hay nada que los diferencie, un usuario puede navegar accidentalmente cuando pensó que no lo haría.

Cuando un componente se comporta de manera diferente a lo esperado, fácilmente puede causar problemas a los usuarios que usan un teclado o un lector de pantalla. Un menú de autocompletar que es más que un menú de autocompletar es uno de esos ejemplos.

Autocompletar se utiliza para sugerir o predecir el resto de una palabra que está escribiendo un usuario. Un menú de autocompletar permite al usuario seleccionar de una gran lista de opciones cuando no se pueden mostrar todas las opciones.

Un menú de autocompletar generalmente se adjunta a un campo de entrada y se navega con las teclas de flecha hacia arriba y hacia abajo, manteniendo el foco dentro del campo de entrada. Cuando un usuario selecciona una opción de la lista, esa opción anulará el texto en el campo de entrada. Los menús de autocompletar están destinados a ser listas de solo texto.

El problema surge cuando un menú de autocompletar comienza a tener más comportamientos. No solo puede seleccionar una opción de la lista, sino que también puede editarla, eliminarla o incluso expandir o contraer secciones. El menú de autocompletar ya no es solo una simple lista de texto seleccionable.

Los comportamientos agregados ya no significan que solo puede usar las flechas hacia arriba y hacia abajo para seleccionar una opción. Cada opción ahora tiene más de una acción, por lo que un usuario debe poder atravesar dos dimensiones en lugar de solo una. Esto significa que un usuario que usa un teclado podría confundirse sobre cómo operar el componente.

Los lectores de pantalla son los que más sufren este cambio de comportamiento, ya que no hay una manera fácil de ayudarlos a comprenderlo. Se requerirá mucho trabajo para garantizar que el menú sea accesible para un lector de pantalla utilizando medios no estándar. Como tal, podría resultar en una experiencia insatisfactoria o inaccesible para ellos.

Para evitar estos problemas, es mejor ser honesto con el usuario y el diseño. En lugar de combinar dos comportamientos distintos (un menú de autocompletar y la funcionalidad de editar y eliminar), déjelos como dos comportamientos separados. Use un menú de autocompletar para autocompletar el nombre de un usuario y tenga un componente o página diferente para editar y eliminar usuarios.

Para usar el Lente de la honestidad material , hágase estas preguntas:

• ¿El diseño es honesto con el usuario?
• ¿Hay algún elemento que se comporte, luzca o funcione como otro elemento?
• ¿Hay algún componente que combine comportamientos distintos en un solo componente? ¿Hacer eso hace que el componente sea materialmente deshonesto?

lente de legibilidad

¿Alguna vez ha tomado un libro solo para leer algunos párrafos o páginas y quiere darse por vencido porque el texto era demasiado difícil de leer? El contenido difícil de leer es mentalmente agotador y agotador.

La longitud de la oración, la longitud del párrafo y la complejidad del lenguaje contribuyen a la legibilidad del texto. El lenguaje complejo puede plantear problemas a los usuarios, especialmente a aquellos con discapacidades cognitivas o que no dominan el idioma.

Además de usar un lenguaje claro y simple, debes asegurarte de que cada párrafo se centre en una sola idea. Un párrafo con una sola idea es más fácil de recordar y digerir. Lo mismo ocurre con una oración con menos palabras.

Otro factor que contribuye a la legibilidad del contenido es la longitud de una línea. La longitud de línea ideal a menudo se cita entre 45 y 75 caracteres. Una línea que es demasiado larga hace que los usuarios pierdan la concentración y hace que sea más difícil pasar a la siguiente línea correctamente, mientras que una línea que es demasiado corta hace que los usuarios salten con demasiada frecuencia, lo que provoca fatiga en los ojos.

“La mente subconsciente se energiza cuando salta a la siguiente línea. Al comienzo de cada nueva línea, el lector se concentra, pero este enfoque se desvanece gradualmente a lo largo de la línea”

— Tipografía: un manual de diseño

También debe dividir el contenido con encabezados, listas o imágenes para brindar descansos mentales al lector y apoyar diferentes estilos de aprendizaje. Use encabezados para agrupar y resumir lógicamente la información. Los encabezados, enlaces, controles y etiquetas deben ser claros y descriptivos para mejorar la capacidad de comprensión de los usuarios.

Para usar la Lente de legibilidad , hágase estas preguntas:

• ¿El lenguaje es claro y simple?
• ¿Cada párrafo se enfoca en una sola idea?
• ¿Hay párrafos largos o bloques largos de texto continuo?
• ¿Todos los encabezados, enlaces, controles y etiquetas son claros y descriptivos?

Lente de estructura

Como se mencionó en la Lente del diseño, el diseño estructural es lo que usan los lectores de pantalla y los usuarios que usan un teclado. Mientras que Lens of Layout se enfocaba en el diseño visual, Lens of Structure se enfoca en el diseño estructural, o el HTML subyacente y la semántica del diseño.

Como diseñador, no puede escribir el diseño estructural de sus diseños. Sin embargo, esto no debería impedirle pensar en cómo se estructurará finalmente su diseño. De lo contrario, su diseño puede resultar en una experiencia inaccesible para un lector de pantalla.

Tomemos, por ejemplo, un diseño para un cuadro de torneo de eliminación simple.

¿Cómo sabría si un usuario puede acceder a este diseño mediante un lector de pantalla? Sin comprender la estructura y la semántica, es posible que no lo haga. Tal como está, el diseño probablemente resultaría en una experiencia inaccesible para un usuario que usa un lector de pantalla.

Para entender por qué es así, primero debemos entender que un lector de pantalla lee una página y su contenido en orden secuencial. Esto significa que se leerán todos los nombres de la primera columna del torneo, seguidos de todos los nombres de la segunda columna, luego la tercera y finalmente la última.

“George, Fred, Linus, Lucy, Jack, Jill, Fred, Ginger, George, Lucy, Jack, Ginger, George, Ginger, Ginger”.

Si todo lo que tuviera fuera una lista de nombres aparentemente aleatorios, ¿cómo interpretaría los resultados del torneo? ¿Podrías decir quién ganó el torneo? ¿O quién ganó el juego 6?

Sin nada más con lo que trabajar, un usuario que use un lector de pantalla probablemente estaría un poco confundido acerca de los resultados. Para poder entender el diseño visual, debemos proporcionar al usuario más información en el diseño estructural.

Esto significa que, como diseñador, debe saber cómo interactúa un lector de pantalla con los elementos HTML de una página para saber cómo mejorar su experiencia.

• Elementos emblemáticos (encabezado, navegación, página principal y pie de página)
  Allow a screen reader to jump to important sections in the design.
• Headings ( h1 → h6 )
  Allow a screen reader to scan the page and get a high level overview. Screen readers can also jump to any heading.
• Lists ( ul and ol )
  Group related items together, and allow a screen reader to easily jump from one item to another.
• Buttons
  Trigger interactions on the current page.
• Links
  Navigate or retrieve information.
• Form labels
  Tell screen readers what each form input is.

Knowing this, how might we provide more meaning to a user using a screen reader?

To start, we could group each column of the tournament into rounds and use headings to label each round. This way, a screen reader would understand when a new round takes place.

Next, we could help the user understand which players are playing against each other each game. We can again use headings to label each game, allowing them to find any game they might be interested in.

By just adding headings, the content would read as follows:

“__Round 1, Game 1__, George, Fred, __Game 2__, Linus, Lucy, __Game 3__, Jack, Jill, __Game 4__, Fred, Ginger, __Round 2, Game 5__, George, Lucy, __Game 6__, Jack, Ginger, __Round 3__, __Game 7__, George, Ginger, __Winner__, Ginger.”

This is already a lot more understandable than before.

The information still doesn't answer who won a game though. To know that, you'd have to understand which game a winner plays next to see who won the previous game. For example, you'd have to know that the winner of game four plays in game six to know who advanced from game four.

We can further enhance the experience by informing the user who won each game so they don't have to go hunting for it. Putting the text “(winner)” after the person who won the round would suffice.

We should also further group the games and rounds together using lists. Lists provide the structural semantics of the design, essentially informing the user of the connected nodes from the visual design.

If we translate this back into a visual design, the result could look as follows:

Since the headings and winner text are redundant in the visual design, you could hide them just from visual users so the end visual result looks just like the first design.

“If the end result is visually the same as where we started, why did we go through all this?” You may ask.

The reason is that you should always annotate your design with all the necessary structural design requirements needed for a better screen reader experience. This way, the person who implements the design knows to add them. If you had just handed the first design to the implementer, it would more than likely end up inaccessible.

To use the Lens of Structure , ask yourself these questions:

• Can I outline a rough HTML structure of my design?
• How can I structure the design to better help a screen reader understand the content or find the content they want?
• How can I help the person who will implement the design understand the intended structure?

Lens Of Time

Periodically in a design you may need to limit the amount of time a user can spend on a task. Sometimes it may be for security reasons, such as a session timeout. Other times it could be due to a non-functional requirement, such as a time constrained test.

Whatever the reason, you should understand that some users may need more time in order finish the task. Some users might need more time to understand the content, others might not be able to perform the task quickly, and a lot of the time they could just have been interrupted.

“The designer should assume that people will be interrupted during their activities”

— The Design of Everyday Things

Users who need more time to perform an action should be able to adjust or remove a time limit when possible. For example, with a session timeout you could alert the user when their session is about to expire and allow them to extend it.

To use the Lens of Time , ask yourself this question:

• Is it possible to provide controls to adjust or remove time limits?

Bringing It All Together

So now that you've learned about the different lenses of accessibility through which you can view your design, what do you do with them?

The lenses can be used at any point in the design process, even after the design has been shipped to your users. Just start with a few of them at hand, and one at a time carefully analyze the design through a lens.

Ask yourself the questions and see if anything should be adjusted to better meet the needs of a user. As you slowly make changes, bring in other lenses and repeat the process.

By looking through your design one lens at a time, you'll be able to refine the experience to better meet users' needs. As you are more inclusive to the needs of your users, you will create a more accessible design for all your users.

Using lenses and insightful questions to examine principles of accessibility was heavily influenced by Jesse Schell and his book “The Art of Game Design: A Book of Lenses.”