Odstępy w tekście

Silktide wykrywa elementy, których style wbudowane blokują odstępy w tekście — letter-spacing, word-spacing lub line-height — za pomocą !important na wartości niższej niż minimum WCAG, przez co użytkownicy nie mogą ich dostosować.

Dlaczego to ważne

Osoby z dysleksją lub słabym wzrokiem często potrzebują większych odstępów w tekście, aby go czytać: wyższych wierszy oraz szerszych odstępów między literami i słowami. Robią to za pomocą rozszerzeń przeglądarki i niestandardowych arkuszy stylów, które zastępują odstępy na stronie.

Narzędzia te wstrzykują zwykły CSS na poziomie autora. Deklaracja !important wewnątrz atrybutu style elementu ma pierwszeństwo przed każdą regułą na poziomie autora, niezależnie od jej szczegółowości — jest to jedyna konstrukcja na stronie, której te narzędzia nie mogą zastąpić. Gdy blokuje odstępy poniżej wartości minimalnych, użytkownik zostaje po prostu wykluczony.

Kryterium sukcesu 1.4.12 (poziom AA) wymaga, aby treść pozostawała dostępna po zwiększeniu przez użytkowników odstępów w tekście co najmniej do:

Wysokość wiersza — 1,5 raza rozmiaru czcionki
Odstępy między literami — 0,12 raza rozmiaru czcionki
Odstępy między wyrazami — 0,16 raza rozmiaru czcionki

Jak to naprawić

Dla każdego oznaczonego elementu wykonaj jedno z poniższych działań:

Usuń flagę !important z deklaracji wbudowanej. Narzędzia użytkowników będą mogły ją wtedy zastąpić, a projekt pozostanie niezmieniony dla wszystkich innych osób.
Przenieś deklarację do arkusza stylów. Nawet z !important reguły arkusza stylów mogą zostać zastąpione przez narzędzia użytkowników.
Zwiększ wartość do minimum WCAG, jeśli odstęp rzeczywiście musi być zablokowany.

<!-- Nie spełnia: zablokowane poniżej minimum; narzędzia użytkowników nie mogą tego zastąpić -->
<p style="line-height: 1.2 !important">…</p>

<!-- Poprawione: można zastąpić -->
<p style="line-height: 1.2">…</p>

<!-- Również w porządku: zablokowane, ale na wartości, która już spełnia minimum -->
<p style="line-height: 1.5 !important">…</p>

Jak Silktide to testuje

Znajduje elementy, których atrybut style deklaruje letter-spacing, word-spacing lub line-height z !important i które bezpośrednio zawierają widoczny tekst.
Oblicza zadeklarowaną wartość względem rozmiaru czcionki elementu.
Zgłasza element, gdy zablokowana wartość jest niższa niż minimum WCAG dla tej właściwości.

Odzwierciedla to reguły W3C ACT dla 1.4.12 (odstępy między literami, odstępy między wyrazami, wysokość wiersza).

Silktide nie oznacza odstępów z !important w arkuszach stylów — narzędzia użytkowników nadal mogą je zastąpić — i nie symuluje stosowania nadpisań odstępów w celu wykrywania uszkodzonych układów, czego obecnie nie robi żadne zautomatyzowane narzędzie. Zaliczona kontrola oznacza, że nic na stronie nie uniemożliwia użytkownikom dostosowania odstępów; sprawdzenie, czy układ pozostaje czytelny po dostosowaniu odstępów, jest szybkim testem ręcznym przy użyciu bookmarkletu odstępów w tekście.

Rozwiązywanie problemów

Styl wbudowany pochodzi z frameworka lub widżetu innej firmy

Biblioteki komponentów i osadzone skrypty czasami zapisują wbudowane style !important. Wciąż są one uwzględniane dla Twojej strony; sprawdź ustawienia dostawcy lub zgłoś mu ten problem.

Odstęp jest zablokowany na zgodnej wartości

Wartości równe lub wyższe od minimów WCAG przechodzą kontrolę nawet wtedy, gdy są zablokowane — zablokowanie line-height: 1.6 !important nikomu nie szkodzi, ponieważ wartość ta już przekracza wartość, do której użytkownicy by ją zwiększyli.