WCAG 2.4.3 Порядок переміщення фокуса

Критерій успіху 2.4.3 потрібен для того, щоб користувачі клавіатури й програм зчитування з екрана проходили інтерактивні елементи сторінки в логічному порядку і тому розуміли сторінку та могли нею користуватися. Це рівень A, і він входить до EN 301 549 (пункт 9.2.4.3; в Україні — ДСТУ EN 301 549:2022).

Що вимагає критерій

Якщо вебсторінкою можна переміщатися послідовно (наприклад, клавішею Tab) і послідовність переміщення впливає на зміст чи роботу, елементи, що отримують фокус, отримують його в порядку, який зберігає зміст і працездатність.

Порядок фокуса не мусить копіювати візуальний макет піксель у піксель. Порушення — коли порядок робить вміст заплутаним або непридатним. Серед задокументованих W3C порушень:

• використання tabindex для створення порядку, який ламає зміст чи роботу;
• розміщення діалогів чи меню в порядку фокуса далеко від елемента, що їх відкриває.

Типові помилки в інтернет-магазині

• tabindex="1", "2" … на елементах шапки, тож фокус стрибає, перш ніж дійти до звичайного порядку;
• CSS-макет (flexbox order, розміщення в grid), що показує «Додати в кошик» поруч із ціною, але ставить кнопку в DOM останньою, після відгуків і схожих товарів;
• спливне вікно таблиці розмірів чи швидкого перегляду, додане в кінець сторінки, тож фокус не переходить у нього і користувачеві треба пройти Tab усю сторінку, щоб до нього дістатися;
• після закриття бічної панелі кошика фокус стрибає вгору сторінки замість повернутися на кнопку кошика;
• поля оформлення замовлення в іншому порядку, ніж видно на екрані (індекс перед вулицею).

Як перевірити

Автоматично: для цього критерію немає правила axe-core. Чи «зберігає порядок зміст» — це судження про сторінку, тож потрібна ручна перевірка. (Додатні значення tabindex наш сканер показує як попередження про добру практику, а не як порушення 2.4.3.)

Вручну: натискайте Tab від верху сторінки й стежте за індикатором фокуса. Чи проходить він шапку, основний вміст і футер у розумному порядку? На сторінках товарів: варіант, кількість, «Додати в кошик». Відкрийте кожне спливне вікно й бічну панель: фокус має переходити всередину, залишатися там, поки вони відкриті, і повертатися на тригер після закриття. Заповніть форму оформлення замовлення, користуючись лише Tab.

Як виправити

• Нехай порядок DOM відповідає візуальному й логічному; уникайте зміни порядку через CSS, коли це змінює зміст.
• Приберіть додатні значення tabindex; використовуйте 0 для власних елементів, що отримують фокус, і -1 для елементів, які отримують фокус скриптом.
• Відкриваючи діалог, переміщуйте фокус у нього; закриваючи — повертайте фокус на тригер.
• Вставляйте динамічний вміст (спливні вікна, повідомлення про помилки) в DOM поруч з елементом, до якого він належить.

Пов'язані критерії

• 2.1.1 Клавіатура — кожна функція має працювати з клавіатури.
• 2.4.7 Видимий фокус — користувачі мають бачити, де фокус.
• 2.4.11 Фокус не перекрито (мінімальні вимоги) — елементи у фокусі не можуть бути приховані.

Часті запитання

Чи має порядок фокуса збігатися з візуальним порядком?

Не точно. WCAG вимагає, щоб порядок зберігав зміст і працездатність. Невеликі розбіжності допустимі; стрибки, що роблять форму чи діалог заплутаними або непридатними, — порушення.

Чи є додатний tabindex порушенням WCAG?

Не автоматично, але W3C зараховує використання tabindex для створення порядку фокуса, який ламає зміст чи роботу, до поширених порушень. Значення більше 0 майже завжди до цього призводять, тож уникайте їх.

Куди має переміщатися фокус, коли відкривається спливне вікно?

У спливне вікно, а після закриття — назад на кнопку, яка його відкрила. W3C зараховує діалоги, розміщені в порядку фокуса далеко від свого тригера, до порушень 2.4.3.