1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
|
---
title: tabindex
slug: Web/HTML/Global_attributes/tabindex
tags:
- HTML
- Tab
- keyboard
- tabIndex
- Глобальні атрибути
- клавіатура
translation_of: Web/HTML/Global_attributes/tabindex
original_slug: Web/HTML/Загальні_атрибути/tabindex
---
<div>{{HTMLSidebar("Global_attributes")}}</div>
<p><strong><code>tabindex</code></strong> <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes">глобальний атрибут</a> вказує, що його елемент може бути сфокусований, і коли саме він бере участь в послідовності навігації за допомогою клавіатури<span class="seoSummary"> (зазвичай за допомогою клавіші <kbd>Tab</kbd> , звідти і назва).</span></p>
<div>{{EmbedInteractiveExample("pages/tabbed/attribute-tabindex.html","tabbed-standard")}}</div>
<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p>
<p>Він приймає в якості значення ціле позитивне або негативне число з різними наслідками в залежності від величини цого числа:</p>
<ul>
<li><em>Негативне значення</em> (зазвичай <code>tabindex="-1"</code>) має на увазі, що елемент недоступний під час послідовної навігації за допомогою клавіатури, але може бути сфокусований за допомогою Javascript або за допомогою візуального інтерфейсу. Переважно рекомендується створювати доступні віджети за допомогою JavaScript.
<div class="note">
<p>Негативне значення корисне при наявності матеріалів поза екраном, які з'являються в певний момент події. Користувач не зможе сфокусувати будь-якої елемент з негативним значенням. Негативний <code>tabindex</code> блокує навігацію клавіатурою, але скрипт може виконати це за допомогою виклику <code>focus()</code> <a href="/en-US/docs/Web/API/HTMLElement/focus">method</a>.</p>
</div>
</li>
<li><code>tabindex="0"</code> передбачає, що елемент повинен приймати фокус при послідовній навігації за допомогою клавіатури, але його лад визначається системою розміщення у файлі додатка.</li>
<li><em>Позитивне значення</em> передбачає, що елемент повинен приймати фокус при послідовній навігації за допомогою клавіатури, при цьому його порядок визначається величиною значення числа. Тобто, <code>tabindex="4"</code> фокусується попереду <code>tabindex="5"</code>, але після <code>tabindex="3"</code>. Якщо кілька елементів мають одне й те саме позитивне значення <code>tabindex</code> то порядок їх розташування відносно один одного визначається за їх позицією в исходнику документа. Максимальне значення для tab-індекса становить 32767. <u>Якщо не вказано, він отримує значення за замовчуванням 0.</u>
<div class="warning">
<p>Уникайте використання <code>tabindex</code> зі значенням больше 0. Це значно заважає людям, які використовують допоміжні технології для навігації і роботи з вмістом веб-сторінки. Замість цього створіть документ з елементами в логічній послідовності.</p>
</div>
</li>
</ul>
<p>Якщо ви встановите атрибут <code>tabindex</code> з {{htmlelement("div")}}, то його нащадки не зможуть бути прокручені за допомогою клавіш клавіатури зі стрілками, якщо тільки ви не встановите <code>tabindex</code> на вміст також. <a href="https://jsfiddle.net/jainakshay/0b2q4Lgv/">Ознайомтеся з цією статтею, щоб зрозуміти ефект від <code>tabindex</code></a>.</p>
<h2 id="Вимоги_доступності">Вимоги доступності</h2>
<p>Уникайте використання атрибута <code>tabindex</code> в поєднанні з не-<a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Interactive_content">інтерактивним вмістом</a> , щоб зробити щось, призначене для інтерактивної фокусування при введенні з клавіатури. Прикладом цього може служити використання елемента {{HTMLElement ("div")}} для опису кнопки, а не елементу {{HTMLElement ("button")}}.</p>
<p>Інтерактивні компоненти, створені з використанням неінтерактивних елементів, у <a href="/en-US/docs/Learn/Accessibility/What_is_accessibility#Accessibility_APIs">дереві доступності</a> не відображаються. Це не дозволяє допоміжним технологіям керувати і маніпулювати цими компонентами. Вміст має бути описано семантично з використанням інтерактивних елементів ({{HTMLElement ("a")}}, {{HTMLElement ("button")}}, {{HTMLElement ("details")}}, {{HTMLElement ("input" )}}, {{HTMLElement ("select")}}, {{HTMLElement ("textarea")}}, і т.д.) і т.п.). Ці елементи мають вбудовані ролі і стани, що передають статус доступності. В іншому випадку ці компоненти повинні управлятися за допомогою <a href="/en-US/docs/Web/Accessibility/ARIA">ARIA</a>.</p>
<ul>
<li><a href="https://developer.paciellogroup.com/blog/2014/08/using-the-tabindex-attribute/">Використання атрибута табіндекс | The Paciello Group</a></li>
</ul>
<h2 id="Специфікації">Специфікації</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('HTML WHATWG', "interaction.html#attr-tabindex", "tabindex")}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td>Ніяких змін порівняно з останнім snapshot, {{SpecName('HTML5.1')}}.</td>
</tr>
<tr>
<td>{{SpecName('HTML5.1', "editing.html#the-tabindex-attribute", "tabindex")}}</td>
<td>{{Spec2('HTML5.1')}}</td>
<td>Snapshot of {{SpecName('HTML WHATWG')}}, без змін від {{SpecName('HTML5 W3C')}}.</td>
</tr>
<tr>
<td>{{SpecName('HTML5 W3C', "editing.html#attr-tabindex", "tabindex")}}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
<td>Snapshot of {{SpecName('HTML WHATWG')}}. From {{SpecName("HTML4.01")}}, атрибут наразі підтримується на всіх елементах (global attributes).</td>
</tr>
<tr>
<td>{{SpecName('HTML4.01', 'interact/forms.html#adef-tabindex', 'tabindex')}}</td>
<td>{{Spec2('HTML4.01')}}</td>
<td>Підтримується лише на {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}}, and {{HTMLElement("textarea")}}.</td>
</tr>
</tbody>
</table>
<h2 id="Сумісність_з_браузерами">Сумісність з браузерами</h2>
<p class="hidden">Таблиця сумісності на цій сторінці складена з структурованих даних. Якщо Ви хочете внести свій внесок в дані, відвідайте https://github.com/mdn/browser-compat-data і відправте нам запит на використання даних.</p>
<p>{{Compat("html.global_attributes.tabindex")}}</p>
<h2 id="Подивіться_також">Подивіться також</h2>
<ul>
<li>Усі <a href="/en-US/docs/Web/HTML/Global_attributes">глобальні атрибути</a></li>
<li>{{domxref("HTMLElement.tabIndex")}} тотожний цьому атрибуту</li>
<li>Проблеми доступності з табіндексом: см. <a href="http://adrianroselli.com/2014/11/dont-use-tabindex-greater-than-0.html">Не використовуйте табіндекс більше 0.</a> від Adrian Roselli</li>
</ul>
|
