La guía de accesibilidad del diseñador UX con un presupuesto de $0

“Entonces, no tenemos un presupuesto para accesibilidad. Pero no es gran cosa. Nuestros usuarios no tienen incapacidades de todos los modos”.

¿Has oido algo así de parte de un líder de equipo o dueño de un negocio? El sentimiento de que “nuestros usuarios no tienen descapacidades” es, por supuesto, muy común e muy poco cierto. Sobre mil millones de personas (alrededor del 15% de la población) tienen alguna discapacidad, y aún más tienen limitaciones temporales o situacionales. Si pierde la oportunidad de servir a una gran parte de los usuarios para ignorar esta demografía, y se arriesga a pleito in el proceso.

La verdad es que hay muchos pasos de bajo costo y sin costo alguno que los diseñadores pueden tomar con solo un poco de conocimiento para mantener la accesibilidad como prioridad. En primer lugar, no cuesta nada convertirse en un campeón de accesibilidad.

‍

Cualquier tipo de diseñador, a cualquier nivel, puede educar a su equipo sobre la prevalencia de usuarios con discapacidad.

‍

Más específicamente, puede incorporar accesibilidad en el diseño. Mientras que el completo el soporte de accesibilidad no es fácil ni gratuito; puede ser una inversión seria en base al contenido del sitio o la aplicación; hay muchas cosas que los diseñadores pueden lograr para mejorar la accesibilidad en cualquier presupuesto

Aquí hay 16 logros de accesibilidad de “fruta colgante baja” que puede lograr durante el proceso de diseño que no requieren presupuesto adicional ni capacitación.

1. Comprobar contraste de color

El contraste de color se aplica al tamaño del texto y a los gráficos de la interfaz de usuario. Las Pautas de Accesibilidad al Contenido Web (WCAG) 2.0 requieren que el texto normal tenga una relación de contraste de al menos 4. 5:1 y el texto grande tenga al menos una relación de 3:1. Cualquier texto que tenga 18 puntos (24px) o 14 puntos (18,66px) y negrita se considera “texto grande”.

Diseñar texto, iconos e imágenes con un contraste de color adecuado es una cosa muy fácil de hacer. Cuesta $0 elegir colores que sean disponibles para los usuarios con discapacidad visual, y como diseñador, esa decisión es completamente suya para tomar.

Quién se lo quiere

El contraste de color accesible ayuda a los usuarios daltónicos o con baja visión, cambios en la sensibilidad al contraste relacionado con la edad y los ojos cansados (u otras carestías visuales temporales).

A temporal o situacional es una condición permanente que simula una discapacidad. Los ejemplos son ir al trabajo, trabajar en una oficina ruidosa, tener un niño colgando de tu brazo, o sí, incluso estar cansado.

Herramientas de usuario

Puede verificar el contraste de color usando uno de los muchos verificadores de contraste gratuitos que existen. Algunas herramientas populares son:

• Comprobable de contraste de color WebAIM (Web)
• Paciello Group Analizador de contraste (Windows/Mac)
• WebAIM WAVE (Extensión Chrome)

  

2. Sencillo language

Si eres redactor, escribe en un lenguaje sencillo. Si no es así, enfatice a los redactores que deben usar vocabulario que un alumno de octavo grado pueda entender fácilmente.

El lenguaje en los botones puede llegar a ser poco claro ya que el espacio es reducido. Cuando muestra a los usuarios un mensaje que dice: “¿Está seguro de que desea Cancelar este pedido?” y las opciones son “Cancelar” y “cerrar”, no es de extrañar que los usuarios se confundan. Las acciones de los usuarios deben ser absolutamente obvias.

Quién se lo quiere

El lenguaje sencillo es benéfico a los usuarios con incapacidades cognitivas y de aprendizaje y también a los usuarios que simplemente no tienen tiempo para procesar copias floridas.

Herramientas de usuario

• Datalyze | Buscador de palabras difíciles y extrañas (Web)
• Comprobador de legibilidad de URL WebFX (Web)
• Comprobador de legibilidad de fórmulas de legibilidad (Web)


  

3. Descomponer grandes Fragmentos de Texto

No hace falta que se esté trabajando. La división de los comentarios largos es otra forma de hacer que el contenido sea más legible.

Quién se lo quiere

Todo el mundo. En serio, todo el mundo. Pero los usuarios con incapacidades cognitivas y de aprendizaje tienen que tener dificultades en especial con grandes pasajes de texto.

4. Usar enlaces descriptivos y encabezados

Los usuarios de lectores de pantalla utilizan encabezados para comprender cómo se Organizan el contenido de una página. También se usa para navegar por la página.

Usar etiquetas HTML en sus encabezados (H1, H2, H3 y así, así, a continuación). Acorra de usar solo una etiqueta H1 por página, o desorientará a los lectores de pantalla, ya que ven la etiqueta H1 como el comienzo del contenido.

Quién se lo quiere

Cualquier persona que use un lector de pantalla, incluido las personas ciegas o que presente baja visión.

5. Agregar etiquetas Alt a images

Las etiquetas Alt son “texto alternativo” incrustado en el código fuente que ilustra una imagen. Para escribir una etiqueta alt, todo lo que necesita hacer es describir el contexto de lo que la imagen está transmitiendo en unas pocas palabras clave. Los lectores de pantalla recogen las etiquetas alt y las leen en voz alta para que los usuarios con discapacidad visual pueden comprender mejor el contenido de la página.

Quién se lo quiere

Cualquier persona que use un lector de pantalla, incluido las personas ciegas o que presente baja visión.

6. Hacer que el texto sea legible

Otro fácil. Se recomienda 16px de peso regular como base.

