Mejora de la tipografía web para usuarios con discapacidades visuales

En la industria de la web, a menudo creamos para la mayoría, lo que hace que nuestro trabajo sea tolerable para aquellos en minoría. Eso no es lo suficientemente bueno. En este artículo vamos a examinar formas de mejorar la experiencia tipográfica para usuarios con discapacidades visuales en la web..

Los informes de finales de 2013 sugieren que hay un estimado de 285 millones de personas con discapacidad visual en todo el mundo. Mientras que el 90% de estas personas viven en países en vías de desarrollo, el 10% restante incluye a 28,500,000 personas que ciertamente interactúan con la web en cierta medida. Existen navegadores específicos para usuarios con discapacidades visuales, como WebbIE, que convierten todas las páginas en interfaces de solo texto para que funcionen con lectores de pantalla, pero ¿es eso suficiente? ¿Qué pasa con aquellos que no están completamente ciegos, pero tienen problemas para leer las fuentes en la web? Es un enfoque de todo o nada justo para ellos?

WebbIE Web Browser 4

Revisemos los problemas a los que se enfrenta este grupo de usuarios, cómo las prácticas de nuestra industria ayudan a prevenirlos y cómo podemos solucionar el problema!

Problemas en el diseño tipográfico

Cuando un diseñador crea una tipografía, el lugar de visualización destinado tiene una gran influencia. Los personajes destinados a ser leídos en medios impresos serían diseñados para adaptarse mejor a eso. Primero se debe optimizar una fuente de escritorio antes de usarla en la web, y muchas de las fuentes populares tienen variantes web en estos días. Por ejemplo, un tipo de letra optimizado para la web puede tener menos contraste de trazo (que verá en un momento), una altura x más alta, contadores más grandes (los orificios dentro de una forma de letra) y más espacios abiertos. Si bien se pretende que el tipo de letra sea más legible en la web, algunos de estos cambios pueden tener el efecto contrario para las personas con discapacidad visual..

Trazos no modulados

A menudo, oirá que las personas se enredan en una discusión sobre cuál es más fácil de leer para copiar; serif o sans serif tipo? De hecho, elegir un tipo de letra para facilitar la lectura no es tan blanco y negro como ese.

Trazos no modulados Son cuando el peso en los trazos de un personaje no varía. Esto elimina muchas características definitorias de las letras que utilizan los discapacitados visuales para la interpretación. Para un usuario con discapacidad visual, el S de un tipo de letra sin modular podría ser mal interpretado como una do.

En el ejemplo anterior, verá que Arial tiene trazos sin modular, a diferencia del clásico serif de Georgia. Verdana es un buen ejemplo de un sans-serif que muestra una modulación leve. Sus terminales ensanchados (el final de los trazos) sugieren una "parada" antes de que el ojo del lector pase al siguiente carácter.

En la década de 1950, Herman Zapf desarrolló Optima con precisamente esto en mente; apuntó a un sans-serif que podría reemplazar el tipo de serif más usado en libros y revistas.. 

Mal manejo del tamaño y peso

Es posible que haya tenido que hacer esto antes: aumentar el peso de una fuente en tamaños más pequeños para una mejor legibilidad. En su mayor parte, esta es una solución satisfactoria que proporciona el contenido legible para el usuario anticipado. En el caso de usuarios con discapacidades visuales, esto crea una experiencia de lectura casi imposible..

Cuando combina una fuente no especialmente diseñada para un cierto tamaño y mejora su legibilidad agregando peso (especialmente si el navegador agrega el peso, en lugar de usar una variante de fuente específica), exagera el efecto de los trazos no modulados. El peso añadido difumina las características específicas de las letras utilizadas para facilitar la identificación. 

Falta de kerning distintivo

El kerning es el ajuste distintivo del espaciado entre caracteres en una fuente. Con el kerning, el objetivo es tener una cantidad distinta de espacios en blanco entre caracteres para toda la familia de fuentes. Sin embargo, en la mayoría de las fuentes encontrará en la web la cantidad de espacios en blanco que se manejan de una manera más uniforme.

