WCAG 1.4.12: Odstępy w tekście

Wprowadzenie do WCAG 1.4.12: Odstępy w tekście

Kryterium sukcesu WCAG 1.4.12 Odstępy w tekście (otwiera nową kartę) (Text Spacing) jest częścią wytycznych WCAG 2.1 na poziomie dostępności AA. Jego głównym celem jest zapewnienie, że użytkownicy mogą dostosować odstępy w tekście do swoich indywidualnych potrzeb bez utraty treści lub funkcjonalności strony internetowej. Obejmuje to modyfikację odstępów między literami, wyrazami, liniami i akapitami.

Kryterium to nie wymaga, aby strona internetowa dostarczała mechanizmów do zmiany tych odstępów. Wymaga natomiast, aby projekt strony był na tyle elastyczny, by poprawnie wyświetlał treści i zachowywał pełną funkcjonalność, gdy oprogramowanie użytkownika (np. rozszerzenia przeglądarki, arkusze stylów) modyfikuje te wartości CSS.

Dlaczego odstępy w tekście są ważne dla dostępności?

Możliwość dostosowania odstępów w tekście jest kluczowa dla wielu grup użytkowników, znacząco poprawiając czytelność i zrozumiałość treści. Oto dlaczego jest to tak istotne:

  • Dla osób ze słabym wzrokiem: Zwiększone odstępy między liniami (wysokość linii) mogą pomóc w śledzeniu tekstu i zapobiegać "gubieniu się" w wierszach. Większe odstępy między wyrazami lub literami mogą ułatwić rozróżnianie poszczególnych znaków i słów.
  • Dla osób z dysleksją: Niektórzy użytkownicy z dysleksją mogą mieć trudności z czytaniem tekstu, gdy litery są zbyt blisko siebie. Zwiększone odstępy mogą pomóc w dekodowaniu słów i redukować efekt "stłoczenia" tekstu, poprawiając płynność czytania.
  • Dla osób z zaburzeniami poznawczymi: Lepsza czytelność wynikająca z odpowiednich odstępów może zmniejszyć obciążenie poznawcze, ułatwiając przetwarzanie informacji i poprawiając ogólne doświadczenie użytkownika.
  • Dla użytkowników czytających w różnych warunkach: Osoby czytające na małych ekranach, w słabym oświetleniu lub w stresie również mogą skorzystać z możliwości dostosowania odstępów, aby zwiększyć komfort i efektywność czytania.

Brak elastyczności w odstępach może prowadzić do nakładania się tekstu, ukrywania części treści lub blokowania interaktywnych elementów, co całkowicie uniemożliwia korzystanie ze strony.

Kryteria sukcesu i wymagania WCAG 1.4.12

Aby spełnić kryterium WCAG 1.4.12, treść i funkcjonalność strony muszą pozostać dostępne i w pełni użyteczne, gdy użytkownik (za pomocą własnego oprogramowania) zmodyfikuje następujące odstępy CSS do określonych wartości:

  • Wysokość linii (line-height): co najmniej 1.5 razy rozmiar czcionki.
  • Odstępy między akapitami (margin-bottom lub podobne): co najmniej 2 razy rozmiar czcionki po akapitach.
  • Odstępy między literami (letter-spacing): co najmniej 0.12 razy rozmiar czcionki.
  • Odstępy między wyrazami (word-spacing): co najmniej 0.16 razy rozmiar czcionki.

Najważniejszym aspektem jest to, że treść i funkcjonalność muszą pozostać bez utraty. Oznacza to, że po zastosowaniu powyższych zmian nie może dochodzić do:

  • Nakładania się tekstu.
  • Przycinania tekstu (tekst staje się niewidoczny).
  • Ukrywania interaktywnych elementów lub części treści.
  • Zakłócania działania elementów sterujących.
  • Zmiany kolejności czytania lub sensu treści.

Praktyczne wytyczne dla zgodności

Aby zapewnić zgodność z WCAG 1.4.12, należy przestrzegać następujących zasad podczas projektowania i implementacji:

1. Używaj względnych jednostek CSS

Zamiast stałych jednostek (px), używaj względnych jednostek, takich jak em, rem, % dla rozmiarów czcionek, wysokości linii, odstępów i marginesów. Dzięki temu elementy skalują się proporcjonalnie do rozmiaru czcionki bazowej lub rodzica, co ułatwia dostosowanie przez użytkownika.

  • font-size: 1em; (lub 1rem;)
  • line-height: 1.5; (zalecane użycie jednostki bezwzględnej, np. 1.5; lub 1.5em;)
  • margin-bottom: 2em;
  • letter-spacing: 0.12em;
  • word-spacing: 0.16em;

