Odstępy tekstu

Czego wymaga kryterium

Osoby z dysleksją, słabowidzące lub z niepełnosprawnościami poznawczymi często instalują rozszerzenia przeglądarki lub arkusze stylów użytkownika, które rozluźniają zagęszczoną typografię. Kryterium definiuje cztery konkretne nadpisania — wysokość wiersza 1,5x rozmiaru czcionki, odstęp akapitowy 2x rozmiar czcionki, odstęp między literami 0,12em, odstęp między wyrazami 0,16em — i wymaga, aby strona działała poprawnie po ich zastosowaniu. Bez przyciętego tekstu, bez przepełnienia, bez utraty treści.

Jak spełnić kryterium

• Wysokości kontenerów należy ustawiać za pomocą min-height, a nie stałego height, aby mogły rosnąć wraz z ekspansją tekstu.
• Należy unikać stałych wysokości w pikselach dla przycisków, elementów nawigacyjnych, kart i oznaczeń (badges) — powinny rosnąć wraz z zawartością.
• Należy przeprowadzić testy, wklejając znany bookmarklet (bookmarklet WCAG 1.4.12 text-spacing), który stosuje cztery nadpisania jednocześnie.
• Tekst powinien zawijać się naturalnie; nie należy stosować white-space: nowrap na etykietach, które mogą się powiększać.
• Należy sprawdzić, czy menu nawigacyjne, zakładki i ich etykiety mieszczą się nadal po zwiększeniu odstępów między literami.

Częste błędy

• Przyciski z height: 40px, które przycinają etykietę, gdy wysokość wiersza rośnie do 1,5.
• Etykiety zakładek z white-space: nowrap, które przepełniają kontener przy szerszym odstępie między literami.
• Karty ze stałymi wysokościami, gdzie tekst chowa się za efektem zanikania „czytaj więcej”.
• Dymki i oznaczenia (badges), które przycinają tekst przy wzroście odstępu akapitowego.
• Stałe nagłówki ze stałymi wysokościami, które zachodzą na stronę, gdy tekst nawigacyjny rośnie.

Dlaczego to jest ważne

Kryterium wychwytuje układy „zaprojektowane pod jeden zestaw odstępów”, w których projektant zablokował wszystko na idealnych odstępach z Figmy. Rzeczywiści użytkownicy narzędzi wspomagających czytanie stale stosują nadpisania odstępów. Naprawa polega zazwyczaj na przejściu z height na min-height i usunięciu white-space: nowrap — to niewielkie, mechaniczne zmiany, które przynoszą korzyść w całym interfejsie.