Blog de tecnología de Airbnb Hace poco os expliqué cómo Airbnb está mejorando la accesibilidad para usuarios con dificultades visuales. Al implementar cuidadosamente nuestras pautas de tamaño de texto, Airbnb mantiene un buen contenido web, funcionalidad y experiencia de usuario incluso si se duplica el tamaño de fuente del texto.
el Pautas de accesibilidad al contenido web Es un conjunto de estándares y recomendaciones para hacer que el contenido web sea más accesible para personas con discapacidades. Las discapacidades visuales leves son bastante comunes. Los CDC estiman que la prevalencia de este problema es de 3 de cada 5 en Estados Unidos. Además, como han mencionado varios usuarios de Reddit, no sólo los usuarios con discapacidad visual pueden acceder a las capacidades de cambio de tamaño del texto en sus navegadores (o en su sitio web, cuando estén disponibles):
Cualquier persona con discapacidad visual probablemente tendrá una opción de «tamaño de fuente grande» en su navegador. [lightmatter501]Y sí, la gente mide el tamaño de la fuente usando los botones del teclado o del mouse. Principalmente por la accesibilidad. [throwtheamiibosaway]Para algunas páginas muestro el navegador con un zoom de 110% o 125% ya que mi pantalla es de 3440 x 1440 y, a veces, la fuente es demasiado pequeña para leerla. Creo que esto todavía se considera accesibilidad. [Reddit user]Solo hago esto si quiero recostarme en mi silla por un rato, o si le estoy mostrando algo a alguien, o si estoy compartiendo mi pantalla en Zoom. [superluminary]Cambio el tamaño mínimo de fuente porque solo quiero visitar un sitio web. Pero todavía soy joven y todavía tengo buenos ojos. [lontrachen]
el WCAG 1.4.4 Cambiar tamaño de texto (Nivel AA) La directriz requiere una excepción. Subtítulos Y Imágenes de texto, texto Se puede cambiar su tamaño sin asistencia hasta en un 200 por ciento sin perder contenido o funcionalidad. Esta publicación del blog de Airbnb explica cómo utilizar la escala de línea como complemento a la escala de zoom. Cambiar el tamaño de fuente está asociado con la capacidad de aumentar o disminuir el tamaño de fuente del texto. Sin afectar necesariamente a los elementos que no son de texto en la página.. Por otro lado, el uso de las capacidades de zoom del navegador hace que todo el contenido web cambie de tamaño proporcionalmente, lo que puede resultar en una experiencia subóptima para algunos usuarios.
La idea básica consiste en utilizar em
Y rem
Módulos CSS en su lugar px
unidades. px
Las unidades son fijas y no varían según el tamaño de fuente que prefiera el usuario. rem
Por otro lado, las unidades se relacionan con el tamaño de fuente del elemento raíz. El elemento raíz predeterminado es 16px
En muchos navegadores, entonces 1rem
A menudo igual 16px
. Ajuste los tamaños de fuente usando rem
Los módulos son una buena idea porque están diseñados para adaptarse a las preferencias del navegador del usuario. em
También es una unidad de medida relativa, diferente de… rem
Se relaciona con el tamaño de fuente del elemento principal o el tamaño de fuente del elemento principal más cercano a un tamaño de fuente especificado.
Este artículo de blog explica:
Escoger entre
em
Yrem
Las unidades a menudo no alcanzan el nivel de control y previsibilidad necesarios para cambiar el tamaño de fuente. mientrasem
Se pueden utilizar unidades, lo que puede dar lugar a cambios en cascada en el tamaño de fuente que pueden resultar difíciles de gestionar, especialmente en diseños complejos. a diferencia de,rem
Las unidades proporcionan un enfoque más consistente y predecible para la escala de fuentes, ya que siempre son relativas al tamaño de fuente del elemento raíz. […]
En el caso de Airbnb, el equipo decidió priorizar el uso de unidades rem específicamente para medir fuentes, en lugar de medir todos los elementos proporcionalmente.
Además, el artículo del blog detalla cómo propagar las opciones de estilo correspondientes en todo el código base (que utiliza dos sistemas CSS-in-JS diferentes), garantizar que los diseñadores y desarrolladores adopten el nuevo enfoque y resolver problemas multiplataforma (por ejemplo, Safari en el móvil). Airbnb consideró el experimento un éxito:
La elección de cambiar el tamaño de fuente como estrategia de accesibilidad del producto ha brindado una variedad de beneficios importantes que han mejorado significativamente la experiencia general del usuario de nuestra plataforma. Hacer este cambio utilizando la automatización para convertir a unidades en especie facilitó esta transición. Al observar la cantidad total de problemas que encontramos después de implementar estos cambios en todo el sitio, más del 80% de nuestros problemas de tamaño de texto se han resuelto. Es más, hemos visto menos problemas nuevos desde entonces.
Se invita a los desarrolladores a consultar el artículo completo y revisar las explicaciones técnicas detalladas y las demostraciones proporcionadas.
«Adicto a la música. Gurú del café. Especialista en zombis. Defensor de las redes sociales. Introvertido. Aficionado extremo a la comida. Evangelista del alcohol».