1.4.4 Zmiana rozmiaru tekstu

Krótko

Użytkownik powinien móc powiększyć tekst do 200% w przeglądarce i nadal przeczytać treść oraz wykonać wszystkie działania na stronie.

Problem w praktyce

Strona wygląda dobrze przy domyślnym rozmiarze tekstu, ale po powiększeniu tekstu menu wypada poza ekran, przycisk traci część etykiety, a komunikat błędu nachodzi na pole formularza. Użytkownik widzi większe litery, ale traci dostęp do treści albo funkcji.

1.4.4 nie wymaga, żeby cały układ pozostał identyczny. Układ może się rozszerzyć, zawinąć, wydłużyć albo wymagać przewijania. Ważne jest to, żeby po powiększeniu do 200% treść i funkcje nadal były dostępne.

To kryterium nie jest tym samym co 1.4.10 Dopasowanie do ekranu ani 1.4.12 Odstępy w tekście. Tutaj sprawdzasz przede wszystkim powiększanie tekstu do 200% bez utraty treści i funkcjonalności.

Kogo to dotyczy

• Osób słabowidzących, które zwiększają rozmiar tekstu lub używają zoomu w przeglądarce.
• Osób starszych, dla których domyślny tekst jest zbyt mały.
• Osób korzystających z małych ekranów, dużych ustawień tekstu albo niestandardowych preferencji systemowych.
• Osób z trudnościami poznawczymi, które czytają wygodniej przy większym tekście i większej ilości światła między elementami.
• Wszystkich użytkowników w długich formularzach, tabelach, menu i panelach, gdzie ucięcie etykiety może zablokować zadanie.

Dobry przykład

• Tekst jest ustawiany w jednostkach względnych, na przykład `rem`, `em` albo `%`.
• Kontenery z tekstem nie mają sztywnej wysokości, która ucina treść.
• Przyciski i linki mogą rosnąć wraz z tekstem.
• Menu zawija się do kolejnego wiersza albo zmienia układ bez ukrywania pozycji.
• Karty, komunikaty i pola formularza wydłużają się, gdy tekst zajmuje więcej miejsca.
• Po powiększeniu do 200% użytkownik nadal może przeczytać etykiety, kliknąć przyciski i przejść przez proces.

Zły przykład

• Tekst po powiększeniu nachodzi na inne elementy.
• Przycisk ma stałą wysokość i ucina etykietę, na przykład „Zapisz zm...”.
• Menu ma jedną sztywną linię i po powiększeniu część linków znika.
• Komunikat błędu zasłania pole formularza.
• Tekst jest ustawiany tak, że nie reaguje sensownie na zmianę rozmiaru tekstu.
• Kontener ma `overflow: hidden`, więc powiększony tekst zostaje obcięty.

Przykłady kodu

.notice {
  height: 48px;
  overflow: hidden;
  font-size: 14px;
}

.notice__action {
  height: 32px;
  line-height: 32px;
}

.notice {
  font-size: 1rem;
  line-height: 1.5;
  min-height: 3rem;
  padding: 1rem;
}

.notice__action {
  font-size: 1rem;
  min-height: 2.75rem;
  padding: 0.75em 1em;
  white-space: normal;
}

.menu {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.menu a {
  font-size: 1rem;
  line-height: 1.4;
  padding: 0.6em 0.8em;
}

.hero-title {
  font-size: 3vw;
}

.hero-copy {
  font-size: 1.2vw;
}

Przykład graficzny

Jak sprawdzić

1. Otwórz stronę w przeglądarce i powiększ tekst lub stronę do 200%.
2. Przejdź kluczowe widoki: nagłówek, menu, formularze, tabele, karty, modale, komunikaty błędów i stopkę.
3. Sprawdź, czy tekst nie jest ucięty, zasłonięty ani schowany poza kontenerem.
4. Sprawdź, czy przyciski, linki, pola formularzy i menu nadal są dostępne i czytelne.
5. Sprawdź, czy można ukończyć typowe zadania, na przykład wysłać formularz, przejść dalej lub otworzyć szczegóły.
6. Sprawdź CSS pod kątem `height`, `max-height`, `overflow: hidden`, małych kontenerów w pikselach i tekstu opartego wyłącznie o viewport.
7. Nie traktuj samego poziomego przewijania jako automatycznego błędu 1.4.4. Pytanie brzmi, czy przy 200% znika treść lub funkcja.

Co sprawdzi automat, a czego nie

Automat może wykryć

• część sztywnych wysokości i szerokości w CSS,
• część przypadków `overflow: hidden`,
• tekst ustawiony w ryzykownych jednostkach albo bardzo małych wartościach,
• część elementów, które po zmianie rozmiaru nachodzą na siebie w prostych testach wizualnych.

Automat nie oceni pewnie

• czy użytkownik nadal może wykonać cały proces po powiększeniu tekstu,
• czy ucięta etykieta zmienia znaczenie przycisku,
• czy menu, tabela albo formularz są nadal praktycznie używalne,
• czy problem dotyczy 1.4.4, czy raczej reflow, odstępów w tekście albo innego kryterium,
• czy dany wyjątek, na przykład obraz tekstu albo napisy, faktycznie ma zastosowanie.

Typowe błędy

• Ustawianie tekstu i kontenerów w sztywnych pikselach bez testu przy 200%.
• Używanie `height` zamiast `min-height` w elementach z dłuższym tekstem.
• Dodawanie `overflow: hidden` do kart, alertów, przycisków albo nagłówka strony.
• Menu, które musi zmieścić się w jednej linii i nie może się zawinąć.
• Przyciski z długimi etykietami, które nie pozwalają na zawijanie tekstu.
• Pola formularza, których tekst lub wpisywana wartość nie zwiększają się razem z resztą strony.
• Testowanie tylko domyślnego rozmiaru tekstu i dużego monitora.

Powiązane kryteria

• 1.4.3 Kontrast minimum: gdy większy tekst nadal musi mieć odpowiedni kontrast z tłem.
• 1.4.11 Kontrast elementów nietekstowych: gdy po powiększeniu trzeba nadal widzieć obramowania, ikony i stany kontrolek.
• 1.4.13 Treść po najechaniu lub fokusie: gdy powiększony tekst wpływa na dymki, podpowiedzi i treści pojawiające się po fokusie.

Źródła

• WCAG 2.2: 1.4.4 Resize Text (otwiera się w nowym oknie)
• Understanding WCAG 1.4.4: Resize Text (otwiera się w nowym oknie)
• How to Meet WCAG 1.4.4: Resize Text (otwiera się w nowym oknie)
• G142: Using a technology that has commonly-available user agents that support zoom (otwiera się w nowym oknie)
• C28: Specifying the size of text containers using em units (otwiera się w nowym oknie)
• G179: Ensuring that there is no loss of content or functionality when the text resizes (otwiera się w nowym oknie)
• F69: Failure when resizing text up to 200 percent causes clipping, truncation or obscuring (otwiera się w nowym oknie)
• F80: Failure when text-based form controls do not resize with text (otwiera się w nowym oknie)
• F94: Failure due to incorrect use of viewport units to resize text (otwiera się w nowym oknie)