1 files changed, 94 insertions, 0 deletions
diff --git a/files/uk/web/accessibility/understanding_wcag/keyboard/index.html b/files/uk/web/accessibility/understanding_wcag/keyboard/index.html
new file mode 100644
index 0000000000..1383c66354
--- /dev/null
+++ b/files/uk/web/accessibility/understanding_wcag/keyboard/index.html
@@ -0,0 +1,94 @@
+---
+title: Клавіатура (Keyboard)
+slug: Web/Accessibility/Understanding_WCAG/Keyboard
+tags:
+  - tabIndex
+  - клікабельні елементи
+  - фокус клавіатури
+  - інтерактивні елементи
+translation_of: Web/Accessibility/Understanding_WCAG/Keyboard
+---
+<div></div>
+
+<div>Щоб бути у повній мірі доступною, веб-сторінка повинна бути керованою за допомогою однієї лише клавіатури для доступу до неї і управління нею. Це відноситься до користувачів скрінрідерів (екранні зчитувачі), але може також включати і користувачів, у яких виникають проблеми з управлінням вказівним пристроєм, наприклад, мишею або трекболом, або чия миша не працює в даний момент, або які просто вважають за краще використовувати клавіатуру для введення, коли це можливо.</div>
+
+<h2 id="Елементи_у_фокусі_повинні_мати_інтерактивну_семантику">Елементи у фокусі повинні мати інтерактивну семантику</h2>
+
+<p>Якщо елемент можна сфокусувати за допомогою клавіатури, то він повинен бути інтерактивним; тобто користувач повинен мати можливість щось робити з цим елементом, якусь зміну (наприклад, активізувати посилання або змінити параметр).</p>
+
+<div class="blockIndicator note">
+<p><strong>Примітка: </strong>один важливий виняток для цього правила, якщо елемент має<strong> </strong><code>role="document" </code>застосовану до нього, <strong>всередині </strong>інтерактивний контекст (наприклад, <code>role="application"</code>). У такому випадку фокусування вкладеного документа є єдиним способом повернення допоміжних технологій до неінтерактивного стану (часто званого "browse mode (режим перегляду)").</p>
+</div>
+
+<p>Більшість інтерактивних елементів фокусуються за замовчуванням; ви можете зробити елемент фокусним, додавши йому значення атрибуту <code>tabindex=0</code>. Однак, ви повинні додавати <code>tabindex</code> тільки в тому випадку, якщо Ви зробили елемент інтерактивним, наприклад, визначили відповідні обробники подій клавіатури.</p>
+
+<h3 id="Дивіться_також">Дивіться також</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTML/Global_attributes/tabindex">tabindex</a> глобальний HTML атрибут</li>
+ <li>Обробники глобальних подій: <a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeydown">onkeydown</a></li>
+ <li>Обробники глобальних подій: <a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeyup">onkeyup</a></li>
+</ul>
+
+<h2 id="Уникайте_використання_tabindex_атрибута_який_більше_нуля">Уникайте використання <code>tabindex</code> атрибута який більше нуля</h2>
+
+<p><code>tabindex</code> атрибут вказує на те, що елемент фокусується за допомогою клавіатури. Значення нуля вказує на те, що елемент є частиною встановленого за замовчуванням порядку фокусування, який ґрунтується на порядку розташування елементів в HTML-документі. Позитивне значення ставить елемент попереду тих, які знаходяться в порядку за замовчуванням; елементи з позитивними значеннями фокусуються в порядку їх <code>tabindex</code> значення (1, а потім 2, потім 3 і т.д.).</p>
+
+<p>Це створює плутанину для користувачів лише клавіатури, коли порядок фокусування відрізняється від логічного ладу сторінки. Найкраща стратегія - структурувати HTML-документ так, щоб елементи фокусування перебували в логічному порядку, без потреби змінювати порядок їх <code>tabindex</code> значень.</p>
+
+<h3 id="Дивіться_також_2">Дивіться також</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTML/Global_attributes/tabindex">tabindex</a> глобальний HTML атрибут</li>
+ <li><a href="https://www.w3.org/WAI/WCAG21/Understanding/focus-order.html">Розуміння порядку фокусування</a></li>
+ <li><a href="http://adrianroselli.com/2014/11/dont-use-tabindex-greater-than-0.html">Не використовуйте tabindex більше 0</a></li>
+</ul>
+
+<h2 id="Клікабельні_елементи_повинні_бути_такими_що_фокусуються_і_мають_інтерактивну_семантику">Клікабельні елементи повинні бути такими що фокусуються і мають інтерактивну семантику</h2>
+
+<p>Якщо елемент можна натиснути вказівним пристроєм, наприклад, мишкою, то він також повинен бути таким що фокусується за допомогою клавіатури, і користувач повинен мати можливість щось робити, взаємодіючи з ним.</p>
+
+<p>Елемент є клікабельним, якщо має <code>onclick</code> встановлений обробник події. Ви можете зробити його таким що фокусує, додавши <code>tabindex=0</code> значення атрибута для нього. Ви маєте змогу зробити його працездатним за допомогою клавіатури, визначивши <code>onkeydown</code> обробник подій; у більшості випадків дії обробника подій повинні бути однаковими для обох типів подій.</p>
+
+<h3 id="Дивіться_також_3">Дивіться також</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTML/Global_attributes/tabindex">tabindex</a> глобальний HTML атрибут</li>
+ <li>Обробники глобальних подій: <a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeydown">onkeydown</a></li>
+ <li>Обробники глобальних подій: <a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeyup">onkeyup</a></li>
+</ul>
+
+<h2 id="Інтерактивні_елементи_повинні_мати_можливість_бути_активовані_за_допомогою_клавіатури">Інтерактивні елементи повинні мати можливість бути активовані за допомогою клавіатури</h2>
+
+<p>Якщо користувач може взаємодіяти з елементом за допомогою сенсорного або вказівного пристрою, то цей елемент також повинен підтримувати взаємодію за допомогою клавіатури. Тобто, якщо ви визначили оброблювачі подій для подій дотику або кліку, їх також слід визначити для подій клавіатури. Обробники подій клавіатури повинні забезпечувати таку ж взаємодію, що і обробники сенсорних і клікабельних елементів.</p>
+
+<h3 id="Дивіться_також_4">Дивіться також</h3>
+
+<ul>
+ <li>Обробники глобальних подій: <a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeydown">onkeydown</a></li>
+ <li>Обробники глобальних подій: <a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeyup">onkeyup</a></li>
+</ul>
+
+<h2 id="Інтерактивні_елементи_повинні_бути_такими_що_фокусуються">Інтерактивні елементи повинні бути такими що фокусуються</h2>
+
+<p>Якщо користувач може взаємодіяти з елементом (наприклад, за допомогою сенсорного або вказівного пристрою), то він також повинен мати можливість фокусування за допомогою клавіатури. Ви можете зробити його такими що фокусується, додавши <code>tabindex=0</code> значення атрибута до нього. Це додасть елемент в список об'єктів, які можна сфокусувати, натиснувши кнопку <kbd>Tab</kbd>, в послідовності таких елементів, яка задана в HTML-документі.</p>
+
+<h3 id="Дивіться_також_5">Дивіться також</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTML/Global_attributes/tabindex">tabindex</a> глобальний HTML атрибут</li>
+</ul>
+
+<h2 id="Елемент_що_фокусується_повинен_змінювати_стиль_при_фокусуванні">Елемент що фокусується повинен змінювати стиль при фокусуванні</h2>
+
+<p>Будь-який елемент, який може отримати фокус клавіатури, повинен мати помітний стиль, який вказує на те що елемент сфокусований. Ви можете зробити це за допомогою <code><a href="/en-US/docs/Web/CSS/:focus">:focus</a></code> CSS псевдоклас.</p>
+
+<p>Стандартні елементи фокусування, такі як посилання і поля вводу, за замовчуванням задаються браузером в спеціальному стилі, тому, можливо, вам не доведеться ставити стиль фокусування для таких елементів, якщо тільки ви не хочете, щоб стиль фокусування був більш характерним.</p>
+
+<p>Якщо ви створюєте свої власні елементи фокусування, переконайтеся, що ви також визначаєте стиль фокусування для них.</p>
+
+<h3 id="Дивіться_також_6">Дивіться також</h3>
+
+<ul>
+ <li><a href="https://www.w3.org/WAI/WCAG21/Techniques/css/C15.html">Застосування CSS для зміни формату представлення компонента UI, коли він отримує фокус.</a></li>
+</ul>