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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
|
---
title: 'ARIA: checkbox role'
slug: Web/Accessibility/ARIA/Roles/checkbox_role
translation_of: Web/Accessibility/ARIA/Roles/checkbox_role
---
<p>\{{ariaref}}</p>
<p><span class="seoSummary"><a class="external" href="https://www.w3.org/TR/wai-aria-1.1/#checkbox" title="http://www.w3.org/TR/wai-aria/roles#checkbox">checkbox role</a> используется для переключаемых интерактивных элементов управления. Элементы, содержащие <code>role="checkbox"</code> также должны включать <code>aria-checked</code> атрибут, чтобы продемонстрировать состояние чекбокса ассистивным технологиям.</span></p>
<pre class="brush: html"><span role="checkbox" aria-checked="false" tabindex="0" aria-labelledby="chk1-label">
</span> <label id="chk1-label">Remember my preferences</label></pre>
<p>Первое правило ARIA - если у нативного HTML элемента или атрибута присутствует необходимая семантика или поведение, следует использовать его, а не использовать другой элемент не по назначению, добавляя ARIA. Вместо этого лучше использовать <a href="/en-US/docs/Web/HTML/Element/input/checkbox">HTML checkbox</a> <code><a href="/en-US/docs/Web/HTML/Element/input/checkbox"><input type="checkbox"></a></code>, который изначально предоставляет необходимый функционал:</p>
<pre class="brush: html"><input type="checkbox" id="chk1-label">
<label for="chk1-label">Запомнить мои предпочтения</label></pre>
<h2 id="Описание">Описание</h2>
<p>Нативный <a href="/en-US/docs/Web/HTML/Element/input/checkbox">HTML checkbox</a> элемент управления может находиться только в двух состояниях отмеченности - "отмечен" или "не отмечен", с <a href="/en-US/docs/Web/HTML/Element/input/checkbox#Indeterminate_state_checkboxes">неопределённым</a> состоянием, устанавливаемым с помощью JavaScript. Аналогично элемент с <code>role="checkbox"</code> может находиться в трёх состояниях, обозначенных через <code>aria-checked</code> атрибут: <code>true</code>, <code>false</code>, or <code>mixed</code>.</p>
<p>Поскольку чекбокс является интерактивным элементом, он должен быть фокусируемым и доступным при помощи клавиатуры. Если роль установлена для нефокусируемого элемента, чтобы исправить ситуацию, используйте атрибут <code>tabindex</code>. Ожидаемый способ активации чекбокса при помощи клавиатуры - <kbd>Пробел</kbd> .</p>
<p>Разработчику необходимо динамически изменять значение атрибута <code>aria-checked</code> при активации чекбокса.</p>
<h3 id="Связанные_WAI-ARIA_Роли_Состояния_и_Свойства">Связанные WAI-ARIA Роли, Состояния, и Свойства</h3>
<dl>
</dl>
<dl>
<dt>aria-checked</dt>
<dd>
<p>Значение <code>aria-checked</code> определяет состояние чекбокса. Этот атрибут может принимать одно из трёх значений:</p>
<p><code>true</code><br>
Чекбокс отмечен<br>
<code>false</code><br>
Чекбокс не отмечен<br>
<code>mixed</code><br>
Чекбокс частично отмечен, или в неопределённом состоянии</p>
</dd>
<dt>tabindex="0"</dt>
<dd>Делает элемент фокусируемым, так что пользователь ассистивных технологий может сразу перейти к нему и начать читать.</dd>
</dl>
<h3 id="Взаимодействие_с_клавиатурой">Взаимодействие с клавиатурой</h3>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Клавиша</th>
<th scope="col">Функция</th>
</tr>
<tr>
<td><kbd>Пробел</kbd></td>
<td>Активирует чекбокс</td>
</tr>
</tbody>
</table>
<h3 id="Необходимый_JavaScript">Необходимый JavaScript</h3>
<h4 id="Необходимый_обработчики_событий">Необходимый обработчики событий</h4>
<dl>
<dt>onclick</dt>
<dd>Обрабатывает клики, которые изменяют состояние чекбокса, меняя значение атрибута <code>aria-checked</code> и внешний вид чекбокса так, чтобы он выглядел отмеченным млм неотмеченным для зрячего пользователя.</dd>
<dt>onKeyPress</dt>
<dd>Обрабатывает случай, когда пользователь нажимает <kbd>Пробел</kbd> для смены состояния чекбокса путём изменения значения атрибута <code>aria-checked</code> и внешнего вида чекбокса так, чтобы он выглядел отмеченным млм неотмеченным для зрячего пользователя.</dd>
</dl>
<dl>
</dl>
<h3 id="Примеры">Примеры</h3>
<p>Пример ниже создаёт простой чекбокс, используя CSS и JavaScript для обработки отмеченного и неотмеченного состояний элемента.</p>
<h4 id="HTML">HTML</h4>
<pre class="brush: html"><span role="checkbox" id="chkPref" aria-checked="false" onclick="changeCheckbox()" onKeyPress="changeCheckbox()"
tabindex="0" aria-labelledby="chk1-label"></span>
<label id="chk1-label" onclick="changeCheckbox()" onKeyPress="changeCheckbox()">Запомнить мои предпочтения</label></pre>
<h4 id="CSS">CSS</h4>
<pre class="brush: css">[role="checkbox"] {
padding:5px;
}
[aria-checked="true"]::before {
content: "[x]";
}
[aria-checked="false"]::before {
content: "[ ]";
}</pre>
<h4 id="JavaScript">JavaScript</h4>
<pre class="brush: js">function changeCheckbox(event) {
let item = document.getElementById('chkPref');
switch(item.getAttribute('aria-checked')) {
case "true":
item.setAttribute('aria-checked', "false");
break;
case "false":
item.setAttribute('aria-checked', "true");
break;
}
}</pre>
<p>{{EmbedLiveSample("Examples", 230, 250)}}</p>
<h2 id="Проблемы_доступности">Проблемы доступности</h2>
<p>Когда <code>checkbox</code> роль добавлена к элементу, юзер агент должен сделать следующее:</p>
<ul>
<li>Показать элемент как элемент с функциями чекбокса для API доступности.</li>
<li>Когда значение aria-checked меняется, отправить доступное событие изменения состояния.</li>
</ul>
<p>Продукты, использующие ассистивные технологии должны сделать следующее:</p>
<ul>
<li>Программы чтения с экрана должны объявить элемент как чекбокс и при необходимости предоставить инструкции о том, как его активировать.</li>
</ul>
<div class="note"><strong>Замечание:</strong> Мнения относительно того, как ассистивные технологии должны работать в таких случаях, отличаются. Информация, приведённая выше, также одно из таких мнений, и не является нормативом.</div>
<h2 id="Лучшие_практики">Лучшие практики</h2>
<p>Первое правило ARIA - если у нативного HTML элемента или атрибута присутствует необходимая семантика или поведение, следует использовать его, а не использовать другой элемент не по назначению, добавляя ARIA, чтобы сделать его доступным. По существу, рекомендуется использовать нативный <a href="/en-US/docs/Web/HTML/Element/input/checkbox">HTML checkbox</a> вместо воспроизведения функциональности чекбокса с помощью JavaScript и ARIA.</p>
<h2 id="Смотрите_также">Смотрите также:</h2>
<ul>
<li><code><a href="/en-US/docs/Web/HTML/Element/input/checkbox"><input type="checkbox"></a></code></li>
<li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Radio_Role">ARIA: radio role</a></li>
<li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Menuitem_Role">ARIA: menuitem role</a></li>
<li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Menuitemcheckbox_Role">ARIA: menuitemcheckbox role</a></li>
<li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Menuitemradio_Role">ARIA: menuitemradio role</a></li>
<li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Switch_role">ARIA: switch role</a></li>
<li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Option_role">ARIA: option role</a></li>
</ul>
<p> </p>
|
