WCAG 1.4.12: Odstępy w tekście

Co oznacza ta zasada

WCAG 1.4.12 Text Spacing należy do wytycznej 1.4 (Distinguishable) i dotyczy bardzo konkretnego problemu: wiele osób z trudnościami w czytaniu, słabowidzących lub z niepełnosprawnościami poznawczymi musi nadpisywać domyślne odstępy tekstu na stronie internetowej, aby treść była dla nich czytelna. Jeśli układ witryny się rozpada — tekst zostaje obcięty, przyciski nachodzą na siebie, etykiety pól formularza znikają lub treść staje się nieosiągalna — po zwiększeniu odstępów, witryna nie spełnia tego kryterium.

Kryterium definiuje cztery właściwości odstępów, które muszą pozostać funkcjonalne, gdy jednocześnie zostaną ustawione na następujące minimalne wartości:

• Wysokość linii (interlinia): co najmniej 1,5 razy większa niż rozmiar czcionki elementu.
• Odstęp między literami (tracking): co najmniej 0,12 razy większy niż rozmiar czcionki elementu.
• Odstęp między wyrazami: co najmniej 0,16 razy większy niż rozmiar czcionki elementu.
• Odstęp po akapitach: co najmniej 2 razy większy niż rozmiar czcionki elementu.

Strona spełnia to kryterium, jeśli po zastosowaniu wszystkich czterech nadpisań użytkownicy nadal mogą przeczytać cały tekst, obsłużyć wszystkie elementy interaktywne i uzyskać dostęp do całej treści strony bez przewijania poziomego przy szerokości okna widoku 320 pikseli CSS, bez obcinania lub ucinania tekstu oraz bez nakładania się treści w stopniu uniemożliwiającym jej odczytanie lub użycie.

Strona nie spełnia kryterium, jeśli zastosowanie tych nadpisań powoduje którekolwiek z poniższych: tekst jest obcinany przez kontener o stałej wysokości i z ustawieniem overflow: hidden; etykiety interaktywne lub tekst przycisków znikają; menu rozwijane lub podpowiedzi (tooltips) nachodzą na treść główną w sposób uniemożliwiający korzystanie; lub jakakolwiek treść staje się trwale niedostępna.

Co istotne, kryterium nie wymaga, abyś sam ustawiał te wartości odstępów. Wymaga jedynie, aby twój układ nie rozpadał się, gdy użytkownik (lub jego technologia asystująca, rozszerzenie przeglądarki czy arkusz stylów użytkownika) zastosuje te nadpisania. Wartości odstępów są progami testowymi, a nie wymaganiami projektowymi.

Istnieje jeden wyraźny wyjątek: komponenty, w których określona prezentacja wizualna jest niezbędna do przekazania informacji — na przykład logotyp, zapis nutowy renderowany w SVG lub obraz CAPTCHA — są wyłączone. Jednak ten wyjątek jest wąski i nie powinien być używany jako ogólne usprawiedliwienie do wyłączania z wymogów menu nawigacyjnych czy komponentów kart.

Kryterium to ma zastosowanie do całej treści tekstowej renderowanej w przeglądarce przy użyciu CSS, w tym nagłówków, akapitów, etykiet, tekstu przycisków, tekstu zastępczego (placeholder), elementów list, komórek tabel i linków nawigacyjnych. Nie dotyczy tekstu renderowanego wewnątrz obrazów lub elementów canvas, ponieważ nie są one objęte nadpisaniami odstępów CSS.

Dlaczego to ma znaczenie

Odstępy tekstu bezpośrednio wpływają na osoby z szerokim spektrum niepełnosprawności i profili czytania. Według Światowej Organizacji Zdrowia około 2,2 miliarda osób na świecie ma jakąś formę upośledzenia wzroku lub ślepoty i wiele z nich używa powiększenia przeglądarki lub niestandardowych arkuszy stylów, aby treść była czytelna. Poza niepełnosprawnością wzroku szacuje się, że 15–20% światowej populacji ma dysleksję — stan, w którym zwiększone odstępy między literami, wyrazami i wierszami są udowodnionymi interwencjami poprawiającymi czytelność — co potwierdzają badania, w tym publikacje w czasopiśmie Annals of Dyslexia.

Dla użytkowników z niepełnosprawnościami poznawczymi, takimi jak ADHD lub trudności w przetwarzaniu informacji, zbyt ciasne odstępy tekstu zwiększają obciążenie poznawcze czytania, utrudniając śledzenie wierszy i rozróżnianie poszczególnych słów. Użytkownicy ci często instalują rozszerzenia przeglądarki, takie jak Readability Bookmarklet, Stylus lub korzystają z ustawień dostępności na poziomie systemu, które stosują niestandardowe odstępy do wszystkich odwiedzanych witryn.