2. Projektuj elastyczne układy

Unikaj sztywnych, stałych szerokości i wysokości, które mogą prowadzić do przycięcia lub nakładania się treści. Wykorzystuj elastyczne techniki układu:

  • Flexbox (display: flex;) i Grid (display: grid;) do organizacji treści. Pozwalają one na dynamiczne dostosowanie rozmiaru i rozmieszczenia elementów w zależności od dostępnej przestrzeni.
  • min-height i min-width zamiast height i width, aby elementy mogły rozszerzać się, jeśli wymaga tego treść.
  • max-width: 100%; dla obrazów i innych mediów, aby zapobiec ich wyjściu poza obszar zawartości.

3. Unikaj nakładania się elementów

Projektuj z myślą o buforze. Upewnij się, że elementy nie są zbyt ciasno rozmieszczone, aby uniknąć kolizji po zwiększeniu odstępów. Dotyczy to zarówno tekstu, jak i interaktywnych komponentów, takich jak przyciski, linki czy pola formularzy.

4. Testowanie dostępności

Symuluj zmiany odstępów, aby sprawdzić, czy strona pozostaje użyteczna. Możesz to zrobić za pomocą:

  • Narzędzi deweloperskich w przeglądarce: Ręcznie zmieniaj wartości line-height, letter-spacing, word-spacing i marginesów w CSS.
  • Rozszerzeń przeglądarki: Istnieją rozszerzenia, które pozwalają użytkownikom na globalne zastosowanie niestandardowych arkuszy stylów, w tym modyfikację odstępów tekstowych. Przykładem może być Stylus lub inne narzędzia symulujące funkcjonalność WCAG Text Spacing.

Przykłady implementacji

Poprawna implementacja

Poniższy przykład demonstruje użycie względnych jednostek i elastycznego układu, co pozwala na dostosowanie odstępów bez utraty treści.

HTML

<div class="content-wrapper">
    <p class="intro-paragraph">To jest akapit wprowadzający, który powinien być czytelny nawet po dostosowaniu odstępów.</p>
    <p>Kryterium WCAG 1.4.12 wymaga elastyczności. Zwiększone odstępy między liniami, wyrazami i literami nie powinny powodować problemów z układem.</p>
    <ul>
        <li>Element listy pierwszy.</li>
        <li>Element listy drugi, dłuższy, aby przetestować zawijanie tekstu i wysokość linii.</li>
    </ul>
    <button class="action-button">Przycisk Akcji</button>
</div>

CSS

body {
    font-size: 16px; /* Bazowy rozmiar czcionki */
}

.content-wrapper {
    max-width: 800px;
    margin: 0 auto;
    padding: 1em;
    line-height: 1.5; /* Domyślna wysokość linii */
    word-spacing: 0.05em; /* Domyślne odstępy między wyrazami */
    letter-spacing: 0.02em; /* Domyślne odstępy między literami */
}

p {
    margin-bottom: 1em; /* Domyślne odstępy między akapitami */
}

.intro-paragraph {
    font-size: 1.125em; /* Większy tekst, bazujący na rodzicu */
    margin-bottom: 1.5em;
}

ul {
    list-style: disc;
    margin-left: 2em;
    padding-left: 0;
    margin-bottom: 1em;
}

li {
    margin-bottom: 0.5em;
}

.action-button {
    padding: 0.8em 1.5em;
    font-size: 1em;
    margin-top: 1.5em;
    display: inline-block; /* Zapewnia, że padding działa poprawnie */
    line-height: 1.2; /* Domyślna wysokość linii przycisku */
}

/* Przykład jak użytkownik może nadpisać style */
/* Symulacja zwiększonych odstępów */
/*
body {
    line-height: 2.2 !important;
    word-spacing: 0.32em !important;
    letter-spacing: 0.24em !important;
}
p {
    margin-bottom: 3em !important;
}
*/

W tym przykładzie, użycie em dla odstępów i marginesów pozwala na automatyczne skalowanie, gdy użytkownik zmieni podstawowy rozmiar czcionki lub nadpisze właściwości line-height, word-spacing, letter-spacing i margin-bottom. Układ .content-wrapper jest elastyczny i nie ma stałych, ograniczających wysokości.

Niepoprawna implementacja

Poniższy przykład pokazuje typowe błędy, które prowadzą do niezgodności, gdy użytkownik próbuje dostosować odstępy.

HTML

<div class="fixed-height-box">
    <p>Ten tekst jest w kontenerze o stałej wysokości.</p>
    <p>Po zwiększeniu odstępów, część tekstu może zostać przycięta i stać się niewidoczna.</p>
</div>

