Repenser le redimensionnement du texte sur le web

Les efforts d'Airbnb pour améliorer l'accessibilité web se sont concentrés sur la garantie que le texte restait lisible même lorsque agrandi de 200% (Agrandir le texte). Le zoom du navigateur, efficace sur ordinateur de bureau, s'est avéré plus difficile sur les appareils mobiles en raison de la taille limitée de la zone de visualisation. Airbnb a donc choisi la mise à l'échelle des polices, qui ajuste la taille du texte indépendamment du zoom global de la page. Pour soutenir la mise à l'échelle des polices, Airbnb a adopté les unités rem, qui s'ajustent proportionnellement à la taille de la police en fonction de l'élément racine. Cette approche a permis une mise à l'échelle du texte cohérente sans affecter les autres éléments de mise en page. Pour faciliter la transition vers les unités rem, Airbnb a automatisé le processus de conversion et a fourni des outils aux designers pour simuler la mise à l'échelle des polices pendant la phase de conception. Gérer la conversion sur deux systèmes CSS-in-JS, React-with-Styles et Linaria, a présenté des défis supplémentaires. Airbnb a exploité le support des propriétés personnalisées de Linaria et les plugins post-CSS pour convertir la plupart des propriétés liées aux polices. Un mécanisme d'échappement a été mis en place pour permettre aux développeurs d'utiliser des unités px lorsque cela était nécessaire. La mise en œuvre de ces améliorations d'accessibilité a significativement réduit le nombre de problèmes signalés pour Agrandir le texte et a amélioré l'expérience utilisateur pour les personnes ayant des déficiences visuelles. En mettant l'accent sur les besoins des utilisateurs et en adoptant les meilleures pratiques, Airbnb a démontré son engagement en faveur d'un design web inclusif.