Rozważmy konkretny scenariusz: studentka z dysleksją odwiedza turecką platformę e-commerce, aby przed egzaminem sprawdzić zasady zwrotu produktu. Używa rozszerzenia przeglądarki, które globalnie ustawia wysokość linii na 1,7 i odstęp między literami na 0,14em. Na stronie szczegółów produktu tekst zasad zwrotu znajduje się wewnątrz kontenera <div> o stałej wysokości, ostylowanego jako height: 120px; overflow: hidden;. Przy aktywnych niestandardowych odstępach widoczne są tylko dwie pierwsze linie i nie ma mechanizmu, aby odsłonić resztę. Nie może wykonać swojego zadania i traci zaufanie do platformy. To dokładnie ten rodzaj błędu, któremu ma zapobiegać WCAG 1.4.12.

Poza dostępnością dla osób z niepełnosprawnościami istnieją korzyści wtórne. Elastyczne układy odporne na zmiany odstępów są zwykle bardziej niezawodne na rynkach międzynarodowych — tekst turecki, na przykład, często zawiera dłuższe formy wyrazów ze względu na morfologię aglutynacyjną, a układy, które nie potrafią dostosować się do zmian odstępów, mają też tendencję do psucia się przy dłuższych ciągach tekstu. Dostępne układy pośrednio poprawiają również SEO: treści, które są czytelne i dostępne, zwykle mają niższy współczynnik odrzuceń i lepsze wskaźniki zaangażowania, które wyszukiwarki biorą pod uwagę w rankingach.

Powiązane reguły Axe-core

WCAG 1.4.12 wymaga testów manualnych i nie może być w pełni zweryfikowane wyłącznie za pomocą narzędzi automatycznych. Wynika to z faktu, że silniki automatyczne nie są w stanie przewidzieć, jak układ zachowa się po zastosowaniu przez użytkownika nadpisań stylów, bez faktycznego zastosowania tych nadpisań i zmierzenia renderowanego wyniku — procesu, który wymaga inspekcji wizualnej lub porównania renderowania w trybie bezgłowym. Z tego powodu silnik axe-core nie zawiera dedykowanej automatycznej reguły dla 1.4.12.

• Testy manualne z użyciem Text Spacing Bookmarklet: Zalecanym podejściem testowym jest Text Spacing Bookmarklet stworzony przez Steve’a Faulknera (obecnie utrzymywany przez społeczność zajmującą się dostępnością). Ten bookmarklet wstrzykuje do bieżącej strony arkusz stylów, który jednocześnie ustawia wszystkie cztery właściwości odstępów na ich minimalne wartości progowe. Tester następnie wizualnie (lub z użyciem czytnika ekranu) sprawdza, czy jakakolwiek treść jest obcięta, nachodząca na siebie lub niedostępna. Podejście z bookmarkletem jest standardem przywoływanym w dokumencie W3C Understanding dla 1.4.12.
• Dlaczego automatyzacja jest niewystarczająca: Automatyczne skanery, takie jak axe-core, analizują DOM i obliczone style w stanie istniejącym w momencie skanowania. Nie symulują nadpisań arkusza stylów użytkownika ani nie renderują ponownie strony, aby wykryć przepełnienie układu lub obcinanie spowodowane tymi nadpisaniami. Kontener z overflow: hidden i stałą wysokością przejdzie automatyczny skan, ponieważ sam w sobie nie jest błędem dostępności — staje się nim dopiero po zwiększeniu odstępów. Tylko poprzez zastosowanie nadpisania i obserwację wyniku tester może potwierdzić błąd.
• Dodatkowe automatyczne sprawdzenia: Chociaż żadna reguła axe nie mapuje się bezpośrednio na 1.4.12, recenzenci powinni zauważyć, że reguła axe scrollable-region-focusable oraz reguły dotyczące kontrastu kolorów mogą ujawnić powiązane problemy, które przyczyniają się do złego doświadczenia związanego z odstępami tekstu. Dodatkowo audyt dostępności w Lighthouse może oznaczać kontenery o stałym rozmiarze w określonych kontekstach, choć nie konkretnie pod kątem zgodności z wymaganiami dotyczącymi odstępów.

Jak testować

