WCAG 2.1.1 Клавіатура

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

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

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

Єдиний виняток — коли сама функція потребує введення, яке залежить від траєкторії руху користувача, а не лише від кінцевих точок, наприклад малювання від руки. Виняток стосується функції, а не способу введення: введення тексту рукописом використовує траєкторію, але саме введення тексту її не потребує, тож воно однаково має працювати з клавіатури.

Пропонувати додатково мишу, дотик чи інші способи введення можна і варто.

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

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

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

Автоматично: наш сканер позначає кілька шаблонів, пов'язаних із клавіатурою: області з прокруткою, які не отримують фокус, iframe з інтерактивним вмістом, вилученим із порядку переходу за Tab, і серверні карти зображень (правила в нашій бібліотеці правил). Він не може визначити, чи працює кожна функція з клавіатури, тож основна перевірка — ручна.

Вручну: відкладіть мишу і пройдіть справжню покупку. Використовуйте Tab і Shift+Tab для переміщення, Enter — щоб переходити за посиланнями і натискати кнопки, пробіл — для кнопок і прапорців, стрілки — всередині меню, повзунків і груп перемикачів, Esc — щоб закривати діалоги. Відкрийте меню, відфільтруйте категорію, виберіть варіант, додайте в кошик, застосуйте промокод і дійдіть до кроку оплати. Кожна дія, яку можна зробити мишею, має бути можливою і так.

Як виправити

• Використовуйте нативні елементи HTML — <button>, <a href>, <input>, <select>: вони за замовчуванням працюють із клавіатури.
• Якщо мусите створити власний віджет, дайте йому tabindex="0", роль ARIA й обробники клавіш за шаблоном WAI-ARIA Authoring Practices для цього віджета.
• Зробіть так, щоб меню, які відкриваються при наведенні, відкривалися й при фокусі або клавішею Enter і залишалися відкритими, поки фокус усередині.
• Перевірте застосунки теми й плагіни (відгуки, чат, обране) — багато проблем із клавіатурою походить від сторонніх віджетів.

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

• 2.1.2 Повне керування з клавіатури — фокус клавіатури завжди має могти покинути компонент.
• 2.4.3 Порядок переміщення фокуса — порядок зупинок за Tab має бути логічним.
• 2.4.7 Видимий фокус — користувачі мають бачити, де фокус клавіатури.

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

Що вимагає WCAG 2.1.1 «Клавіатура»?

Кожна функція вмісту має працювати через інтерфейс клавіатури, без потреби в особливому таймінгу окремих натискань. Введення мишею й дотиком можна пропонувати додатково, але не замість клавіатури.

Чи є виняток із вимоги щодо клавіатури?

Лише для функцій, де саме завдання залежить від траєкторії руху, а не лише від початкової та кінцевої точок, як-от малювання від руки чи підпис. Введення тексту рукописом не підпадає під виняток, бо саме введення тексту траєкторії не потребує.

Чи може автоматичний інструмент перевірити доступність з клавіатури?

Лише частково. Сканер може знайти деякі шаблони, як-от області з прокруткою, які не отримують фокус. Чи справді кожне меню, фільтр і крок оформлення замовлення працює з Tab, Enter, пробілом і стрілками, доводиться пробувати вручну.