Uwzględniaj skalę tekstu systemu operacyjnego

Przegląd

Użytkownicy z wadami wzroku często konfigurują skalowanie tekstu na poziomie systemu operacyjnego (np. Dynamic Type na iOS lub skalowanie rozmiaru czcionki na Androidzie/ChromeOS). Domyślnie przeglądarki mobilne ignorują te ustawienia ułatwień dostępu na poziomie systemu operacyjnego, aby zapobiec nieprawidłowemu wyświetlaniu starszych witryn o stałej liczbie pikseli.

Zamiast utrzymywać statyczną stronę lub polegać na niestandardowych, niestabilnych obliczeniach układu JavaScript, wybierz skalowanie tekstu w natywnym systemie operacyjnym za pomocą tagu <meta name="text-scale">. Gdy ta opcja jest aktywna, przeglądarka dynamicznie skaluje rozmiar czcionki głównej (1rem), aby dopasować go do preferencji systemu operacyjnego użytkownika, co umożliwia automatyczne i płynne skalowanie wszystkich względnych (rem/em) rozmiarów czcionek, układów i odstępów.

Implementacja

1. Włączanie skalowania tekstu w systemie operacyjnym

Umieść element <meta name="text-scale"> w elemencie <head> dokumentu. Sygnalizuje to obsługującym przeglądarkom, że układ jest nowoczesny, adaptacyjny i bezpieczny do skalowania:

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width" />
  
  <!-- Opt this page into OS-level dynamic type and accessibility text scaling -->
  <meta name="text-scale" content="scale" />
  
  <title>Adaptive Accessibility Layout</title>
</head>

2. Używanie względnej typografii i odstępów

Określaj rozmiary czcionek za pomocą jednostek względnych (rem lub em), a nie stałych pikseli (px). W przypadku wysokości wierszy używaj wartości bez jednostek, aby skalowały się proporcjonalnie do obliczonego rozmiaru czcionki każdego elementu.

Używaj jednostek względnych w przypadku marginesów i dopełnienia, gdy odstępy są powiązane z rozmiarem tekstu lub muszą się dostosowywać do jego skalowania. Odstępy niezależne od tekstu mogą w odpowiednich przypadkach używać stałych jednostek, pod warunkiem że skalowanie nie powoduje przycinania tekstu, nakładania się, utraty treści ani nieużytecznego układu:

body {
  font-family: system-ui, sans-serif;
  /* Inherits the root font-size, which scales automatically with the OS setting */
  line-height: 1.5;      /* Unitless so it scales proportionally with computed font-size */
  padding: 1.5rem;       /* Scales proportionally to prevent dense crowding at larger scales */
}

h1 {
  font-size: 2.25rem;    /* Scales proportionally to the root base */
  margin-bottom: 1rem;
}

Ustaw podstawowy rozmiar tekstu na body tylko wtedy, gdy projekt wymaga rozmiaru innego niż odziedziczony domyślny rozmiar przeglądarki. W przeciwnym razie pozostaw odziedziczony rozmiar. Ustaw rozmiary konkretnych elementów, takich jak nagłówki, za pomocą jednostek względnych, takich jak rem lub em. Używaj rem, aby określić rozmiar względem rozmiaru czcionki głównej, i em, gdy rozmiar powinien zależeć od rozmiaru czcionki elementu nadrzędnego. Nie ustawiaj niestandardowego rozmiaru czcionki w tagu :root ani html.

Płynna typografia

Typografia płynna MOŻE używać jednostek względnych widocznego obszaru, takich jak vw, pod warunkiem że rozmiary czcionek zawierają również komponent względny czcionki, taki jak rem lub em. Więcej informacji o technikach skalowania płynnego, w tym o jednostkach zapytań o kontenery i clamp(), znajdziesz w artykule Skalowanie płynne.

Unikaj określania rozmiaru tekstu wyłącznie za pomocą jednostek widocznego obszaru:

/* ❌ DO NOT DO THIS: The font size does not respond fully to user text scaling */
.heading {
  font-size: 5vw;
}

Zamiast tego połącz wartość względną czcionki ze skalowaniem względnym widocznego obszaru i użyj względnych granic minimalnych i maksymalnych:

.heading {
  font-size: clamp(2rem, 1.25rem + 2vw, 4rem);
}