1. Zainstaluj Text Spacing Bookmarklet. Przejdź do strony Steve Faulkner Text Spacing Bookmarklet (dostępnej poprzez dokument W3C Understanding lub wyszukiwanie w sieci hasła „text spacing bookmarklet WCAG”). Przeciągnij bookmarklet na pasek zakładek przeglądarki. Alternatywnie utwórz zakładkę ręcznie i wklej kod JavaScript bookmarkletu jako adres URL.
2. Otwórz testowaną stronę w przeglądarce przy domyślnym poziomie powiększenia (100%). Przejdź do strony lub komponentu, który chcesz ocenić — na przykład strony listy produktów, formularza zamówienia lub menu nawigacyjnego.
3. Aktywuj bookmarklet. Kliknij bookmarklet. Spowoduje to wstrzyknięcie CSS, który ustawia line-height: 1.5 !important, letter-spacing: 0.12em !important, word-spacing: 0.16em !important oraz margines dolny elementu p na 2em !important w całej stronie.
4. Wizualnie przejrzyj całą stronę. Przewiń wszystkie obszary treści. Szukaj: tekstu obciętego na dole kontenera; etykiet przycisków lub tekstu linków, które zniknęły lub są częściowo ukryte; menu nawigacyjnych lub rozwijanych, w których elementy nachodzą na siebie; pól formularzy, w których tekst zastępczy lub etykiety są obcięte; oraz okien modalnych lub podpowiedzi, w których treść wykracza poza granice kontenera.
5. Wejdź w interakcję z elementami interaktywnymi. Przejdź klawiszem Tab przez wszystkie elementy, które mogą otrzymać fokus, aktywuj menu rozwijane, otwieraj okna modalne i wysyłaj formularze. Upewnij się, że wszystkie elementy interaktywne pozostają obsługiwalne, a ich widoczne etykiety są w pełni czytelne przy zastosowanych odstępach.
6. Przetestuj z czytnikiem ekranu pod kątem utraty funkcjonalności. Przy wciąż aktywnym bookmarklecie użyj NVDA z Firefoxem lub JAWS z Chrome, aby nawigować po stronie według nagłówków, regionów (landmarks) i elementów interaktywnych. Upewnij się, że kolejność odczytu i ogłaszana treść odpowiada temu, co widzi użytkownik widzący. Użyj VoiceOver w Safari na macOS lub iOS, aby objąć platformy Apple.
7. Przetestuj przy szerokości okna widoku 320px. Zmień rozmiar okna przeglądarki do szerokości 320 pikseli CSS (lub użyj trybu responsywnego w narzędziach deweloperskich przeglądarki). Ponownie aktywuj bookmarklet. Upewnij się, że treść nadal jest dostępna bez przewijania poziomego i że tekst nie jest obcinany przy małych szerokościach okna widoku w połączeniu ze zwiększonymi odstępami.
8. Udokumentuj błędy. Dla każdego błędu zanotuj: typ elementu, jego klasę CSS lub ID, konkretną właściwość odstępów powodującą błąd oraz zrzut ekranu przed i po aktywacji bookmarkletu.

Jak naprawić

Kontener o stałej wysokości obcinający tekst — nieprawidłowe

<!-- Failure: fixed height with overflow:hidden clips text when line-height increases -->
<div class='product-description' style='height: 80px; overflow: hidden;'>
  <p>Bu ürün doğal malzemelerden üretilmiştir ve 2 yıl garanti kapsamındadır.</p>
</div>

Kontener o stałej wysokości obcinający tekst — prawidłowe

<!-- Fix: use min-height instead of height, and allow overflow to be visible or auto -->
<div class='product-description' style='min-height: 80px; overflow: visible;'>
  <p>Bu ürün doğal malzemelerden üretilmiştir ve 2 yıl garanti kapsamındadır.</p>
</div>
<!-- If you need to truncate for design reasons, use a "Read more" button pattern
     that expands the content rather than hiding it with overflow:hidden -->

Etykieta przycisku obcinana przez stałą wysokość przycisku — nieprawidłowe

<!-- Failure: fixed height on button causes label text to be cut off
     when letter-spacing and line-height are increased -->
<button style='height: 36px; overflow: hidden; white-space: nowrap;'>
  Sepete Ekle
</button>

Etykieta przycisku obcinana przez stałą wysokość przycisku — prawidłowe

<!-- Fix: use min-height and padding instead of fixed height.
     padding ensures the button grows with its content. -->
<button style='min-height: 36px; padding: 8px 16px;'>
  Sepete Ekle
</button>

Podpowiedź (tooltip) lub menu rozwijane przepełniające się bez przewijania — nieprawidłowe

<!-- Failure: tooltip has a max-height and overflow:hidden,
     causing content to be cut off when spacing is increased -->
