Wróć do wszystkich kryteriów

1.4.4 Zmiana rozmiaru tekstu (ang.) Resize text

Specjalizacje:

  • Content Creator
  • Designer
  • Deweloper

Elementy:

  • Cała strona / widok
  • Tekst i treść

Poziomy:

  • AA

Spis treści

    Istota i cel kryterium

    Kryterium WCAG 1.4.4 stanowi, że tekst musi być skalowalny. Dzięki temu osoby z wadami wzroku mogą powiększyć czcionkę do 200% bez utraty informacji ani możliwości interakcji ze stroną.

    Kwestią priorytetową jest umożliwienie użytkownikom powiększenie treści tekstowej na stronie do 200% jej pierwotnego rozmiaru za pomocą standardowych mechanizmów przeglądarki (np. skróty “Ctrl++” lub ustawienia czcionki) bez konieczności używania paska przewijania w poziomie (scrollowania w bok) i bez utraty treści lub funkcjonalności.

    Definicja w j. angielskim

    Definicja dostępna pod adresem (link otworzy się w nowej karcie):
    https://www.w3.org/WAI/WCAG22/quickref/#resize-text

    Definicja w j. polskim

    Definicja dostępna pod adresem (link otworzy się w nowej karcie):
    https://www.w3.org/Translations/WCAG21-pl/#zmiana-rozmiaru-tekstu

    Słownik pojęć

    Skalowalność tekstu
    –

    Zdolność czcionek do zmiany rozmiaru przy zachowaniu czytelności i integralności z otaczającym je układem graficznym.

    Jednostki względne
    –

    Miary (takie jak rem, em, %), które nie mają stałej wartości w pikselach, lecz odnoszą się do rozmiaru bazowego zdefiniowanego w przeglądarce lub elemencie nadrzędnym. Jednostki względne są dobrą praktyką, aby spełnić kryterium 1.4.4.

    Wpływ na dostępność (Kogo wspierasz?)

    • Osoby słabowidzące: Dla nich powiększenie tekstu to często jedyny sposób na samodzielne odczytanie treści bez użycia specjalistycznego oprogramowania powiększającego.
    • Seniorzy: Naturalne pogarszanie się wzroku z wiekiem sprawia, że większa czcionka znacząco poprawia komfort czytania i redukuje zmęczenie oczu.
    • Osoby z dysleksją: Większe litery w połączeniu z odpowiednimi odstępami ułatwiają dekodowanie tekstu i poprawiają jego zrozumienie.
    • Osoby z zaburzeniami poznawczymi: Klarowny i duży tekst pozwala na łatwiejsze skupienie uwagi i przetwarzanie informacji.

    Zasady wdrażania i wymagania techniczne

    Aby skutecznie spełnić to kryterium, musisz zadbać o techniczną elastyczność swojej strony:

    • Stosuj jednostki względne: Zrezygnuj z pikseli (px) na rzecz jednostek rem (odnoszących się do elementu głównego) lub em (odnoszących się do rodzica). Dzięki temu tekst zareaguje na zmianę ustawień w przeglądarce użytkownika.
    • Projektuj elastyczne kontenery: Unikaj definiowania sztywnych wysokości (height) i szerokości (width) dla bloków zawierających tekst. Stosuj właściwości takie jak max-width, aby pozwolić elementom na swobodne rozszerzanie się.
    • Zarządzaj widokiem ((ang.) viewport): Upewnij się, że Twój meta tag viewport nie blokuje skalowania. Prawidłowy zapis to: <meta name="viewport" content="width=device-width, initial-scale=1.0">.
    • Zapewnij responsywność: Korzystaj z narzędzi takich jak Flexbox lub CSS Grid, aby układ strony naturalnie dostosowywał się do zwiększonej objętości tekstu. Zapobiegniesz w ten sposób przycinaniu ((ang.) clipping) tekstu.
    • Skalowanie krokowe: Strona musi działać poprawnie nie tylko przy 200%, ale również na każdym etapie pośrednim (np. 120%, 150%).
    • Obsługa formularzy: Pola/kontrolki tekstowe w formularzach muszą skalować się tak samo jak zwykły tekst ((ang.) Failure F80).
    • Unikaj tekstów na obrazkach: Tekst osadzony w grafice traci na jakości przy powiększaniu i nie może zostać przeskalowany przez ustawienia systemowe czy ustawienia czcionki w przeglądarce.

    Wyjątki i sytuacje szczególne

    • Napisy ((ang.) Captions): Kryterium nie dotyczy napisów zsynchronizowanych w multimediach.
    • Obrazy tekstu: Wyłączone z tego wymogu (choć ich unikanie jest zalecane przez SC 1.4.5).
    • Specyficzne komponenty UI: W aplikacjach takich jak arkusze kalkulacyjne lub listy mailowe dopuszczalne jest obcinanie tekstu (np. w komórkach), pod warunkiem, że pełna treść jest dostępna po ustawieniu fokusu lub aktywacji elementu.

    Przykłady implementacji

    Najczęstsze błędy

    • F69: Powiększenie do 200% powoduje, że tekst lub kontrolki są ucinane ((ang.) clipped) lub zasłaniane przez inne elementy.
    • F80: Formularze i ich etykiety nie powiększają się wraz z tekstem strony.
    • F94: Użycie jednostek vw lub vh do definiowania rozmiaru czcionki (font-size), co uniemożliwia jej powiększenie przez ustawienia tekstowe przeglądarki.
    • Sztywne wysokości (height): Zastosowanie stałej wysokości w pikselach dla kontenera z tekstem, co przy powiększeniu czcionki powoduje jej „wypłynięcie” poza obramowanie lub ucięcie.

    Najlepsze praktyki

    • Cykliczne testy: Weryfikuj układ strony przy powiększeniu do 400% (przygotowanie pod kryterium 1.4.10 Zawijanie treści ((ang.) Reflow)).
    • Płynny układ ((ang.) Liquid layout): Projektuj strony tak, aby zawartość płynnie wypełniała dostępne miejsce, co minimalizuje ryzyko błędów przy skalowaniu.

    Metody testowania

    Zweryfikuj swoją pracę za pomocą poniższych kroków:

    • Zmiana wielkości czcionki w przeglądarce: Użyj zmiany podstawowej wielkości czcionki, aby powiększyć tekst do 200%. Sprawdź, czy treść nie nachodzi na siebie i czy nie pojawił się poziomy pasek przewijania przy układzie jednokolumnowym.
    • Powiększenie w przeglądarce: Użyj wbudowanej funkcji powiększenia (Ctrl/Cmd + '+’) do 200% i upewnij się, że żadna funkcja nie przestała działać przez zmianę układu.
    • Narzędzie deweloperskie (ang.) Developer Tools: Przejrzyj style CSS, aby upewnić się, że rozmiary czcionek i kontenery nie mają przypisanych stałych wartości w pikselach (px). Sprawdź w sekcji <head>, czy meta tag viewport nie zawiera restrykcyjnych atrybutów blokujących skalowanie.

    Sprawdź swoją wiedzę

    W linku poniżej znajduje się 5 przykładów komponentów interfejsu. Twoim zadaniem jest ocena, czy ich treść pozostanie czytelna i dostępna po powiększeniu tekstu o 200%.

    Notatka: Zanim zajrzysz do rozwiązania, uruchom wybrane narzędzia testowe i zapisz swoje wnioski na kartce.
    Proponowane narzędzia: Zmiana wielkości czcionki w przeglądarce, Narzędzie deweloperskie (ang.) Developer Tools, Powiększenie w przeglądarce (Ctrl++)

    Link: https://pdc.ambiscale.com/training/wcag-1-4-4/

    #1 BŁĄD

    Problem: Tekst zostaje ucięty na dole karty.
    Dlaczego: Użyto sztywnej wysokości height: 120px oraz overflow: hidden. Po powiększeniu tekst zajmuje więcej miejsca i nie mieści się w pudełku.
    Naprawa: Zamiast height użyj min-height. Usuń overflow: hidden jeśli nie jest absolutnie konieczne.

    #2 BŁĄD


    Problem:     Tytuł zamienia się w „…” i nie można go przeczytać.
    Dlaczego: Zastosowano white-space: nowrap (zakaz łamania linii) oraz text-overflow: ellipsis. Przy dużym powiększeniu widać tylko początek zdania.
    Naprawa: Pozwól tekstowi się zawijać (domyślne zachowanie lub word-wrap: break-word).

    #3 DOBRZE

    Dlaczego: Kontener powiększa się wraz z zawartością. Użyto min-height, co gwarantuje minimalny rozmiar, ale pozwala na ekspansję. Żadna treść nie jest ukryta.

    #4 BŁĄD

    Problem: Tekst z górnego pudełka wylewa się i zasłania tekst w dolnym pudełku.
    Dlaczego: Elementy są pozycjonowane absolutnie (position: absolute) ze sztywnymi koordynatami (top). Nie „widzą” się nawzajem, więc gdy jeden rośnie, wchodzi na drugi.
    Naprawa: Używaj standardowego przepływu dokumentu (block layout, Flexbox, Grid), gdzie elementy naturalnie odpychają się od siebie.

    #5 BŁĄD

    Problem: Tekst w przycisku jest ucięty (góra/dół lub boki).
    Dlaczego: Przycisk ma sztywną wysokość (height: 40px) dopasowaną do domyślnego tekstu. Po powiększeniu czcionki, tekst jest większy niż przycisk.
    Naprawa: Unikaj sztywnych wysokości w przyciskach. Użyj padding (np. padding: 10px 20px), aby wielkość przycisku wynikała z wielkości tekstu.

    Źródła

    Dodatkowe linki

    Wróć do wszystkich kryteriów