Sprawdź, czy rozmiar tekstu można zwiększyć do co najmniej 200% domyślnego rozmiaru bez utraty treści lub funkcjonalności. W przypadku typografii płynnej warto pamiętać, że maksymalny rozmiar czcionki nie powinien przekraczać 2,5 razy rozmiaru minimalnego. Przetestuj też zawijanie przy szerokości widocznego obszaru wynoszącej 320 pikseli CSS (co odpowiada powiększeniu o 400% w przypadku widocznego obszaru o szerokości 1280 pikseli CSS). Treści MUSZĄ być dostępne bez przewijania dwuwymiarowego, chyba że jest to konieczne.

3. Używanie skalowalnych elastycznych punktów przerwania

Punkty przerwania w układzie elastycznym NIE MOGĄ zakładać, że tekst pozostanie w domyślnym rozmiarze. Jeśli punkt przerwania ma reagować na dostępną przestrzeń na tekst, preferuj układy oparte na treści, zapytania o kontener lub zapytania o media oparte na em zamiast stałych progów pikseli.

Przetestuj układy elastyczne z włączonym skalowaniem tekstu w systemie operacyjnym i powiększeniem w przeglądarce. Tekst MUSI być czytelny, a treść MUSI być widoczna bez nakładania się, przycinania i przewijania w poziomie.

4. Zapewnianie zawijania treści i elastycznych wysokości

Gdy tekst jest powiększany, elementy wymagają więcej miejsca w pionie i poziomie, aby zapobiec obcinaniu lub nakładaniu się. Aby komponenty były niezawodne, projektuj układy tak, aby rozszerzały się dynamicznie wokół treści, zamiast wymuszać sztywne współrzędne:

• Zezwalanie na powiększanie kontenerów tekstowych: komponenty i kontenery zawierające tekst MUSZĄ mieć możliwość powiększania się, aby pomieścić skalowany tekst. Unikaj stałych wartości height lub block-size oraz restrykcyjnych wartości max-height lub max-block-size, które mogą powodować przycinanie lub przepełnienie. Preferuj rozmiar zależny od treści. Używaj min-height lub min-block-size tylko wtedy, gdy potrzebny jest minimalny rozmiar.
• Zezwalaj na naturalne zawijanie: nie ograniczaj zawijania tekstu w osi inline za pomocą white-space: nowrap w blokach zawierających zdania. Pozwól, aby tekst naturalnie przechodził do nowych wierszy.
• Używaj elastycznych układów Flexbox i Grid (opcjonalny przykład): w przypadku wielokolumnowych galerii kart używaj kolumn z zawijaniem, takich jak repeat(auto-fit, minmax(min(100%, 16rem), 1fr)), aby elementy układały się pionowo, jeśli zostaną przekroczone progi ich względnej szerokości:

/* Card container using min-height to ensure expansion and auto-fit to reflow if needed */
.card {
  padding: 1.5rem;
  border: 1px solid #ccc;
  border-radius: 8px;
  /* Use min-height so the box expands vertically when the font is enlarged */
  min-height: 10rem;
}

5. NIE zastępuj rozmiaru czcionki głównej

Jeśli akceptujesz tę funkcję za pomocą elementu <meta name="text-scale" content="scale">, NIE ustawiaj jawnie elementu głównego font-size w arkuszu stylów. Obejmuje to deklaracje dotyczące :root lub html i dotyczy jednostek bezwzględnych, jednostek względnych i obliczonych wartości.

Na przykład nie zastępuj rozmiaru czcionki głównej stałą wartością:

/* ❌ DO NOT DO THIS: This can prevent the browser from applying text scaling */
html {
  font-size: 16px;
}

Nie łącz opcji <meta name="text-scale" content="scale"> z env(preferred-text-scale), aby ręcznie zastosować skalowanie tekstu systemu operacyjnego. Przeglądarka stosuje skalowanie za pomocą metatagu, więc użycie obu metod może spowodować podwójne skalowanie:

/* ❌ DO NOT DO THIS: The meta opt-in already applies the operating system text scale */
:root {
  font-size: calc(1rem * env(preferred-text-scale));
}

Pozostaw rozmiar czcionki głównej przeglądarce. Przeglądarka automatycznie obsługuje skalę tekstu systemu operacyjnego i stosuje ją do treści o rozmiarze względnym do rozmiaru czcionki głównej.

Strategie zastępcze

W przeglądarkach, które nie obsługują <meta name="text-scale" content="scale">, układ jest odpowiednio upraszczany. Strona będzie wyświetlać układ w standardowym domyślnym rozmiarze czcionki podstawowej przeglądarki (zwykle 16 pikseli), a użytkownik nadal będzie mógł korzystać ze standardowych opcji ręcznego powiększania strony lub powiększania przez rozciąganie.