<div role='tooltip' id='info-tip' style='max-height: 60px; overflow: hidden;'>
  Bu alan zorunludur. Lütfen geçerli bir e-posta adresi giriniz.
</div>

Podpowiedź (tooltip) lub menu rozwijane przepełniające się bez przewijania — prawidłowe

<!-- Fix: remove the max-height restriction or use overflow:auto
     so content remains accessible when spacing is overridden -->
<div role='tooltip' id='info-tip' style='max-width: 280px; overflow: auto;'>
  Bu alan zorunludur. Lütfen geçerli bir e-posta adresi giriniz.
</div>

Odstępy akapitów psujące układ karty — nieprawidłowe

<!-- Failure: card uses absolute positioning and a fixed container height.
     When paragraph margin-bottom is set to 2em by the user,
     text overflows and overlaps the card footer. -->
<div class='card' style='position: relative; height: 200px; overflow: hidden;'>
  <p>Ürün açıklaması burada yer alır ve birden fazla satır içerebilir.</p>
  <div class='card-footer' style='position: absolute; bottom: 0;'>
    <a href='/urun/detay'>Detayları Gör</a>
  </div>
</div>

Odstępy akapitów psujące układ karty — prawidłowe

<!-- Fix: use flexbox or grid with a natural document flow.
     The footer follows the content instead of being absolutely positioned.
     min-height allows the card to grow with its content. -->
<div class='card' style='display: flex; flex-direction: column; min-height: 200px;'>
  <p style='flex: 1;'>Ürün açıklaması burada yer alır ve birden fazla satır içerebilir.</p>
  <div class='card-footer'>
    <a href='/urun/detay'>Detayları Gör</a>
  </div>
</div>

Typowe błędy

• Używanie height zamiast min-height w kontenerach tekstu. Stała wartość height na dowolnym elemencie zawierającym tekst spowoduje obcinanie, gdy tylko użytkownik zwiększy wysokość linii lub odstęp między literami. Zastąp wszystkie stałe wysokości w kontenerach zawierających tekst właściwością min-height, aby kontener mógł się powiększać.
• Ustawianie overflow: hidden w kontenerach zawierających tekst akapitów. To najczęstsza przyczyna błędów 1.4.12. Ukryte przepełnienie obcina tekst, który rozszerza się pionowo po zwiększeniu odstępów. Użyj overflow: visible lub overflow: auto w zależności od kontekstu projektu.
• Używanie white-space: nowrap w etykietach przycisków lub linków bez odpowiedniej elastyczności kontenera. Gdy odstęp między literami rośnie, tekst z nowrap może wyjść poza obszar rodzica lub zostać obcięty, szczególnie w elementach nawigacji o stałej szerokości.
• Absolutne pozycjonowanie stopki lub elementów akcji wewnątrz karty o stałej wysokości. Gdy treść karty rośnie z powodu nadpisań odstępów, absolutnie pozycjonowane elementy na dole karty nachodzą na tekst. Zamiast tego użyj układu kolumnowego flexbox.
• Stosowanie max-height z overflow: hidden w sekcjach zwijanych, które są w stanie rozwiniętym. Animowane akordeony, które rozszerzają się do obliczonej wartości max-height na podstawie pomiarów w pikselach, będą obcinać tekst na tej granicy pikseli po nadpisaniu odstępów, nawet gdy są w pełni otwarte.
• Używanie CSS line-clamp (webkit-line-clamp) bez widocznego mechanizmu rozwinięcia pełnej treści. Ograniczanie tekstu do stałej liczby wierszy jest dopuszczalne tylko wtedy, gdy istnieje wyraźnie oznaczony, dostępny z klawiatury kontroler umożliwiający odsłonięcie pełnej treści. Ograniczanie bez mechanizmu rozwinięcia narusza 1.4.12.
• Poleganie na JavaScript do dynamicznego ustawiania wysokości elementów w pikselach. Skrypty, które mierzą wysokości elementów, a następnie zapisują te wartości pikseli jako style inline, zablokują kontener na rozmiar ignorujący nadpisania odstępów przez użytkownika. Używaj rozmiarowania wewnętrznego (intrinsic sizing) i pozwól CSS zarządzać układem.
• Zakładanie, że automatyczne skany dostępności wykryją wszystkie błędy 1.4.12. Zespoły, które polegają wyłącznie na axe lub Lighthouse bez uruchamiania Text Spacing Bookmarklet, przeoczą wszystkie błędy odstępów wynikające z układu. Testy manualne z użyciem bookmarkletu są obowiązkowe dla tego kryterium.
• Brak testowania menu nawigacyjnych i mega-menu z użyciem bookmarkletu. Komponenty nawigacyjne są często budowane ze stałymi wysokościami w pikselach i ukrytym przepełnieniem, aby uzyskać dopracowany efekt wizualny. Są też jednymi z najczęściej zawodzących komponentów pod kątem 1.4.12, ponieważ zwiększone odstępy powodują zawijanie się elementów menu i ich obcinanie.
• Traktowanie wartości odstępów jako wymagań projektowych, a nie progów testowych. Niektóre zespoły reagują na 1.4.12, aktualizując swoje style domyślne tak, aby odpowiadały wartościom progowym, co jest niepotrzebne i może być sprzeczne z zamysłem projektanta. Kryterium wymaga jedynie, aby układ nie rozpadał się po zastosowaniu tych wartości — nie tego, by były one domyślne.

