Qué impacto tiene el diseño en la accesibilidad del sitio web

¿Está buscando un punto de partida en la vasta disciplina de la accesibilidad? Profundizaremos en prácticas y herramientas reales que puede implementar en su proceso de diseño para mejorar sus productos digitales haciéndolos inclusivos para más de sus usuarios.

¿Qué es la accesibilidad?

Los sitios web accesibles permiten que una variedad más amplia de usuarios interactúe con el contenido de su sitio web sin problemas. Ya sea que estemos abordando el tema desde una perspectiva de UI o UX, el enfoque está en crear un producto de calidad que se adapte a una audiencia diversa.

Esta audiencia diversa “se extiende a cualquier persona que esté experimentando alguna discapacidad permanente, temporal o situacional, por ejemplo, tener un solo brazo es una condición permanente, tener un brazo lesionado es temporal y sostener a un bebé en un brazo es situacional - en cada caso, el el usuario puede completar tareas con una sola mano ". (Avinash Kaur, 2018).

¿Por qué es importante la accesibilidad?

Como diseñadores, es nuestra responsabilidad asegurarnos de que diseñamos de una manera que sea accesible para todos los usuarios, independientemente de su situación, habilidades o contexto. Como resultado, la web puede ser un espacio inclusivo para todos, ya sea que tengan una discapacidad cognitiva, una discapacidad visual o una discapacidad física.

La creación de un sitio web accesible no tiene por qué requerir grandes cantidades de presupuesto o cambios. Dado que no exige características o contenido adicionales, la accesibilidad se puede lograr mediante la educación y la conciencia al inicio de un proyecto de diseño.

También podría decirse que es importante para las empresas: los estudios muestran que los sitios web accesibles tienen mejores resultados de búsqueda, llegan a una audiencia más grande, son amigables con el SEO, tienen tiempos de descarga más rápidos, fomentan las buenas prácticas de codificación y siempre tienen una mejor usabilidad.

¿Cómo logramos la accesibilidad?

Deberá realizar ciertos ajustes y seguir un marco para asegurarse de que está diseñando para un conjunto diverso de habilidades, edades y nivel de experiencia con los dispositivos.

La accesibilidad es una disciplina independiente que evoluciona constantemente para adaptarse a los productos digitales. Pero de la misma forma, las soluciones de software también están creciendo. Lo que significa que no podemos cubrir todo en el tema, pero si encuentra útil este artículo, ¡podemos hacer una parte 2!

Vamos a profundizar en 5 grandes áreas:

1. Contraste de color
2. Texto alternativo
3. Estados de enfoque
4. Formularios
5. Tipografía

Contraste de color

Asegurarse de que haya un contraste de color suficiente entre el texto y el fondo ayuda a los usuarios con problemas de visión. Esto afecta a un mayor número de usuarios de lo esperado y, a menudo, se ignora como un problema. Sin embargo, hasta 1 de cada 12 hombres son daltónicos y muchos otros tienen baja visión o son ciegos.

Para empezar, las pautas de accesibilidad dictan que el color nunca debe ser la única forma de transmitir información. En otras palabras, debe haber una pista adicional para aquellos usuarios que perciben el color de manera diferente y pueden perder nuestras instrucciones basadas en colores.

Para mantener un contraste decente entre el texto y el fondo, una buena proporción a seguir es un mínimo de 4.5 a 1. Esto permite que los usuarios con baja visión o daltonismo tengan claridad para diferenciar entre los dos.

La relación de contraste de 4.5 a 1 se adhiere al nivel de conformidad AA (de los tres niveles: A, AA y AAA) pero esto cambia según el tamaño de fuente y el nivel de conformidad que desea alcanzar. Las fuentes más grandes requieren una relación de contraste menor de solo 3 a 1 si el tipo es de 18 puntos (o 14 puntos en negrita).

Estas proporciones mínimas no se aplican al texto que se encuentra dentro de un logotipo o una marca, pero es útil verificar la proporción de contraste usted mismo con esta práctica herramienta.

Texto alternativo

Para los usuarios que acceden a la web utilizando lectores de pantalla, el contenido que se muestra no siempre se transmite correctamente. El texto alternativo (alt) es lo que utiliza el lector de pantalla para informar al usuario qué imágenes hay en la página.

