The UX designer’s guide to accessibility on a $0 budget

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

¿Has escuchado algo así de parte de un líder de equipo o dueño de un negocio? El sentimiento de que “nuestros usuarios no tienen discapacidades” es desafortunadamente increíblemente común e increíblemente poco cierto. Over mil millones de personas (alrededor del 15% de la población) tienen alguna discapacidad, y aún más tienen deficiencias temporales o situacionales. Se pierde la oportunidad de servir a una gran parte de los usuarios al ignorar esta demografía, y se arriesga a pleito en 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 concretamente, puede incorporar accesibilidad en el diseño. Mientras que el completo el soporte de accesibilidad no suele ser fácil ni gratuito; puede ser una inversión seria dependiendo del contenido del sitio o la aplicación; hay muchas cosas sencillas 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 sea de 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 increíblemente fácil de hacer. Cuesta $0 elegir colores que sean accesibles para los usuarios con discapacidad visual, y como diseñador, esa decisión es completamente suya para tomar.

Quién se beneficia

El contraste de color accesible beneficia a los usuarios daltónicos o con baja visión, cambios en la sensibilidad al contraste relacionados con la edad u ojos cansados (u otras deficiencias visuales temporales).

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

Herramientas para usar

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

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

  

2. Escribir en lenguaje sencillo

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 beneficia

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

Herramientas para usar

• 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 labore este. La división de párrafos largos es otra forma de hacer que el contenido sea más legible.

Quién se beneficia

Todo el mundo. En serio, todo el mundo. Pero los usuarios con discapacidades cognitivas y de aprendizaje tienden a tener dificultades particularmente con grandes fragmentos de texto.

4. Usar enlaces descriptivos y encabezados

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

Utilice etiquetas HTML en sus encabezados (H1, H2, H3 y así sucesivamente). Asegúrese 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 beneficia

Cualquier persona que use un lector de pantalla, incluidas las personas ciegas o que experimentan 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 puedan comprender mejor el contenido de la página.

Quién se beneficia

Cualquier persona que use un lector de pantalla, incluidas las personas ciegas o que experimentan 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ía 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 beneficia

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

7. Poner las notificaciones en contexto

Si un usuario ingresa un formulario incorrectamente y recibe un mensaje de error, coloque ese mensaje de error cerca del campo incorrecto y mueva 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 beneficia

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

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

‍

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

‍

Colorear lata reforzar información pero tiene que haber otro mecanismo que muestre 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 beneficia

Usuarios ciegos, daltónicos, con baja visión o 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. Utilice las teclas de pestaña y 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 navegadores de teclado se basan en elementos interactivos incrustados en HTML y CSS para moverse por la página e incluso ofrecer atajos para saltarse el contenido. Por supuesto, esto solo funciona si el contenido está organizado de manera lógica. Organice los elementos de la página secuencialmente para que tengan sentido para que los usuarios “tabulen” a través de la página.

Quién se beneficia

Usuarios de navegador de teclado y lector de pantalla, incluidas 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 establecer la ley: cada característica no necesita ser visible en todo momento, solo necesita ser encontrable.

Quién se beneficia

¡Todos nosotros!

11. Proporcionar accesos directos

Su objetivo es hacer que el uso de su producto sea lo más fácil posible de usar. Ofrezca ayuda siempre que pueda. Proporcione campos de relleno previo, autosugerir y accesos directos.

Quién se beneficia

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




‍

Ganancias de crédito extra

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

12. Usar HTML estándar

Abogue por usar código HTML estándar para menús 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 funcionalidades de accesibilidad integradas. Si insiste en hacer una versión personalizada, necesita codificar las características de accesibilidad.

Quién se beneficia

Usuarios con lectores de pantalla.

13. Saltar navegación

Puede agregar un código bastante sencillo a su navegación global que permita a las personas que son ciegas skip repetitive navigation. While it doesn’t cover all cases where skip nav is beneficial, it’s still a helpful shortcut.

14. Label form controls

Give all form controls a label that helps users complete the form. Every text field, checkbox and menu dropdown should have an associated <label> element. Screen readers dictate these elements to users as instructions, so the labels should describe the intended user action, such as input, select or use the format MM/YYYY.

15. Multimedia content access

Accommodate the different ways users might intake information. If you have a lot of text, provide audio or video alternatives. If you have video, provide captions. If you have audio, provide a transcript. 



16. Test for accessibility

We test our products for edge cases. We can test them for accessibility, too. 

There are a few automated tools that help dev teams identify and resolve common accessibility problems, such as Axe by Deque or WAVE from WebAIM. You can also test for accessibility compliance yourself by navigating your site using only a keyboard, checking that audio has transcripts, and that video is captioned.

The easy case for accessibility


The case for accessibility is a no-brainer. You’ll avoid lawsuits, serve more customers, and out-pace non-compliant competitors. Best off, you’ll make your digital experiences even more engaging for everyone who takes part in them.

While these are quick wins, we know accessibility can still be complicated — especially for legacy products and technology stacks. We’re here to give you an inexpensive evaluation of how you can make your experience accessible for everyone, just get in touch!