Wróć do wszystkich kryteriów

1.4.12 Odstępy w tekście (ang.) Text Spacing

Specjalizacje:

  • Content Creator
  • Designer
  • Deweloper

Elementy:

  • Tekst i treść

Poziomy:

  • AA

Spis treści

    Istota i cel kryterium

    Intencją tego kryterium jest zapewnienie, że użytkownik może zwiększyć odstępy w tekście (np. odstępy między wierszami, słowami, literami) za pomocą niestandardowych stylów lub rozszerzeń przeglądarki bez utraty treści, funkcjonalności czy czytelności.

    To kryterium chroni przed projektami, które łamią się lub ukrywają tekst, gdy użytkownik próbuje zastosować swoje preferowane ustawienia stylu, aby ułatwić sobie czytanie.

    Definicja w j. angielskim

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

    Definicja w j. polskim

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

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

    • Osoby słabowidzące: Większa wysokość linii pomaga w śledzeniu tekstu i zapobiega gubieniu wierszy.
    • Osoby z dysleksją: Zwiększenie dystansu między literami i wyrazami redukuje efekt „stłoczenia” tekstu, co przyspiesza czytanie.
    • Osoby z zaburzeniami poznawczymi: Odpowiednie odstępy pomagają w szybszym rozróżnianiu bloków treści i sekcji.

    Zasady wdrażania i wymagania techniczne

    Strona musi zachować pełną funkcjonalność (brak ucinania treści, brak nakładania się elementów), gdy użytkownik ustawi następujące parametry:

    • Wysokość linii (line-height): co najmniej 1,5-krotność rozmiaru czcionki.
    • Odstęp pod akapitem: co najmniej 2-krotność rozmiaru czcionki.
    • Odstępy między literami (letter-spacing): co najmniej 0,12-krotność rozmiaru czcionki.
    • Odstępy między wyrazami (word-spacing): co najmniej 0,16-krotność rozmiaru czcionki.

    Ważne: Jeśli dany język lub skrypt nie korzysta z którejś z tych właściwości (np. brak spacji między wyrazami w języku japońskim), wymaganie to nie ma zastosowania do tej konkretnej właściwości.

    Wyjątki i sytuacje szczególne

    Kryterium dotyczy tekstu renderowanego za pomocą języków znaczników (np. HTML/CSS). Nie dotyczy ono:

    • Obrazów tekstu: Tekst w formacie graficznym (np. JPG, PNG).
    • Tekstu wewnątrz elementu <canvas>: Jest on traktowany jako obraz tekstu.
    • Napisów wideo: Jeśli są wtopione w klatki filmu.
    • Plików PDF
    • Wielokropków ((ang.) ellipses): Dopuszczalne jest użycie wielokropka w miejscach o ograniczonej przestrzeni (np. nawigacja, nagłówki tabel), pod warunkiem, że pełna treść jest dostępna po najechaniu myszą, ustawieniu fokusu lub kliknięciu w link.

    Przykłady implementacji

    Najczęstsze błędy

    • F104: Do niedopełnienia wymagań standardu i wystąpienia błędu F104 dochodzi w następujących sytuacjach:
      • Pionowego ucinania tekstu: Gdy nagłówek ma stałą wysokość i po zwiększeniu interlinii dolna część liter staje się niewidoczna.
      • Poziomego ucinania tekstu: Gdy kontenery (np. kafelki) mają sztywną szerokość, a tekst wychodzi poza ich krawędź i znika.
      • Nakładania się tekstu: Gdy powiększony tekst z jednego akapitu zaczyna zasłaniać treść znajdującą się poniżej lub obok.
      • Braku zawijania tekstu: Jeśli kontenery blokują naturalne zawijanie wierszy.

    Najlepsze praktyki

    • Zawsze projektuj z marginesem błędu („miejscem na oddech”) wokół interaktywnych komponentów, takich jak formularze czy menu.
    • Stosuj jednostki względne (em, rem, %) dla interlinii i marginesów.
    • Używaj elastycznych układów (Flexbox, Grid), które adaptują się do różnej objętości treści.
    • Unikaj właściwości height o stałych wartościach dla bloków z tekstem – używaj min-height.
    • Unikaj overflow: hidden, jeśli może to spowodować utratę dostępu do treści.

    Metody testowania

    • Narzędzie deweloperskie ((ang.) Developer Tools): Ręcznie zmień w inspektorze wartości line-height, letter-spacing oraz margin-bottom na te wymagane przez standard i sprawdź, czy treść nie wychodzi poza ramy i czy nie nakłada się na inne elementy.
    • Dedykowany (ang.) Bookmarklet (Dylan Barrell Text Spacing Bookmarklet): Uruchom skryptozakładkę ze strony autora na testowanej witrynie. Narzędzie automatycznie wstrzyknie do kodu graniczne wartości stylów WCAG, co pozwala błyskawicznie wykryć błędy obcięcia lub nałożenia się tekstu bez ręcznej edycji kodu.
    • Weryfikacja obsługi wielokropków ((ang.) Ellipses): Jeśli po zwiększeniu odstępów tekst w kontenerach zamienił się w wielokropek, zweryfikuj manualnie za pomocą myszy oraz klawiatury, czy ukryta treść jest dostępna. Sprawdź, czy pojawia się w dymku podpowiedzi (tooltip) lub czy element jest linkiem prowadzącym do pełnego tekstu.
    • Testowanie manualne: Wykorzystaj rozszerzenia przeglądarki (np. (ang.) Stylus) do wymuszenia stylów zgodnych z wytyczną i sprawdź, czy nawigacja po stronie nadal jest możliwa, a wszystkie funkcje przycisków działają.

    Sprawdź swoją wiedzę

    W linku poniżej znajduje się 5 komponentów. Twoim zadaniem jest sprawdzenie, czy zachowują one czytelność po zastosowaniu wymogów WCAG 1.4.11 dotyczących odstępów.

    Notatka: Zanim zajrzysz do rozwiązania, uruchom wybrane narzędzia testowe i zapisz swoje wnioski na kartce.
    Proponowane narzędzia: (ang.) Text Spacing Bookmarklet, Narzędzie deweloperskie ((ang.) Developer Tools)

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

    #1 DOBRZE

    Dlaczego: Kontener wiadomości nie ma sztywnej wysokości (height). Dzięki temu, gdy tekst „puchnie” (zwiększa się interlinia), pudełko automatycznie się powiększa, zachowując całą treść.

    #2 DOBRZE


    Dlaczego:     Menu pozwala na zawijanie elementów (flex-wrap: wrap). Gdy słowa stają się szersze (letter-spacing), elementy po prostu przechodzą do nowej linii, zamiast wychodzić poza ekran.

    #3 BŁĄD

    Problem: Karta ma sztywną wysokość (height: 120px) i ukrywa nadmiar (overflow: hidden).
    Dlaczego: Po zwiększeniu odstępów tekst zajmuje więcej miejsca niż 120px, przez co jego dolna część (opis stanowiska) zostaje ucięta i staje się nieczytelna.
    Naprawa: Użyć min-height zamiast height.

    #4 BŁĄD

    Problem: Etykiety mają sztywną szerokość (width: 115px).
    Dlaczego: Zwiększenie odstępów między literami sprawia, że słowa „Zatwierdzony” i „W akceptacji” przestają się mieścić w 115px i są ucinane.
    Naprawa: Usunąć sztywną szerokość, pozwolić na width: auto lub min-width.

    #5 DOBRZE

    Dlaczego: Linki są ułożone w pionowej kolumnie bez sztywnych ograniczeń wysokości. Każdy element ma swobodę rozszerzania się w pionie i poziomie bez nakładania się na sąsiadów.

    Źródła

    Dodatkowe linki

    Wróć do wszystkich kryteriów