1.4.12 Odstępy w tekście - poziom AA

Użytkownik może chcieć zwiększyć odstępy w tekście, żeby lepiej mu się czytało i żeby strona tego ani nie blokowała, ani nie psuła.

O jakie odstępy chodzi?

WCAG wskazuje konkretne parametry, które użytkownik może chcieć ustawić:

• wysokość linii co najmniej 1,5 w stosunku do rozmiaru czcionki
• odstęp między akapitami co najmniej 2 w stosunku do rozmiaru czcionki
• odstęp między literami co najmniej 0,12 w stosunku do rozmiaru czcionki
• odstęp między wyrazami co najmniej 0,16 w stosunku do rozmiaru czcionki

I Twoja strona musi to uwzględniać...

O co tu chodzi w praktyce?

Część osób czyta lepiej, gdy tekst ma większą interlinię, większy odstęp między słowami albo literami. Użytkownik może to ustawić np. przez własne style w przeglądarce lub rozszerzenia. Problem zaczyna się wtedy, gdy po zmianie odstępów:

• tekst się ucina (bo kontener ma stałą wysokość),
• elementy na siebie nachodzą,
• znika część treści (np. przez overflow: hidden),
• nie da się kliknąć przycisków lub obsłużyć formularza, bo layout się rozsypał.

To najczęstsze sytuacje, przed którymi 1.4.12 ma chronić użytkownika.

Jak nie zepsuć 1.4.12 w praktyce

Najczęściej problemem jest sztywny layout. Jeśli w projekcie są miejsca, gdzie tekst ma mało przestrzeni, to po zwiększeniu odstępów zacznie się konflikt.

Najbardziej ryzykowne rzeczy (bo to one zwykle powodują ucinanie i nachodzenie):

• stałe wysokości dla boksów z tekstem (np. kafelki, zajawki, karty),
• ukrywanie nadmiaru treści (overflow: hidden) w miejscach, gdzie tekst może urosnąć,
• elementy pozycjonowane „na sztywno” obok tekstu, które nie mają marginesu na zmianę wysokości,
• rozwiązania typu „obcinanie do 2 linii” w zajawkach (to bywa OK wizualnie, ale łatwo wtedy zgubić treść po zmianie odstępów).

Jak to szybko sprawdzić na stronie

Najprostszy test jest taki: ustaw te cztery wartości (interlinia, akapity, litery, wyrazy) i zobacz, czy żaden tekst nie został ucięty, nic nie nachodzi na siebie, formularze, przyciski, menu nadal działają, nie pojawiły się sytuacje, że treść została przykryta.

Pełny tekst kryterium 1.4.12 Odstępy w tekście

W treściach tworzonych za pomocą języków znaczników, umożliwiających ustawienie poniższych właściwości stylu , nie następuje utrata żadnych treści lub funkcjonalności, gdy tekst ustawiony zostanie tak, aby uwzględniał wszystkie poniższe parametry oraz gdy wprowadzone zostaną zmiany w jakiejkolwiek innej właściwości stylu:

• Wysokość linii (odstęp między wierszami) do co najmniej 1,5-krotności rozmiaru czcionki;
• Odstęp między akapitami co najmniej 2 razy większy od rozmiaru czcionki;
• Odstępy między literami (tracking) do co najmniej 0,12-krotności rozmiaru czcionki;
• Odstępy między wyrazami do co najmniej 0,16 wielkości czcionki.

Wyjątek: Języki naturalne i skrypty, które nie wykorzystują jednej lub więcej z tych właściwości stylu tekstowego w tekście pisanym, mogą być zgodne przy użyciu tylko tych właściwości, które istnieją dla tej kombinacji języka i skryptu.

Źródło: https://www.w3.org/Translations/WCAG21-pl/#odstepy-w-tekscie

Chcesz wiedzieć więcej?

• 1.1.1 Treść nietekstowa - poziom A
• 1.2.1 Tylko audio lub tylko wideo (nagranie) - poziom A
• 1.2.2 Napisy rozszerzone (nagranie) - poziom A
• 1.2.3 Audiodeskrypcja lub alternatywa tekstowa dla mediów (nagranie) - Poziom A
• 1.2.4 Napisy rozszerzone (na żywo) - poziom AA
• 1.2.5 Audiodeskrypcja (nagranie) - poziom AA
• 1.2.6 Język migowy (nagranie) - poziom AAA
• 1.2.7 Rozszerzona audiodeskrypcja (nagranie) - poziom AAA
• 1.2.8 Alternatywa dla mediów (nagranie) - poziom AAA
• 1.2.9 Tylko audio (na żywo) - poziom AAA
• 1.3.1 Informacje i relacje - poziom A
• 1.3.2 Zrozumiała kolejność - poziom A
• 1.3.3 Właściwości zmysłowe - poziom A
• 1.3.4 Orientacja - poziom AA
• 1.3.5 Określenie pożądanej wartości - poziom AA
• 1.3.6 Określenie przeznaczenia - poziom AAA
• 1.4.1 Użycie koloru - poziom A
• 1.4.2 Kontrola odtwarzania dźwięku - poziom A
• 1.4.3 Kontrast (minimalny) - poziom AA
• 1.4.4 Zmiana rozmiaru tekstu - poziom AA
• 1.4.5 Obrazy tekstu - poziom AA
• 1.4.6 Kontrast (wzmocniony) - poziom AAA
• 1.4.7 Niska głośność lub bez dźwięków w tle - poziom AAA
• 1.4.8 Prezentacja wizualna - poziom AAA
• 1.4.9 Obrazy tekstu (bez wyjątków) - poziom AAA
• 1.4.10 Dopasowanie do ekranu - poziom AA
• 1.4.11 Kontrast elementów nietekstowych - poziom AA
• 1.4.12 Odstępy w tekście - poziom AA
• 1.4.13 Treść spod kursora lub fokusu - poziom AA