Część tekstu przewija się i nie da się jej zatrzymać

Strona używa przestarzałego elementu <marquee>, zwykle przewijanego paska typu „Darmowa dostawa od 200 zł” lub zapowiedzi wyprzedaży.

Ten tekst przetłumaczono automatycznie i nie został jeszcze sprawdzony przez native speakera.

Dlaczego to ważne dla Twoich klientów

Ruchomy tekst jest dla wielu osób trudny lub niemożliwy do przeczytania i odciąga uwagę od produktu albo formularza. Ponieważ nie da się go zatrzymać, osoby z trudnościami w skupieniu uwagi, słabowidzące lub z dysleksją mogą w ogóle nie zauważyć komunikatu, a użytkownicy czytników ekranu mogą usłyszeć go w mylący sposób.

Kogo to dotyczy

osoby z trudnościami w skupieniu uwagi
osoby słabowidzące
osoby z dysleksją lub trudnościami w czytaniu
osoby korzystające z czytników ekranu

Jak to naprawić

Element <marquee> należy zastąpić statycznym tekstem, np. zwykłym paskiem ogłoszeń. Jeśli ruch jest potrzebny, warto zbudować go w CSS z obsługą prefers-reduced-motion i dodać widoczny przycisk pauzy; wszystko, co porusza się dłużej niż pięć sekund, musi dać się wstrzymać, zatrzymać lub ukryć.

W Shopify

W motywach Shopify rzadkie; zwykle pochodzi ze starej aplikacji paska ogłoszeń lub własnego HTML wklejonego do sekcji. Należy zastąpić go wbudowanym paskiem ogłoszeń motywu lub statycznym tekstem.

W Shoptet (CZ)

Zwykle pochodzi z własnego HTML dodanego do sklepu (baner lub tekst w nagłówku). Element <marquee> należy zastąpić statycznym tekstem we własnym kodzie.

W PrestaShop

Zwykle pochodzi ze starego modułu lub własnego HTML w bloku CMS albo szablonie .tpl motywu. Należy zastąpić go statycznym tekstem lub paskiem, który można wstrzymać.

W WooCommerce

Zwykle pochodzi ze starego motywu, wtyczki przewijanego paska lub HTML wklejonego do widżetu albo bloku kreatora stron. Należy zastąpić go statycznym tekstem lub paskiem, który można wstrzymać.

Normy

Normy
Norma	Punkt
WCAG 2.2	2.2.2 (A) Pause, Stop, Hide
WCAG 2.1	2.2.2 (A) Pause, Stop, Hide
WCAG 2.0	2.2.2 (A) Pause, Stop, Hide
EN 301 549 4.1.1	9.2.2.2
EN 301 549 3.2.1	9.2.2.2
Section 508 2017	E205.4
ДСТУ EN 301 549 2022	9.2.2.2

Automatyczny test: reguła axe-core marquee. dequeuniversity.com, github.com, www.w3.org

Niektóre nagłówki to tylko pogrubiony lub duży tekst
WCAG 1.3.1 A
Strona nie określa, w jakim jest języku
WCAG 3.1.1 A
Niektórych przewijanych obszarów nie da się obsłużyć klawiaturą
WCAG 2.1.1 A
Niektóre komórki tabeli wskazują niewłaściwe nagłówki
WCAG 1.3.1 A

Wszystkie reguły, które sprawdzamy