Hoe Airbnb tegemoetkomt aan visueel gehandicapte gebruikers door de grootte van toegankelijke tekst te veranderen

Technologieblog van Airbnb Onlangs legde ik uit hoe Airbnb de toegankelijkheid verbetert voor gebruikers met zichtproblemen. Door onze richtlijnen voor tekstgrootte zorgvuldig te implementeren, behoudt Airbnb een goede webinhoud, functionaliteit en gebruikerservaring, zelfs als de lettergrootte verdubbelt.

de Richtlijnen voor toegankelijkheid van webinhoud Het is een reeks normen en aanbevelingen om webinhoud toegankelijker te maken voor personen met een handicap. Milde visuele beperkingen komen vrij vaak voor. De CDC schat dat de prevalentie van dit probleem in Amerika drie op de vijf bedraagt. Bovendien hebben, zoals verschillende Reddit-gebruikers hebben vermeld, niet alleen visueel gehandicapte gebruikers toegang tot de mogelijkheden voor het wijzigen van de tekstgrootte in hun browsers (of website, indien beschikbaar):

Iedereen met een visuele beperking heeft waarschijnlijk een optie voor ‘grote lettergrootte’ in zijn browser. [lightmatter501]En ja, mensen meten de lettergrootte met behulp van toetsenbord- of muisknoppen. Vooral vanwege de bereikbaarheid. [throwtheamiibosaway]Voor sommige pagina's geef ik de browser weer met een zoomfactor van 110% of 125%, aangezien mijn scherm 3440 x 1440 is en soms het lettertype te klein is om te lezen. Ik denk dat dit nog steeds als toegankelijkheid wordt beschouwd. [Reddit user]Dit doe ik alleen als ik even achterover in mijn stoel wil liggen, of als ik iemand iets wil laten zien, of als ik mijn scherm deel op Zoom. [superluminary]Ik wijzig de minimale lettergrootte omdat ik maar één website wil bezoeken. Maar ik ben nog jong en ik heb nog goede ogen. [lontrachen]

de WCAG 1.4.4 Tekstgrootte wijzigen (niveau AA) De richtlijn vereist een uitzondering Onderschriften En Tekstafbeeldingen, tekst Het formaat kan zonder hulp tot 200 procent worden aangepast zonder dat de inhoud of functionaliteit verloren gaat. In deze Airbnb-blogpost wordt uitgelegd hoe je lijnvergroting kunt gebruiken als aanvulling op zoomvergroting. Het wijzigen van de lettergrootte houdt verband met de mogelijkheid om de lettergrootte van tekst te vergroten of verkleinen Zonder noodzakelijkerwijs de niet-tekstuele elementen op de pagina te beïnvloeden. Aan de andere kant resulteert het gebruik van de zoommogelijkheden van de browser erin dat de grootte van alle webinhoud proportioneel wordt aangepast, wat voor sommige gebruikers kan resulteren in een suboptimale ervaring.

Het basisidee bestaat uit gebruiken em En rem CSS-modules in plaats daarvan px eenheden. px De eenheden staan ​​vast en variëren niet afhankelijk van de lettergrootte die de gebruiker verkiest. rem Eenheden hebben daarentegen betrekking op de lettergrootte van het hoofdelement. Het standaard rootelement is 16px In veel browsers dus 1rem Vaak gelijk 16px. Pas de lettergroottes aan met rem Modules zijn een goed idee omdat ze zijn ontworpen om zich aan te passen aan de browservoorkeuren van de gebruiker. em Het is ook een relatieve meeteenheid, anders dan… rem Heeft betrekking op de lettergrootte van het bovenliggende element of de lettergrootte van het bovenliggende element dat het dichtst bij een opgegeven lettergrootte ligt.

In dit blogartikel wordt uitgelegd:

Kies tussen em En rem Eenheden voldoen vaak niet aan het niveau van controle en voorspelbaarheid dat nodig is om de lettergrootte te wijzigen. terwijl em Er kunnen eenheden worden gebruikt. Deze kunnen resulteren in trapsgewijze veranderingen in de lettergrootte die moeilijk te beheren kunnen zijn, vooral in complexe lay-outs. in tegenstelling tot, rem Eenheden bieden een meer consistente en voorspelbare benadering van het schalen van lettertypen, omdat ze altijd relatief zijn ten opzichte van de lettergrootte van het hoofdelement. […]

In het geval van Airbnb besloot het team prioriteit te geven aan het gebruik van rem-eenheden specifiek voor het meten van lettertypen, in plaats van alle elementen proportioneel te meten.

Daarnaast gaat het blogartikel gedetailleerd in op het verspreiden van de overeenkomstige stijlopties over de hele codebase (die twee verschillende CSS-in-JS-systemen gebruikt), het garanderen dat ontwerpers en ontwikkelaars de nieuwe aanpak omarmen en het oplossen van platformonafhankelijke problemen (bijv. Safari onderweg). Airbnb beschouwde het experiment als een succes:

De keuze om de lettergrootte te wijzigen als strategie voor producttoegankelijkheid heeft een reeks belangrijke voordelen opgeleverd die de algehele gebruikerservaring van ons platform aanzienlijk hebben verbeterd. Door deze wijziging door middel van automatisering om te converteren naar eenheden in natura werd deze overgang eenvoudiger. Als we kijken naar het totale aantal problemen dat we tegenkomen na het implementeren van deze wijzigingen op de hele site, is ruim 80% van onze problemen met de tekstgrootte opgelost. Bovendien hebben we sindsdien minder nieuwe problemen gezien.

Ontwikkelaars wordt verzocht het volledige artikel te raadplegen en de gedetailleerde technische uitleg en demo's te bekijken.