WCAG 1.4.12 Odstępy w tekście

Kryterium sukcesu 1.4.12 pomaga osobom z dysleksją, słabowidzącym i z innymi trudnościami w czytaniu, które korzystają z rozszerzeń przeglądarki lub własnych stylów, by zwiększyć odstępy w tekście. Większe odstępy ułatwiają czytanie, ale tylko wtedy, gdy strona się nie psuje. Kryterium dodano w WCAG 2.1, ma poziom AA i jest częścią normy EN 301 549 (punkt 9.1.4.12).

Czego wymaga kryterium

W treści zbudowanej w językach znaczników, które obsługują te właściwości (HTML i CSS je obsługują), nie może dochodzić do utraty treści ani funkcjonalności, gdy użytkownik ustawi wszystkie poniższe wartości i nie zmieni żadnej innej właściwości stylu:

• wysokość linii (interlinię) na co najmniej 1,5 raza rozmiar czcionki;
• odstęp po akapitach na co najmniej 2 razy rozmiar czcionki;
• odstęp między literami na co najmniej 0,12 raza rozmiar czcionki;
• odstęp między słowami na co najmniej 0,16 raza rozmiar czcionki.

Projekt strony nie musi stosować tych wartości. Wymaganie polega na tym, że użytkownik może je nadpisać, a tekst nie zostanie ucięty, nie nałoży się na inny ani nie zostanie ukryty.

Wyjątek: języki i systemy pisma, które nie używają którejś z tych właściwości, muszą obsługiwać tylko te, które u nich istnieją.

Typowe błędy w sklepie internetowym

• „Dodaj do koszyka” i inne przyciski o stałej wysokości z overflow: hidden, przez co etykieta jest ucięta;
• karty produktów o stałej wysokości, przez co znika nazwa produktu lub cena;
• karty nawigacji i filtry, których tekst nachodzi na kolejny element;
• plakietki takie jak „−20 %” czy „Nowość” pozycjonowane absolutnie na zdjęciu, przez co szerszy tekst zasłania cenę;
• atrybuty style z odstępami ustawionymi przez !important, które blokują nadpisanie przez użytkownika.

Jak to sprawdzić

Automatycznie: nasz skaner oznacza style inline, które ustawiają odstępy między literami, słowami lub interlinię z !important, co uniemożliwia użytkownikom ich nadpisanie (reguła unikanie odstępów inline). To, czy tekst zostaje ucięty po zmianie, widać tylko na ekranie, więc potrzebna jest też ręczna kontrola.

Ręcznie: zastosować bookmarklet do odstępów w tekście lub arkusz stylów użytkownika z dokładnie tymi wartościami: line-height: 1.5 !important; letter-spacing: 0.12em !important; word-spacing: 0.16em !important; oraz margin-bottom: 2em dla akapitów. Następnie przejść przez główne strony i szukać uciętego tekstu, nakładania się elementów i elementów sterujących, z których nie da się już korzystać.

Jak to naprawić

• Unikać stałych wysokości elementów zawierających tekst; zamiast tego stosować min-height i dopełnienie (padding).
• Unikać overflow: hidden w kontenerach tekstu albo pozwolić im rosnąć.
• Pozwolić etykietom, kartom i filtrom zawijać się do następnego wiersza.
• Nie ustawiać odstępów z !important w stylach inline.

Powiązane kryteria

• 1.4.4 Zmiana rozmiaru tekstu — tekst przy powiększeniu 200 %.
• 1.4.10 Dopasowanie do ekranu — brak przewijania w poziomie przy 320 px.
• Bezpłatne sprawdzenie jednej strony — znalezienie problemów z odstępami inline.

Najczęstsze pytania

Czy moja strona musi mieć interlinię 1,5?

Nie. WCAG nie wymaga tych wartości odstępów w projekcie. Wymaga, by nic nie zostało utracone, gdy użytkownik nadpisze nimi odstępy ustawione na stronie.

Jak przetestować WCAG 1.4.12?

Zastosować bookmarklet do odstępów w tekście lub arkusz stylów użytkownika, który ustawia line-height 1.5, odstęp akapitów 2em, letter-spacing 0.12em i word-spacing 0.16em, a potem szukać uciętego, nachodzącego na siebie lub ukrytego tekstu i niedziałających elementów sterujących.

Co najczęściej powoduje błędy?

Kontenery o stałej wysokości lub z overflow: hidden — przyciski, karty, plakietki i kafelki — które ucinają tekst, gdy potrzebuje on więcej miejsca.