Клавіатура (Keyboard)

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

Елементи у фокусі повинні мати інтерактивну семантику

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

Примітка: один важливий виняток для цього правила, якщо елемент має role="document" застосовану до нього, всередині інтерактивний контекст (наприклад, role="application"). У такому випадку фокусування вкладеного документа є єдиним способом повернення допоміжних технологій до неінтерактивного стану (часто званого "browse mode (режим перегляду)").

Більшість інтерактивних елементів фокусуються за замовчуванням; ви можете зробити елемент фокусним, додавши йому значення атрибуту tabindex=0. Однак, ви повинні додавати tabindex тільки в тому випадку, якщо Ви зробили елемент інтерактивним, наприклад, визначили відповідні обробники подій клавіатури.

Дивіться також

  • tabindex глобальний HTML атрибут
  • Обробники глобальних подій: onkeydown
  • Обробники глобальних подій: onkeyup

Уникайте використання tabindex атрибута який більше нуля

tabindex атрибут вказує на те, що елемент фокусується за допомогою клавіатури. Значення нуля вказує на те, що елемент є частиною встановленого за замовчуванням порядку фокусування, який ґрунтується на порядку розташування елементів в HTML-документі. Позитивне значення ставить елемент попереду тих, які знаходяться в порядку за замовчуванням; елементи з позитивними значеннями фокусуються в порядку їх tabindex значення (1, а потім 2, потім 3 і т.д.).

Це створює плутанину для користувачів лише клавіатури, коли порядок фокусування відрізняється від логічного ладу сторінки. Найкраща стратегія - структурувати HTML-документ так, щоб елементи фокусування перебували в логічному порядку, без потреби змінювати порядок їх tabindex значень.

Дивіться також

Клікабельні елементи повинні бути такими що фокусуються і мають інтерактивну семантику

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

Елемент є клікабельним, якщо має onclick встановлений обробник події. Ви можете зробити його таким що фокусує, додавши tabindex=0 значення атрибута для нього. Ви маєте змогу зробити його працездатним за допомогою клавіатури, визначивши onkeydown обробник подій; у більшості випадків дії обробника подій повинні бути однаковими для обох типів подій.

Дивіться також

  • tabindex глобальний HTML атрибут
  • Обробники глобальних подій: onkeydown
  • Обробники глобальних подій: onkeyup

Інтерактивні елементи повинні мати можливість бути активовані за допомогою клавіатури

Якщо користувач може взаємодіяти з елементом за допомогою сенсорного або вказівного пристрою, то цей елемент також повинен підтримувати взаємодію за допомогою клавіатури. Тобто, якщо ви визначили оброблювачі подій для подій дотику або кліку, їх також слід визначити для подій клавіатури. Обробники подій клавіатури повинні забезпечувати таку ж взаємодію, що і обробники сенсорних і клікабельних елементів.

Дивіться також

  • Обробники глобальних подій: onkeydown
  • Обробники глобальних подій: onkeyup

Інтерактивні елементи повинні бути такими що фокусуються

Якщо користувач може взаємодіяти з елементом (наприклад, за допомогою сенсорного або вказівного пристрою), то він також повинен мати можливість фокусування за допомогою клавіатури. Ви можете зробити його такими що фокусується, додавши tabindex=0 значення атрибута до нього. Це додасть елемент в список об'єктів, які можна сфокусувати, натиснувши кнопку Tab, в послідовності таких елементів, яка задана в HTML-документі.

Дивіться також

  • tabindex глобальний HTML атрибут

Елемент що фокусується повинен змінювати стиль при фокусуванні

Будь-який елемент, який може отримати фокус клавіатури, повинен мати помітний стиль, який вказує на те що елемент сфокусований. Ви можете зробити це за допомогою :focus CSS псевдоклас.

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

Якщо ви створюєте свої власні елементи фокусування, переконайтеся, що ви також визначаєте стиль фокусування для них.

Дивіться також