WCAG 2.1.2 Повне керування з клавіатури

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

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

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

Якщо для виходу потрібно більше, ніж стрілки без модифікаторів, Tab чи інші стандартні способи виходу, користувачеві треба повідомити, як вийти (наприклад, «натисніть Ctrl+M, щоб вийти з редактора»).

WCAG додає примітку: оскільки пастка може завадити користуватися всією сторінкою, увесь вміст сторінки має відповідати цьому критерію, зокрема вбудований сторонній вміст (це вимога відповідності 5, невтручання).

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

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

• вбудоване відео, 3D-переглядач товару чи мапа, що перехоплює Tab і ніколи не відпускає;
• віджет чату чи підтримки в iframe, куди фокус потрапляє і не може повернутися на сторінку;
• скрипт «пастки фокуса» на спливному вікні (розсилка, колесо знижок, перевірка віку) без способу закрити його з клавіатури;
• поле форматованого тексту для відгуків, яке використовує Tab для відступу і не каже користувачеві, як вийти;
• календар вибору дати в оформленні замовлення, що утримує фокус у сітці календаря.

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

Автоматично: для цього критерію немає правила axe-core. Чи може фокус покинути компонент, залежить від того, як скрипти реагують на клавіші, а сканування не може цього надійно змоделювати, тож потрібна ручна перевірка.

Вручну: почніть угорі сторінки й натискайте Tab, доки не дійдете до футера, потім Shift+Tab назад угору. Переконайтеся, що проходите крізь кожен вбудований плеєр, iframe, спливне вікно й віджет в обох напрямках. Відкрийте кожен діалог і спробуйте Esc і кнопку «Закрити». Якщо застрягли, запишіть де; якщо компонент пропонує особливу клавішу виходу, перевірте, що її пояснено на екрані.

Як виправити

• Не перехоплюйте Tab і Shift+Tab, якщо тільки ви навмисно не утримуєте фокус у відкритому модальному вікні.
• Кожне модальне чи спливне вікно потребує кнопки «Закрити», яка отримує фокус, і має закриватися клавішею Esc; потім поверніть фокус на елемент, який його відкрив.
• Перевіряйте сторонні вбудовані блоки перед додаванням, а ті, що створюють пастку, замінюйте чи обгортайте.
• Якщо компоненту справді потрібен Tab (редактор коду чи тексту), покажіть коротку інструкцію, як вийти.

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

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

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

Що таке клавіатурна пастка?

Місце на сторінці, куди фокус клавіатури може потрапити, але звідки не може вийти за допомогою клавіатури, наприклад вбудований відеоплеєр чи віджет, що «з'їдає» клавішу Tab. Користувач застрягає і часто мусить перезавантажувати сторінку.

Чи є модальний діалог, що утримує фокус усередині, клавіатурною пасткою?

Ні, якщо користувач може з нього вийти, наприклад клавішею Esc чи досяжною кнопкою «Закрити». Утримання фокуса у відкритому модальному вікні — рекомендований шаблон; пастка — це коли виходу немає.

Чому 2.1.2 стосується кожної частини сторінки?

Бо одна пастка може заблокувати всю сторінку. WCAG зараховує 2.1.2 до вимоги невтручання, тож йому має відповідати весь вміст, навіть той, на який ви не спираєтеся для відповідності.