Вимога WCAG A/AA Пріоритет: Серйозно
Користувачі клавіатури не можуть дістатися до вбудованого вмісту
Вбудований фрейм (iframe) містить посилання, кнопки чи поля форми, але сам фрейм має tabindex="-1", тож його виключено з порядку переходу клавіатурою.
Цей текст перекладено автоматично, носій мови його ще не вичитав.
Чому це важливо для ваших покупців
Люди, які пересуваються клавішею Tab, пропускають увесь фрейм. Якщо в ньому форма оплати карткою, карта доставки, календар бронювання чи чат, вони не можуть ними скористатися й можуть не завершити замовлення.
Кого це стосується
- користувачі лише клавіатури
- люди з порушеннями моторики
- користувачі програм зчитування з екрана
Як виправити
Приберіть tabindex="-1" з кожного <iframe> чи <frame>, що містить інтерактивний вміст, щоб фокус клавіатури міг потрапити всередину. Якщо фрейм суто декоративний або дублюється, приховайте його правильно (наприклад, aria-hidden і жодного фокусованого вмісту всередині). Для сторонніх вбудовувань перевірте код вбудовування або зверніться до постачальника.
У Shopify
Зазвичай це код вбудовування або застосунок, що додає tabindex="-1" до свого iframe (відео, відгуки, чат, оплата). Приберіть його з власного коду вбудовування; iframe застосунків має виправити їхній розробник.
У Shoptet (CZ)
Зазвичай це коди вбудовування чи віджети, додані через власний код. Приберіть tabindex="-1" з коду вбудовування; постачальникам віджетів, можливо, доведеться виправити власні фрейми.
У PrestaShop
Зазвичай це модулі, що вбудовують відео, карти чи форми оплати в iframe. Приберіть tabindex="-1" у шаблонах .tpl модуля чи теми; про сторонні модулі повідомте їхнього розробника.
У WooCommerce
Зазвичай це конструктори сторінок, слайдери чи плагіни (відео, карти, оплата, чат), які додають tabindex="-1" до iframe. Перевірте налаштування віджета чи плагіна й повідомте автора плагіна.
Стандарти
| Стандарт | Пункт |
|---|---|
| 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 |
Автоматична перевірка: правило axe-core frame-focusable-content.
dequeuniversity.com, github.com, www.w3.org
Схожі перевірки
-
Відвідувачі не можуть збільшити сторінку на смартфоні
WCAG 1.4.4 AA
-
Відео не мають субтитрів
WCAG 1.2.2 A
-
Назва чи значення стоїть поза своїм списком
WCAG 1.3.1 A
-
Деякі кнопки не мають назви
WCAG 4.1.2 A