Związek z tureckimi regulacjami dotyczącymi dostępności

WCAG 1.4.12 Text Spacing ma bezpośrednie znaczenie dla kształtujących się w Turcji ram prawnych dotyczących dostępności. Najważniejszym ostatnim wydarzeniem jest Okólnik Prezydencki 2025/10, opublikowany w Dzienniku Urzędowym nr 32933 w dniu 21 czerwca 2025 r. Okólnik ten ustanawia wiążące obowiązki dla szerokiego zakresu organizacji w zakresie zapewnienia dostępności cyfrowej w całej ich obecności w sieci i aplikacjach mobilnych.

Okólnik obejmuje szeroki zestaw typów podmiotów. Do przestrzegania zobowiązane są instytucje i agencje publiczne na wszystkich szczeblach administracji. Podmioty sektora prywatnego w zakresie obejmują platformy e-commerce, banki i instytucje finansowe, szpitale i świadczeniodawców opieki zdrowotnej, firmy telekomunikacyjne z 200,000 lub większą liczbą abonentów, biura podróży, prywatne firmy transportowe oraz szkoły prywatne upoważnione przez Ministerstwo Edukacji Narodowej (MoNE). Organizacje te są zobowiązane do spełnienia poziomu zgodności AA z WCAG, który obejmuje 1.4.12, w ramach ich obowiązków wynikających z okólnika.

Zgodność na poziomie AA jest również warunkiem uzyskania Logotypu Dostępności (Erişilebilirlik Logosu) wydawanego przez Ministerstwo Rodziny i Usług Społecznych (Aile ve Sosyal Hizmetler Bakanlığı). Logotyp ten sygnalizuje użytkownikom, w szczególności osobom z niepełnosprawnościami, że produkt cyfrowy został poddany audytowi i spełnia wymagany standard dostępności. Dla organizacji obsługujących turecką społeczność osób z niepełnosprawnościami — szacowaną na kilka milionów osób, w tym osoby z niepełnosprawnością wzroku, niepełnosprawnościami poznawczymi i trudnościami w czytaniu — logotyp ma zarówno znaczenie wizerunkowe, jak i regulacyjne.

W praktyce turecka platforma e-commerce, która używa kontenerów opisu produktu o stałej wysokości z overflow: hidden, lub portal rządowy, którego menu nawigacyjne obcina się, gdy użytkownik stosuje nadpisania odstępów za pomocą rozszerzenia przeglądarki lub ustawień dostępności systemu operacyjnego, nie tylko zawodzi swoich użytkowników — potencjalnie nie spełnia również obowiązków ustanowionych w okólniku 2025/10. Błędy związane z Text Spacing są szczególnie istotne dla tureckich użytkowników z dysleksją i słabowidzących, którzy polegają na narzędziach do niestandardowych odstępów, oraz dla użytkowników korzystających z usług rządowych lub komercyjnych na urządzeniach mobilnych, gdzie ustawienia rozmiaru tekstu systemu operacyjnego mogą również wywoływać niestabilność układu podobną do nadpisań odstępów.

Organizacje ubiegające się o Erişilebilirlik Logosu powinny uwzględnić manualny audyt odstępów tekstu z użyciem Text Spacing Bookmarklet jako wymagany krok w procesie audytu dostępności, obok automatycznego skanowania i testów z czytnikami ekranu. Usunięcie błędów 1.4.12 — głównie poprzez zastąpienie stałych wysokości właściwością min-height, usunięcie zbędnego overflow: hidden z kontenerów tekstu oraz przyjęcie elastycznych technik układu CSS — jest na ogół możliwe bez istotnych zmian projektowych i stanowi wartościową, niskokosztową poprawę dostępności każdej tureckiej usługi cyfrowej.