initial commit

2 files changed, 229 insertions, 0 deletions

diff --git a/files/ru/web/accessibility/aria/roles/checkbox_role/index.html b/files/ru/web/accessibility/aria/roles/checkbox_role/index.html
new file mode 100644
index 0000000000..b9eb71997d
--- /dev/null
+++ b/files/ru/web/accessibility/aria/roles/checkbox_role/index.html
@@ -0,0 +1,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">&lt;span role="checkbox" aria-checked="false" tabindex="0" aria-labelledby="chk1-label"&gt;
+&lt;/span&gt; &lt;label id="chk1-label"&gt;Remember my preferences&lt;/label&gt;</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">&lt;input type="checkbox"&gt;</a></code>, который изначально предоставляет необходимый функционал:</p>
+
+<pre class="brush: html">&lt;input type="checkbox" id="chk1-label"&gt;
+&lt;label for="chk1-label"&gt;Запомнить мои предпочтения&lt;/label&gt;</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">&lt;span role="checkbox" id="chkPref" aria-checked="false" onclick="changeCheckbox()" onKeyPress="changeCheckbox()"
+   tabindex="0" aria-labelledby="chk1-label"&gt;&lt;/span&gt;
+&lt;label id="chk1-label" onclick="changeCheckbox()" onKeyPress="changeCheckbox()"&gt;Запомнить мои предпочтения&lt;/label&gt;</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">&lt;input type="checkbox"&gt;</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>
diff --git a/files/ru/web/accessibility/aria/roles/index.html b/files/ru/web/accessibility/aria/roles/index.html
new file mode 100644
index 0000000000..b86909d5a7
--- /dev/null
+++ b/files/ru/web/accessibility/aria/roles/index.html
@@ -0,0 +1,80 @@
+---
+title: WAI-ARIA Roles
+slug: Web/Accessibility/ARIA/Roles
+tags:
+  - ARIA
+  - ARIA Roles
+  - Accessibility
+  - NeedsTranslation
+  - Reference
+  - Rôles
+  - TopicStub
+translation_of: Web/Accessibility/ARIA/Roles
+---
+<p class="summary">This page lists reference pages covering all the WAI-ARIA roles discussed on MDN. For a full list of roles, see <a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques">Using ARIA: Roles, States, and Properties</a></p>
+
+<p>{{SubpagesWithSummaries}}</p>
+
+<div class="hidden">
+<p>Please claim the role you want to work on by adding your name after the role's name: (old pages are linked from <a href="/en-US/docs/">https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques</a>). Ones for which the first draft is completed have been removed from the below list.</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Alertdialog_Role">alertdialog</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Banner_Role">banner</a> </li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Combobox_Role">Combobox</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Command_Role">Command</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Columnheader_Role">Columnheader </a>(Estelle)</li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Complementary_role">complementary</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Composite_Role">composite</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Definition_Role">Definition</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Directory_Role">Directory</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Feed_Role">Feed</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Gridcell_Role">Gridcell</a> (Eric E)</li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Group_Role">Group</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Input_Role">input</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Landmark_Role">landmark</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Link_Role">Link</a> - old page</li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Listbox_Role">listbox</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Log_Role">Log</a> - old page</li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Marquee_Role">Marquee</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Math_Role">math</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Menu_Role">menu</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Menubar_Role">menubar</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Menuiitem_Role">Menuitem</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Menuitemcheckbox_Role">Menuitemcheckbox</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Menuitemradio_Role">Menuitemradio</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/None_Role">none</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Note_Role">note</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Option_Role">Option</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Presentation_Role">presentation</a> </li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Progressbar_Role">Progressbar</a> - old page</li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Radio_Role">Radio</a> - old page</li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Radiogroup_Role">radiogroup</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Range_Role">range</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Region_Role">region</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Roletype_Role">roletype</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Rowheader_Role">rowheader</a>(Estelle)</li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Scrollbar_Role">Scrollbar</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Searchbox_Role">searchbox</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Section_Role">section</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Sectionhead_Role">sectionhead</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Select_Role">select</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Separator_Role">separator</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Slider_Role">Slider</a> - old page</li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Spinbutton_Role">Spinbutton</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Status_Role">Status</a> - old page</li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Structure_Role">structure</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Tab_role">tab</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Tablist_Role">tablist</a> (Michiel)</li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Tabpanel_Role">Tabpanel</a> (Michiel)</li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Term_Role">term</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Time_Role">Timer</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Toolbar_Role">toolbar</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Tooltip_Role">Tooltip</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Tree_Role">Tree</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Treegrid_Role">treegrid</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Treeitem_Role">Treeitem</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Widget_Role">widget</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Window_Role">window</a></li>
+</ul>
+</div>