Esto se puede hacer convirtiendo el texto alternativo en braille, una descripción de audio o leyendo visualmente el texto. Esto significa que es importante describir con precisión lo que está sucediendo en la imagen para aquellos que no pueden verlo.

A veces, puede que no sea necesario agregar texto alternativo. Por ejemplo, puede haber suficientes indicadores contextuales alrededor de la imagen o la imagen no tiene otra función que la estética.

Estados de enfoque

Lo más probable es que ya esté familiarizado con los indicadores de enfoque sin darse cuenta. Los estados de enfoque son los contornos azules (a menudo) que aparecen cuando se selecciona un elemento, por ejemplo, enlaces, menús, botones y campos de formulario.

Estos señalan en qué elemento está enfocado el usuario cuando usa el teclado. A menudo, estos indicadores se consideran antiestéticos o como si no tuvieran un propósito, pero en realidad son muy importantes. Muchos usuarios están limitados al uso únicamente del teclado y las personas con discapacidad visual que usan lectores de pantalla también requieren indicadores de enfoque para ayudar con la navegación de la página.

Los indicadores de enfoque son una forma sencilla de hacer que la navegación de su página sea clara y accesible con muy poco esfuerzo y, sin embargo, una gran diferencia para el usuario. Pueden combinarse perfectamente con la marca usando colores apropiados, solo tienen que contrastar para que los elementos se destaquen.

Formularios

Los formularios pueden ser complejos para cualquier persona, pero aquellos con problemas de accesibilidad adicionales a menudo pueden tener problemas cuando los formularios son demasiado minimalistas y poco claros. A continuación se enumeran algunos elementos comunes que deben abordarse para abordar la accesibilidad:

• Etiquetas : el uso de texto de marcador de posición como etiqueta en lugar de texto fuera del campo crea confusión, ya que el texto desaparece cuando el usuario comienza a escribir. Omitir instrucciones cruciales para el usuario en favor del minimalismo o la estética es un gran error a evitar.
• Bordes : algo tan simple como un borde alrededor de una entrada de texto es importante para los usuarios con discapacidades cognitivas, por lo que está claro dónde deben hacer clic.
• Instrucciones adicionales : a menudo, los formularios utilizan un enfoque minimalista en un intento de ordenar el diseño, sin embargo, esto dificulta la usabilidad y, por lo tanto, la accesibilidad.
• Mensajes de error : estos deben indicarse mediante varios elementos, comúnmente se usa color, pero además de esto, los errores deben indicarse mediante símbolos o texto.
• Revisión : los formularios deben permitir un período de revisión antes del envío para permitir que el usuario corrija cualquier información.

Tipografía

La información es más fácil de digerir cuando no está desordenada y hay demasiada en un solo espacio. Esto también se aplica a los sitios web accesibles. Como se mencionó anteriormente, el tamaño de fuente puede alterar los requisitos mínimos de relación de contraste, pero los tamaños de fuente no deben ser inferiores a 10 pt.

Como puede ver, es difícil leer en 9 pt.

Aumentar la cantidad de espacio en blanco entre ambas líneas de texto y palabras individuales puede ayudar a los usuarios con discapacidad visual o dislexia. El siguiente espaciado mínimo garantiza que se cumplan los requisitos de esos usuarios:

• Espaciado entre letras : x0,12 el tamaño de fuente
• Espaciado entre palabras : x0,16 el tamaño de la fuente
• El interlineado: x1.5 el tamaño de la fuente
• Espaciado entre párrafos : x2 el tamaño de la fuente

Conclusión

Sorprendentemente, estos pequeños cambios pueden marcar una gran diferencia en la accesibilidad. No se requieren grandes presupuestos y mucho tiempo para que su sitio web se ajuste a las Pautas de accesibilidad al contenido web, pero puede cambiar drásticamente la experiencia de un usuario y, por lo tanto, impulsar su negocio también.

Agregar estas sugerencias a su proceso de diseño puede convertirse en una segunda naturaleza, allanando el camino para un futuro de sitios web más accesibles; depende de nosotros como diseñadores.

Si necesita ayuda con su creatividad, no dude en ponerse en contacto con nosotros.