Jak Airbnb dba o użytkowników niedowidzących, zmieniając rozmiar dostępnego tekstu

Blog technologiczny Airbnb Niedawno wyjaśniłem, jak Airbnb poprawia dostępność dla użytkowników z wadami wzroku. Starannie wdrażając nasze wytyczne dotyczące rozmiaru tekstu, Airbnb utrzymuje dobrą zawartość internetową, funkcjonalność i wygodę użytkownika, nawet w przypadku podwojenia rozmiaru czcionki tekstu.

the Wytyczne dotyczące dostępności treści internetowych Jest to zbiór standardów i zaleceń mających na celu zwiększenie dostępności treści internetowych dla osób niepełnosprawnych. Łagodne zaburzenia widzenia są dość powszechne. CDC szacuje, że częstość występowania tego problemu w Ameryce wynosi 3 na 5. Co więcej, jak wspomniało kilku użytkowników Reddita, nie tylko użytkownicy niedowidzący mogą uzyskać dostęp do funkcji zmiany rozmiaru tekstu w swoich przeglądarkach (lub witrynach internetowych, jeśli są dostępne):

Każdy, kto ma wadę wzroku, prawdopodobnie będzie miał w swojej przeglądarce opcję „dużego rozmiaru czcionki”. [lightmatter501]I tak, ludzie mierzą rozmiar czcionki za pomocą przycisków klawiatury lub myszy. Przede wszystkim ze względu na dostępność. [throwtheamiibosaway]W przypadku niektórych stron przeglądarkę wyświetlam przy powiększeniu 110% lub 125%, ponieważ mój ekran ma rozdzielczość 3440 x 1440, a czasami czcionka jest zbyt mała, aby ją odczytać. Myślę, że nadal uważa się to za dostępność. [Reddit user]Robię to tylko wtedy, gdy chcę na chwilę położyć się na krześle, pokazać coś komuś lub udostępnić ekran na Zoomie. [superluminary]Zmieniam minimalny rozmiar czcionki, ponieważ chcę odwiedzić tylko jedną witrynę. Ale wciąż jestem młody i nadal mam dobre oczy. [lontrachen]

the WCAG 1.4.4 Zmień rozmiar tekstu (poziom AA) Wytyczne wymagają wyjątku Napisy I Obrazy tekstowe, tekst Rozmiar można zmieniać bez pomocy nawet o 200 procent, bez utraty zawartości i funkcjonalności. W tym poście na blogu Airbnb wyjaśniono, jak używać skalowania linii jako uzupełnienia skalowania powiększenia. Zmiana rozmiaru czcionki wiąże się z możliwością zwiększenia lub zmniejszenia rozmiaru czcionki tekstu Bez konieczności wpływania na elementy nietekstowe na stronie. Z drugiej strony korzystanie z funkcji powiększania przeglądarki powoduje proporcjonalną zmianę rozmiaru całej zawartości internetowej, co może powodować nieoptymalne wrażenia dla niektórych użytkowników.

Podstawowa idea polega na używaniu em I rem Zamiast tego moduły CSS px jednostki. px Jednostki są stałe i nie różnią się w zależności od preferowanego przez użytkownika rozmiaru czcionki. rem Jednostki natomiast odnoszą się do rozmiaru czcionki elementu głównego. Domyślnym elementem głównym jest 16px W wielu przeglądarkach tzw 1rem Często równe 16px. Dostosuj rozmiary czcionek za pomocą rem Moduły są dobrym pomysłem, ponieważ mają za zadanie dostosować się do preferencji przeglądarki użytkownika. em Jest to także względna jednostka miary, różna od… rem Odnosi się do rozmiaru czcionki elementu nadrzędnego lub rozmiaru czcionki najbliższego elementu nadrzędnego względem określonego rozmiaru czcionki.

W tym artykule na blogu wyjaśniono:

Wybrać pomiędzy em I rem Jednostki często nie zapewniają poziomu kontroli i przewidywalności wymaganego do zmiany rozmiaru czcionki. chwila em Można używać jednostek, które mogą powodować kaskadowe zmiany rozmiaru czcionki, którymi może być trudno zarządzać, szczególnie w przypadku złożonych układów. w przeciwieństwie, rem Jednostki zapewniają bardziej spójne i przewidywalne podejście do skalowania czcionek, ponieważ zawsze odnoszą się do rozmiaru czcionki elementu głównego. […]

W przypadku Airbnb zespół zdecydował się nadać priorytet używaniu jednostek rem specjalnie do pomiaru czcionki, zamiast mierzyć wszystkie elementy proporcjonalnie.

Ponadto artykuł na blogu szczegółowo opisuje propagowanie odpowiednich opcji stylizacji w całej bazie kodu (która wykorzystuje dwa różne systemy CSS-in-JS), zapewnia, że ​​projektanci i programiści przyjmą nowe podejście oraz rozwiązuje problemy międzyplatformowe (np. Safari na telefonie komórkowym). Airbnb uznało eksperyment za udany:

Wybór zmiany rozmiaru czcionki w ramach strategii dostępności produktu zapewnił szereg ważnych korzyści, które znacznie poprawiły ogólne wrażenia użytkownika z naszej platformy. Dokonanie tej zmiany za pomocą automatyzacji konwersji na jednostki rzeczowe ułatwiło to przejście. Patrząc na całkowitą liczbę problemów, jakie napotkaliśmy po wdrożeniu tych zmian w całej witrynie, ponad 80% naszych problemów z rozmiarem tekstu zostało rozwiązanych. Co więcej, od tego czasu obserwujemy mniej nowych problemów.

Zachęcamy programistów do zapoznania się z pełnym artykułem i zapoznania się ze szczegółowymi wyjaśnieniami technicznymi oraz dostarczonymi wersjami demonstracyjnymi.