<div class="overlapping-elements">
    <span class="text-label">Etykieta:</span><input type="text" value="Wpisz tekst tutaj" class="text-input">
    <button class="submit-button">Wyślij</button>
</div>

CSS

.fixed-height-box {
    height: 80px; /* Stała wysokość */
    overflow: hidden; /* Ukrywa zawartość wychodzącą poza kontener */
    border: 1px solid red;
    padding: 10px;
}

.fixed-height-box p {
    font-size: 14px; /* Stały rozmiar czcionki */
    line-height: 18px; /* Stała wysokość linii */
    margin-bottom: 5px; /* Stały margines */
}

.overlapping-elements {
    position: relative;
    margin-top: 20px;
}

.text-label {
    position: absolute;
    left: 0;
    top: 0;
    font-size: 14px;
    line-height: 1.2;
}

.text-input {
    margin-left: 70px; /* Sztywny margines */
    padding: 5px;
    font-size: 14px;
    line-height: 1.2;
}

.submit-button {
    position: absolute;
    left: 0;
    top: 40px; /* Sztywna pozycja, która może kolidować z tekstem powyżej */
    padding: 8px 15px;
    font-size: 14px;
    line-height: 1.2;
}

W powyższym przykładzie:

  • .fixed-height-box ze stałą wysokością i overflow: hidden spowoduje przycięcie tekstu, jeśli line-height lub margin-bottom zostaną zwiększone.
  • .overlapping-elements z absolutnym pozycjonowaniem i sztywnymi marginesami doprowadzi do nakładania się tekstu etykiety na pole tekstowe, a przycisk może zakryć pole, jeśli tekst powyżej się rozszerzy. Użycie px dla font-size, line-height i marginesów dodatkowo ogranicza elastyczność.

Najlepsze praktyki i typowe pułapki

Najlepsze praktyki:

  • Używaj względnych jednostek wszędzie tam, gdzie to możliwe: em, rem, % dla tekstu, marginesów, paddingów, szerokości i wysokości.
  • Projektuj elastyczne układy: Wykorzystuj CSS Grid i Flexbox, które są zaprojektowane do adaptacji do różnych rozmiarów treści i ekranów.
  • Unikaj overflow: hidden dla tekstowych kontenerów: Chyba że jest to absolutnie konieczne i masz pewność, że tekst nigdy nie zostanie przycięty (co jest trudne do zagwarantowania). Zazwyczaj lepiej jest pozwolić na rozwinięcie kontenera.
  • Testuj z narzędziami WCAG: Używaj rozszerzeń przeglądarki, które symulują ustawienia odstępów, aby upewnić się, że strona nadal działa poprawnie.
  • Zostaw wystarczająco dużo miejsca: Zawsze projektuj z myślą o "miejscu na oddech" wokół elementów interaktywnych i bloków tekstu, aby po zwiększeniu odstępów nie doszło do kolizji.

Typowe pułapki:

  • Używanie stałych jednostek (px) dla odstępów i rozmiarów czcionek: To najczęstszy błąd, który uniemożliwia użytkownikom skuteczne dostosowanie strony.
  • Sztywne, ustalone wysokości i szerokości kontenerów: Kontenery, które nie mogą się rozszerzyć, zablokują możliwość zwiększenia odstępów.
  • Absolutne lub względne pozycjonowanie, które zakłada stałe wymiary: Gdy elementy są pozycjonowane absolutnie bez odpowiednich zabezpieczeń, mogą na siebie nachodzić po zmianie odstępów.
  • Nakładające się elementy interaktywne: Przyciski, linki, pola formularzy zbyt blisko siebie mogą stać się niemożliwe do kliknięcia lub trudne do odróżnienia.
  • Niewystarczające testowanie: Zakładanie, że strona jest elastyczna bez faktycznego przetestowania z maksymalnymi wartościami odstępów.

Podsumowanie

Kryterium WCAG 1.4.12 Odstępy w tekście podkreśla fundamentalną zasadę dostępności: elastyczność i możliwość dostosowania treści przez użytkownika. Stosując względne jednostki, projektując elastyczne układy i unikając sztywnych ograniczeń, deweloperzy mogą stworzyć strony internetowe, które są nie tylko estetyczne, ale przede wszystkim dostępne i użyteczne dla każdego, niezależnie od jego preferencji czy potrzeb.

Pamiętaj, że celem jest zapewnienie, że strona internetowa nie zakłóca zmian odstępów, a nie to, że zapewnia te zmiany. Odpowiedzialność za zapewnienie tej elastyczności spoczywa na twórcach treści i deweloperach.

Powiązane wpisy

Nadal szukasz odpowiedzi?

Zapytaj naszych specjalistów używając czatu online.

Skontaktuj się z nami