En la superficie, esto no parece tan importante, pero un enfoque uniforme puede llevar a una mala interpretación de los caracteres. Un ejemplo común de esto es L y J. Coloque estos dos caracteres uno al lado del otro y podría interpretarlos mal U, o Yo. Otro gran ejemplo es dos capitales. V, VV. Esta combinación podría verse fácilmente como una W.

Opciones de color

Es imposible discutir la legibilidad sin mencionar las opciones de color. Las diferentes combinaciones de colores para la fuente y el fondo crean diferentes experiencias de lectura. Por ejemplo, es una práctica segura común colocar texto casi negro sobre un fondo casi blanco. En el mismo sentido, es una mala práctica usar un color amarillo con un fondo blanco. Este último es una experiencia de lectura horrible y puede provocar dolores de cabeza..

Hoy en día, con el uso prominente del diseño plano, estos problemas de color no representan un problema tan grande en comparación con hace unos años. Sin embargo, todavía es algo para tener en consideración real. Para un fondo de video (también una tendencia al alza), siempre habrá diferentes escenas que cambiarán el balance de color. Para un diseño plano, el problema radica en las opciones simplemente en silenciar un color lo suficiente como para dar un nivel aceptable de legibilidad.

El blanco sobre azul en este ejemplo se ve muy bien, pero no si su visión no es del 100%. Eche un vistazo a checkmycolours.com para analizar cualquier combinación de la que no esté seguro..

Creando mejores conjuntos de fuentes de proyectos

Después de revisar algunas desventajas clave rápidas que enfrentan los usuarios con discapacidades visuales con tipografía web, ahora pasemos a lo que se puede hacer como arquitectos de la web para ayudar con eso..

Mejores combinaciones de colores

Para crear combinaciones de colores entre su esquema y fuente, solo hay una regla simple a seguir. El fondo debe ser lo suficientemente claro y silencioso en cuanto a dónde no crea ruido. Para la fuente, un color sólido con una respetable cantidad de contraste. Simple a la derecha?!

Para los fondos de video hay un poco más involucrado. Si bien el color de fondo superpuesto debajo del texto es excelente, el video puede diferenciar la atmósfera y los niveles de ruido mediante el cambio de escenas. Para contrarrestar esto, asegúrese de tener en cuenta todos los diferentes cambios de escena a lo largo del video.

¡Parece increíble! Aunque no puedo leerlo.

Tamaño de fuente

Simplemente mostrar una fuente en un tamaño seguro no va a funcionar siempre. Como probablemente haya experimentado, algunas fuentes aparecen irregulares o menos refinadas cuando se usan en diferentes tamaños. Una solución popular para esto es un poco de peso extra y agregar un golpe. Si bien eso puede ayudar, es complicado y no hace el trabajo del todo.

Pruebas

Las pruebas para asegurarse de que su sitio sea legible para las personas con discapacidades visuales no son tan difíciles como parece. Intenta hacer estas tres cosas:

  • Mira tu sitio en una escala de grises.
  • Pruebe cómo buscaría su sitio usuarios que diferencien o vean ciertos colores (naranja y rojo, por ejemplo). www.color-blindness.com/coblis-color-blindness-simulator
  • Vea qué tan legible se ve su fuente en diferentes niveles de desenfoque jugando con la sombra de texto.

Recursos

  • Comprobador de contraste de color
  • www.checkmycolours.com
  • contrastrebellion.com
  • Analizador de contraste de color Chrome Extension
  • Color Blind Web Page Filer
  • Sim Daltonismo (Color Blindness Simulator OSX)

Conclusión

Ser consciente de que hay un problema es la mitad de la batalla. Ahora debe tener un punto de partida sólido para comprender cómo puede brindar a los usuarios con discapacidades visuales una mejor experiencia.