Wymaganie WCAG A/AA Priorytet: Poważne
Użytkownicy klawiatury nie mogą dotrzeć do osadzonej treści
Osadzona ramka (iframe) zawiera linki, przyciski lub pola formularza, ale sama ramka ma ustawione tabindex="-1", co wyłącza ją z kolejności nawigacji klawiaturą.
Ten tekst przetłumaczono automatycznie i nie został jeszcze sprawdzony przez native speakera.
Dlaczego to ważne dla Twoich klientów
Osoby poruszające się klawiszem Tab pomijają całą ramkę. Jeśli znajduje się w niej formularz płatności kartą, mapa dostawy, kalendarz rezerwacji lub czat, nie mogą z nich skorzystać i mogą nie dokończyć zamówienia.
Kogo to dotyczy
- osoby korzystające wyłącznie z klawiatury
- osoby z niepełnosprawnością ruchową
- osoby korzystające z czytników ekranu
Jak to naprawić
Należy usunąć tabindex="-1" z każdego elementu <iframe> lub <frame> z interaktywną treścią, aby fokus klawiatury mógł do niego trafić. Jeśli ramka jest czysto dekoracyjna lub zdublowana, należy ją poprawnie ukryć (np. aria-hidden i brak elementów, na które można przenieść fokus). W przypadku osadzeń zewnętrznych warto sprawdzić kod osadzenia lub zapytać dostawcę.
W Shopify
Zwykle kod osadzenia lub aplikacja, która dodaje tabindex="-1" do swojego iframe (wideo, opinie, czat, płatność). Należy go usunąć z własnego kodu osadzenia; ramki aplikacji musi poprawić ich twórca.
W Shoptet (CZ)
Zwykle kody osadzenia lub widżety dodane własnym kodem. Należy usunąć tabindex="-1" z kodu osadzenia; dostawcy widżetów mogą musieć poprawić własne ramki.
W PrestaShop
Zwykle moduły osadzające wideo, mapy lub formularze płatności w iframe. Należy usunąć tabindex="-1" w szablonach .tpl modułu lub motywu; moduły zewnętrzne należy zgłosić ich twórcy.
W WooCommerce
Zwykle kreatory stron, slidery lub wtyczki (wideo, mapy, płatności, czat) dodające tabindex="-1" do iframe. Warto sprawdzić ustawienia widżetu lub wtyczki i zgłosić problem autorowi wtyczki.
Normy
| Norma | Punkt |
|---|---|
| WCAG 2.2 | 2.1.1 (A) Keyboard |
| WCAG 2.1 | 2.1.1 (A) Keyboard |
| WCAG 2.0 | 2.1.1 (A) Keyboard |
| EN 301 549 4.1.1 | 9.2.1.1 |
| EN 301 549 3.2.1 | 9.2.1.1 |
| Section 508 2017 | E205.4 |
| ДСТУ EN 301 549 2022 | 9.2.1.1 |
Automatyczny test: reguła axe-core frame-focusable-content.
dequeuniversity.com, github.com, www.w3.org
Podobne testy
-
Na telefonie nie można powiększyć strony
WCAG 1.4.4 AA
-
Filmy nie mają napisów
WCAG 1.2.2 A
-
Nazwa lub wartość znajduje się poza swoją listą
WCAG 1.3.1 A
-
Niektóre przyciski nie mają nazwy
WCAG 4.1.2 A