Postrzegalność · Poziom AA · Dodane w WCAG 2.1

1.4.12 Odstępy w tekście

Treść nie może się rozsypać, gdy użytkownik zwiększy odstępy w tekście.

Krótko

Jeśli użytkownik ustawi większy odstęp między liniami, akapitami, literami i słowami, treść nadal ma być czytelna i używalna. Nic nie powinno znikać, nachodzić na siebie ani blokować funkcji.

Problem w praktyce

Użytkownik używa własnego arkusza stylów albo rozszerzenia przeglądarki, które zwiększa odstępy w tekście. Wtedy tytuł karty wychodzi poza ramkę, przycisk zasłania opis, a lista opcji traci część tekstu.

1.4.12 nie wymaga, żeby autor domyślnie używał takich odstępów. Wymaga, żeby po ich ustawieniu nie doszło do utraty treści lub funkcjonalności.

To nie jest to samo co 1.4.4. Tam testujesz powiększenie tekstu do 200%. Tutaj testujesz zmianę odstępów w tekście bez zmieniania innych właściwości.

Kogo to dotyczy

  • Osób z dysleksją, które czytają wygodniej przy większych odstępach.
  • Osób słabowidzących, które potrzebują większej przestrzeni między liniami i słowami.
  • Osób z trudnościami poznawczymi, które łatwiej śledzą tekst, gdy nie jest zbity.
  • Użytkowników własnych stylów, rozszerzeń czy ustawień czytania.
  • Wszystkich osób korzystających z długich instrukcji, formularzy i komunikatów błędów.

Dobry przykład

  • Karty, alerty i przyciski nie mają sztywnej wysokości.
  • Tekst może się zawijać i zwiększać wysokość kontenera.
  • Nie używa się ujemnego `letter-spacing` do ściskania treści.
  • Elementy mają wystarczające odstępy i nie opierają układu na idealnym dopasowaniu tekstu do ramki.
  • Po zmianie odstępów użytkownik nadal może przeczytać etykiety i wykonać akcje.

Zły przykład

  • Tekst w karcie jest przycinany przez `max-height` i `overflow: hidden`.
  • Przycisk ma stałą wysokość, więc etykieta nachodzi na obramowanie.
  • Menu zakłada dokładną szerokość tekstu i rozsypuje się po zwiększeniu odstępów.
  • Treść ma ujemne odstępy między literami, żeby zmieścić się w projekcie.
  • Komunikat błędu przykrywa pole formularza po zwiększeniu `line-height`.

Przykłady kodu

Zły przykład: sztywny kontener i przycinanie

Po zmianie odstępów część tekstu znika.

Kod — CSS

.card__description {
  max-height: 3rem;
  overflow: hidden;
  line-height: 1.1;
}

Dobry przykład: treść może rosnąć

Kontener przyjmuje większe odstępy bez utraty treści.

Kod — CSS

.card__description {
  line-height: 1.5;
  max-width: 65ch;
}

.card {
  min-height: 0;
  padding: 1rem;
}

Testowe ustawienia odstępów

Takie wartości odpowiadają wymaganiom kryterium.

Kod — CSS

* {
  line-height: 1.5 !important;
  letter-spacing: 0.12em !important;
  word-spacing: 0.16em !important;
}

p {
  margin-bottom: 2em !important;
}

Przykład graficzny

Źle

Wpisz numer sprawy oraz kod z pisma. Po zwiększeniu odstępów ta instrukcja zostaje przycięta.

Tekst znika, bo kontener ma sztywne ograniczenie.

Dobrze

Wpisz numer sprawy oraz kod z pisma. Kontener rośnie, więc instrukcja pozostaje czytelna.

Większe odstępy zmieniają wysokość, ale nie zabierają treści ani funkcji.

Statyczne demo pokazuje, co dzieje się z instrukcją po zwiększeniu odstępów w tekście.

Jak sprawdzić

  1. Ustaw testowe odstępy: `line-height: 1.5`, odstęp po akapicie `2em`, `letter-spacing: 0.12em`, `word-spacing: 0.16em`.
  2. Nie zmieniaj innych właściwości CSS podczas tego testu.
  3. Sprawdź artykuły, karty, przyciski, menu, formularze, komunikaty błędów, tabele i modale.
  4. Oceń, czy treść nie jest przycięta, zasłonięta ani nałożona na inne elementy.
  5. Sprawdź, czy wszystkie funkcje nadal da się wykonać.
  6. Zwróć uwagę na `height`, `max-height`, `overflow: hidden`, ciasne przyciski i ujemne `letter-spacing`.

Co sprawdzi automat, a czego nie

Automat może wykryć

  • część sztywnych wysokości i ukrywania nadmiaru treści,
  • część przypadków nakładania się tekstu po zastosowaniu testowych odstępów,
  • ujemne odstępy między literami albo bardzo ciasne układy.

Automat nie oceni pewnie

  • czy użytkownik nadal rozumie instrukcję w konkretnym procesie,
  • czy przycięty fragment jest istotny dla zadania,
  • czy problem wynika z odstępów w tekście, czy z powiększenia tekstu albo reflow,
  • czy wyjątek językowy lub system pisma ma zastosowanie.

Typowe błędy

  • Projektowanie kart z opisem mieszczącym się dokładnie w dwóch liniach.
  • Ukrywanie nadmiaru tekstu bez alternatywy.
  • Przyciski bez miejsca na zawijanie etykiety.
  • Ujemne `letter-spacing` użyte jako trik wizualny.
  • Komunikaty błędów umieszczone w ciasnym układzie pod polem.
  • Brak testu na realnych treściach, takich jak długie nazwiska, adresy i komunikaty urzędowe.