Wymaganie WCAG A/AA Priorytet: Umiarkowane
Odstępów w tekście nie da się zmienić
W części tekstu interlinia, odstępy między literami lub słowami są zablokowane przez !important w atrybucie style, więc czytelnicy nie mogą ich zmienić własnymi ustawieniami.
Ten tekst przetłumaczono automatycznie i nie został jeszcze sprawdzony przez native speakera.
Dlaczego to ważne dla Twoich klientów
Osoby z dysleksją lub słabowidzące często zwiększają odstępy za pomocą rozszerzeń przeglądarki lub własnych stylów. Na tych elementach ich ustawienia są ignorowane, więc opisy produktów, ceny czy komunikaty pozostają trudne do przeczytania.
Kogo to dotyczy
- osoby z dysleksją
- osoby słabowidzące
- osoby z niepełnosprawnością intelektualną lub trudnościami poznawczymi
Jak to naprawić
Należy usunąć !important z line-height, letter-spacing i word-spacing w atrybutach style albo przenieść te style do arkusza CSS. Następnie warto sprawdzić, czy nic nie jest ucięte ani nie nachodzi na siebie przy interlinii 1,5 rozmiaru czcionki, odstępie akapitów 2, odstępie liter 0,12 i odstępie słów 0,16.
W Shopify
Zwykle style inline z kreatorów stron, aplikacji lub własnego HTML w motywie. Należy usunąć !important w kodzie Liquid lub w ustawieniach aplikacji czy kreatora.
W Shoptet (CZ)
Zwykle w treści wklejonej do edytora razem z formatowaniem. Warto wyczyścić formatowanie w edytorze; jeśli styl pochodzi z szablonu, zgłosić to do Shoptet lub partnera Shoptet.
W PrestaShop
Zwykle w treściach z edytora CMS lub w szablonach modułów. Należy usunąć odstępy inline z !important w plikach .tpl lub w edytowanej treści.
W WooCommerce
Często przy kreatorach stron i tekście wklejonym z Worda lub innych stron. Odstępy lepiej ustawić w ustawieniach stylu kreatora lub w arkuszu stylów motywu zamiast inline.
Normy
| Norma | Punkt |
|---|---|
| WCAG 2.2 | 1.4.12 (AA) Text Spacing |
| WCAG 2.1 | 1.4.12 (AA) Text Spacing |
| EN 301 549 4.1.1 | 9.1.4.12 |
| EN 301 549 3.2.1 | 9.1.4.12 |
| ДСТУ EN 301 549 2022 | 9.1.4.12 |
Automatyczny test: reguła axe-core avoid-inline-spacing.
dequeuniversity.com, github.com, www.w3.org
Podobne testy
-
Przyciski i linki są za małe, by wygodnie je dotknąć
WCAG 2.5.8 AA
-
Niektóre przełączniki i pola wyboru nie mają nazwy
WCAG 4.1.2 A
-
Linki w tekście wyglądają jak zwykły tekst
WCAG 1.4.1 A
-
Strona zawiera przestarzały kod migającego tekstu
WCAG 2.2.2 A