JS властивість Element.accessKey
Загальний опис
Властивість HTMLElement.accessKey є важливим інструментом у веб-доступності, який дозволяє веб-розробникам назначити клавіші швидкого доступу до певних елементів HTML. Ця властивість призначена для підвищення ефективності навігації на веб-сторінці, дозволяючи користувачам швидко переходити до найважливіших елементів за допомогою клавіатури. Основна її корисність полягає в забезпеченні кращої доступності веб-сайтів для людей з обмеженими можливостями, а також у прискоренні доступу до ключових розділів веб-сайту для всіх користувачів.
Використання властивості accessKey є досить простим, але водночас вкрай ефективним. Для призначення клавіші швидкого доступу до елемента, достатньо встановити властивість accessKey для цього елемента, вказавши як значення одну символьну клавішу. Наприклад:
<button id="saveButton" accesskey="S">Зберегти</button>
У цьому прикладі клавіша "S" призначена як швидкий доступ до кнопки "Зберегти". Користувач може активувати цю кнопку, натиснувши комбінацію клавіш, специфічну для його операційної системи та браузера, наприклад Alt + S на Windows або Control + Option + S на macOS.
Для детальнішого використання можна динамічно змінювати або отримувати значення властивості accessKey через JavaScript, що дає можливість адаптувати веб-додаток до потреб користувачів або змін у інтерфейсі без перезавантаження сторінки. Наприклад, для динамічної зміни клавіші швидкого доступу для кнопки "Зберегти" можна використати наступний код:
document.getElementById("saveButton").accessKey = "D";
Тепер клавіша швидкого доступу для кнопки змінена на "D", і користувачі можуть активувати кнопку, використовуючи нову комбінацію клавіш.
Однак, використання властивості accessKey вимагає від розробників уважності до вибору клавіш, щоб уникнути конфліктів з уже існуючими гарячими клавішами браузера або операційної системи. Також важливо забезпечити, щоб інформація про клавіші швидкого доступу була легкодоступною для користувачів, особливо для тих, хто може використовувати читачі екрану або інші технології допомоги.
Враховуючи ці аспекти, властивість HTMLElement.accessKey є потужним інструментом у створенні доступних та користувацьки зручних веб-додатків, що дозволяє розробникам значно покращити навігацію на сайті за допомогою клавіатури.
| Порада: | При встановленні |
| Порада: | Пам'ятайте, що використання |
| Порада: | Документуйте та оновлюйте список використовуваних клавіш доступу на вашому веб-сайті, щоб уникнути дублювання та спростити орієнтацію користувачів. Це також допоможе уникнути конфліктів між клавішами, призначеними для різних елементів, і забезпечити кращий досвід взаємодії з сайтом. |
Синтаксис
HTMLElement.accessKeyЗначення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
17 |
5 |
6 |
12.1 |
12 |
| Переглядач | ||||
|---|---|---|---|---|
4.4 |
18 |
5 |
6 |
| Переглядач | ||
|---|---|---|
- |
- |
Приклади
У цьому прикладі ми покажемо, як застосувати властивість accessKey до HTML-елемента кнопки, щоб користувачі могли активувати цю кнопку, використовуючи лише клавіатуру. accessKey дозволяє визначити клавішу швидкого доступу для елемента, що робить навігацію по веб-сторінці більш ефективною, особливо для користувачів, які воліють або змушені використовувати клавіатуру замість миші.
<button id="saveButton" accessKey="s">Зберегти</button>У складнішому прикладі розглянемо використання accessKey у поєднанні з JavaScript, щоб динамічно змінювати клавіші швидкого доступу в залежності від дій користувача на сторінці. Це може бути корисно в додатках, де різні частини інтерфейсу мають бути доступні за допомогою клавіш швидкого доступу в різний час.
<button id="editButton" accessKey="e">Редагувати</button>
<script>
// Зміна accessKey для кнопки в залежності від умов
document.getElementById('editButton').addEventListener('click', function() {
this.accessKey = "d"; // Змінюємо клавішу швидкого доступу на "d"
alert('Клавіша швидкого доступу змінена на "d"');
});
</script>