También es necesario cambiar el tamaño del texto. Los usuarios deben poder leer el contenido de la página cuando se amplíe al 200%. Puede probar el diseño receptivo configurando la ventana del navegador en 1280px de ancho y haciendo zoom al 400%.

Quién se lo quiere

Personas que tienen baja visión, usuarios mayores o incluso usuarios cuya resolución de pantalla hace que el texto sea demasiado pequeño para leerlo.

7. Pone las notificaciones en contexto

Si un usuario recibe un formulario de forma incorrecta y recibe un mensaje de error, pone ese mensaje de error cerca del campo incorrecto y desplaza el foco al error. Visualizarlos en la parte superior del formulario pero mantener el enfoque en la parte inferior del formulario deja al usuario preguntándose dónde se equivocaron.

Quién se lo quiere

Usuarios lectores de pantalla, usuarios con capacidades cognitivas, y bueno, todos.

8. No usa el color solo para transmitir información

‍

El color nunca debe ser el único medio de indicar acción, incitar una respuesta o hacer que se identifique un elemento gráfico.

‍

Colorear negro reforzar información pero tiene que tener otro mecanismo que muestra el estado de una acción. En otras palabras, no puede hacer que un campo de formulario obligatorio se vuelva rojo cuando el usuario lo deja vacío, sino que también debe incluir algún tipo de mensaje de error.

Quién se lo quiere

Usuarios ciegos, daltónicos, con baja visión u optan por anular los colores de la página web por cualquier motivo (tal vez porque el esquema de color es demasiado claro u oscuro, apenas resalta los enlaces o es difícil de leer).

9. Hacer que el teclado de contenido sea accesible

Debería poder navegar por una página web usando solo un teclado. Utiliza las teclas de la etiqueta y la flecha para saltar de un vínculo a otro o entre los elementos del formulario. Si no puede, la página no cumple con las pautas de las WCAG.

Los lectores de pantalla y los navegador de teclado se basan en elementos interactivos incrustados en HTML y CSS para moverse por la página e incluso ofrecer atajos para saltar el contenido. Por supuesto, esto solo funciona si el contenido está organizado de manera lógica. Organice los elementos de la página secuenciamente para que tengan sentido para que los usuarios “tabulen” a través de la página.

Quién se lo quiere

Usuarios de teclado y lector de pantalla, Incluya las personas con discapacidad visual y problemas de movilidad.

10. Mantenga las pantallas simples

Mantenga su pantalla lo más simple posible. Las pantallas desordenada son simplemente más difíciles de usar.

Como diseñador, estás bajo la presión del equipo de marketing, el equipo de SEO y los propietarios de productos que abogan por ciertas características para obtener el centro de atención. Debe tomar algunas decisiones difíciles y establece la ley: cada característica no necesita ser visible en todo momento, solo necesita ser encontrable.

Quién se lo quiere

¡Todos nosotros!

11. Convierte accesos en Directo

Su objetivo es hacer que el uso de su producto sea lo más fácil posible de usar. Proponé ayuda siempre que pueda. Facilite campos de relleno previo, autosugiera y accesos en línea.

Quién se lo quiere

Las personas con retos de movilidad y las que tienen prisa. 




‍

Extra de credito

Estas “ganancias de crédito extra” implican cantidad modestas de esfuerzo en el lado del desarrollo de front-end, pero ofrecen enormes beneficios de accesibilidad.

12. Usar HTML estándar

Abogue por usar código HTML estándar para los menúes desplegables, botones de radio y otros elementos en lugar de diseñar versiones personalizadas. Los lectores de pantalla buscan HTML estándar y pueden traducirlo fácilmente, además el código estándar ya tiene funciones de accesibilidad integradas. Si insiste en hacer una versión personalizada, necesita codificar las características de accesibilidad.

Quién se lo quiere

Usuarios con lectores de pantalla.

13. Salta navegación

Puede agregar un código bastante simple a su navegación global que le haga a las personas que son ciegas omitir navegación repetitiva. Si bien no cubre todos los casos en los que omitir navegación es beneficioso, sigue siendo un atajo útil.

14. Controles de formulario de etiquetas

Dar todo el formulario controla una etiqueta que ayuda a los usuarios a completar el formulario. <label>Cada campo de texto, casilla de verificación y menú desplegable debe tener un elemento asociado. Los lectores de pantalla dictan estos elementos a los usuarios como instrucciones, por lo que las etiquetas deben describir la acción prevista del usuario, como ingresar, seleccionar o usar el formato MM/AAAA.

15. Acceso al contenido multimedia

Acomoda las diferentes formas en que los usuarios pueden recibir información. Si tienes mucho texto, proporciona alternativas de audio o video. Si tiene video, proporcione subtítulos. Si tiene audio, proporcione una transcripción. 



16. Prueba de accesibilidad

Probamos nuestros productos para casos de borde. También podemos probarlos para su accesibilidad.

Existen algunas herramientas automatizadas que ayudan a los equipos de desarrollo a identificar y resolver problemas comunes de accesibilidad, como Axe de Deque o OLA de WebAIM. También puede probar el cumplimiento de accesibilidad usted mismo navegando por su sitio usando solo un teclado, verificando que el audio tenga transcripciones y que el video tenga subtítulos.

El estuche fácil para la accesibilidad


El caso de la accesibilidad es una obviedad. Evitará demandas, atenderá a más clientes y superará a los competidores que no cumplen con las normas. Lo mejor es que harás que tus experiencias digitales sean aún más atractivas para todos los que participan en ellas.

Si bien estas son ganancias rápidas, sabemos que la accesibilidad aún puede ser complicada, especialmente para productos heredados y pilas de tecnología. Estamos aquí para darle una evaluación económica de cómo puede hacer que su experiencia sea accesible para todos, solo ponerse en contacto!