ARIA

Accessible Rich Internet Applications (ARIA) позволяет сделать веб-контент и приложения более доступными для людей с ограниченными возможностями. Например, ARIA делает доступным навигационные маркеры, JavaScript виджеты, подсказки на форме, сообщения об ошибках, автоматические обновления и многое другое. ARIA - это набор специальных атрибутов, которые могут быть добавлены к HTML-элементам для придания им семантической информации. Атрибуты role и aria-* определяют тип объекта (такие, как кнопка, оповещение или ползунок). Дополнительные ARIA атрибуты предоставляют другие полезные возможности, такие как описания для форм или текущее значение индикатора выполнения.

Роль presentation используется для удаления семантического значения из элемента и любых связанных с ним дочерних элементов, т.е семантика возвращается к исходной и очищается от других ролей.

<div style="float:left;">Содержимое слева.</div>
<div style="float:right;">Содержимое справа.</div>
<div role="presentation" style="clear:both;"></div> <!-- Используется для очистки выравнивания -->

Сообщение с важной и обычно чувствительной ко времени информацией.

<div role="alert" aria-live="assertive">Срок действия вашей сессии истекает через 60 секунд.</div>

Обратите внимание, что в теге одновременно две роли role = "alert" и aria-live = "assertive". Это синонимичные атрибуты, но некоторые скринридеры поддерживают только один из них. Используя оба одновременно, мы, таким образом, максимизируем шансы, что данная область будет функционировать должным образом.

Данная роль используется для диалога, содержащего предупреждающее сообщение.

<div role="alertdialog">
  <h1>Предупреждение</h1>
  <div role="alert">Срок действия вашей сессии истекает через 60 секунд.</div>
</div>

Область, объявленная как веб-приложение. В этом примере приложение представляет собой простой калькулятор, который может складывать два числа.

<div role="application">
  <h1>Калькулятор</h1>
  <input id="num1" type="text"> + <input id="num2" type="text"> =
  <span id="result"></span>
</div>

Раздел страницы, состоящий из структуры, которая образует независимую часть документа, страницы или сайта.

Установка роли ARIA и/или атрибута aria-*, которая соответствует неявной семантике ARIA по умолчанию, не нужна и не рекомендуется, так как эти свойства уже заданы браузером.

<article>
  <h1>Моя первая статья</h1>
  <p>Lorem ipsum...</p>
</article>

Вы можете (не рекомендуется) использовать role="article" в не семантических элементах

<div role="article">
  <h1>Моя первая статья</h1>
  <p>Lorem ipsum...</p>
</div>Day

Область, которая содержит контент преимущественно ориентированный на сайт, а не специфичный для страницы.

<div role="banner">
  <h1>Мой сайт</h1>
  <ul>
    <li><a href="/">Домой</a></li>
    <li><a href="/about">О нас</a></li>
    <li><a href="/contact">Контакты</a></li>
  </ul>
</div>

Область, позволяющая выполнять действия, вызванные пользователем при щелчке или нажатии.

<button role="button">Добавить</button>

Ячейка в табличном контейнере.

<table>
  <thead>
    <!-- и т.д. -->
  </thead>
  <tbody>
    <td role="cell">95</td>
    <td role="cell">14</td>
    <td role="cell">25</td>
  </tbody>
</table>

Проверяемое поле, которое имеет три возможных значения: true, false или смешанное.

<p>
  <input type="checkbox" role="checkbox" aria-checked="false">
  Я согласен с правилами
<p>

Ячейка, содержащая заголовочную информацию для столбца

<table role="grid">
  <thead>
    <tr>
      <th role="columnheader">День 1</th>
      <th role="columnheader">День 2</th>
      <th role="columnheader">День 3</th>
    </tr>
  </thead>
  <tbody>
  <!-- etc -->
  </tbody>
<table>

Представляет раскрывающийся список, часто похожий на текстовое поле, в котором пользователи могут вводить пункт, чтобы выбрать параметр, или вообще ввести произвольный текст в качестве нового элемента в списке.

<input type="text" role="combobox" aria-expanded="false">

Как правило, вы должны использовать JavaScript для создания функций ввода и раскрывающегося списка. Также часто эта роль используется в элементах select и datalist.

Вспомогательный раздел документа, предназначенный для дополнения основного содержимого на аналогичном уровне в иерархии DOM, но который остается значимым и когда он отделен от основного контента.

<div role="complementary">
  <h2>Другие статьи</h2>
  <ul>
  <!-- etc -->
  </ul>
</div>

Важная область, содержащая информацию о родительском документе.

<p role="contentinfo">
 Автор: Никола Тесла<br>
 Публикация: 12 июля 1922
</p>

Определение термина или понятия.

<span role="term" aria-labelledby="def1">Любовь</span>
<span id="def1" role="definition">сильное чувство глубокой привязанности.</span>

Диалоговое окно представляет собой окно приложения, предназначенное для прерывания текущей работы приложения, чтобы побудить пользователя ввести информацию или потребовать ответа.

<div role="dialog">
  <p>Вы уверены?</p>
  <button role="button">Да</button>
  <button role="button">Нет</button>
</div>

Список ссылок на элементы группы, например оглавление.

<ul role="directory">
  <li><a href="/chapter-1">Глава 1</a></li>
  <li><a href="/chapter-2">Глава 2</a></li>
  <li><a href="/chapter-3">Глава 3</a></li>
</ul>

Область, содержащая связанную информацию, объявленную как содержимое документа. Следует разделять с role="application", используемой для веб-приложения.

<div role="document">
 <h1>Жизнь Николы Теслы</h1>
 <p>Lorem ipsum...</p>
</div>

Область, содержащая коллекцию элементов и объектов, которые в целом объединяются для создания формы. Использование семантически корректного HTML-элемента <form> подразумевает семантику по умолчанию ARIA, то есть role = form не требуется.

Установка роли ARIA и/или атрибута aria-*, которая соответствует неявной семантике ARIA по умолчанию, не нужна и не рекомендуется, так как эти свойства уже заданы браузером.

<form action="">
 <fieldset>
  <legend>форма для регистрации</legend>
  <div>
    <label for="username">Ваше имя</label>
    <input type="text" id="username" aria-describedby="username-tip" required />
    <div role="tooltip" id="username-tip">Ваше имя - ваш адрес электронной почты.</div>
  </div>
  <div>
    <label for="password">Ваш пароль</label>
    <input type="text" id="password" aria-describedby="password-tip" required />
    <div role="tooltip" id="password-tip">Был отправлен вам по электронной почте, когда вы зарегистрировались.</div>
  </div>
 </fieldset>
</form>

Не рекомендуется использовать role = "form" для не семантических элементов.

<div role=form>
  <input type="email" placeholder="Ваш адрес электронной почты">
  <button>Зарегистрироваться</button>
</div>

Сетка представляет собой интерактивный элемент управления, который содержит ячейки табличных данных, расположенных в строках и столбцах, таких как таблица.

<table role="grid">
 <thead>
 <!-- etc -->
 </thead>
 <tbody>
 <!-- etc -->
 </tbody>
</table>

Ячейка в сетке с ролью grid или treegrid.

<table role="grid">
  <thead>
  <!-- etc -->
  </thead>
  <tbody>
    <tr>
      <td role="gridcell">17</td>
      <td role="gridcell">64</td>
      <td role="gridcell">18</td>
    </tr>
  </tbody>
<table>

Данная роль используется для идентификации набора объектов пользовательского интерфейса, которые, в отличие от роли region , не предназначены для включения в оглавление или сводку страниц (например, структуры, которые динамически создаются сценарием или вспомогательным технологии). Роль group не должна рассматриваться как важная область на странице.

<div role="group">
 <button role"button">Предыдущий</button>
 <button role"button">Следующий</button>
</div>

Заголовок для раздела страницы.

<h1 role="heading">Введение</h1>
<p>Lorem ipsum...</p>

Контейнер для коллекции элементов, которые образуют изображение.

<figure role="img">
 <img alt="A cute cat." src="albert.jpg">
 <figcaption>Это мой кот, Альберт.</figcaption>
<figure>

Интерактивная ссылка на внутренний или внешний ресурс, который при активации заставляет браузер перейти к этому ресурсу.

Помните, что в большинстве случаев установка роли, которая соответствует семантики по умолчанию не нужна и не рекомендуется, так как эти свойства уже установлены браузером.

Группирует неинтерактивные элементы списка.

<ul role="list">
 <li role="listitem">Один</li>
 <li role="listitem">Два</li>
 <li role="listitem">Три</li>
</ul>

Виджет, который позволяет пользователю выбирать один или несколько элементов из списка.

<ul role="listbox">
 <li>Один</li>
 <li>Два</li>
 <li>Три</li>
</ul>

Как правило, вы должны использовать JavaScript для создания функции множественного выбора.

Один элемент в списке или директории.

<ul role="list">
 <li role="listitem">Один</li>
 <li role="listitem">Два</li>
 <li role="listitem">Три</li>
</ul>

Тип живой области, где новая информация добавляется в значимом порядке, а старая информация может исчезнуть

<ul role="log">
 <li>User 1 logged in.</li>
 <li>User 2 logged in.</li>
 <li>User 1 logged out.</li>
</ul>

Главная часть содержимого документа.

<!-- header & nav here -->
<div role="main">
 <p>Lorem ipsum...</p>
</div>
<!-- footer here -->

Сейчас большинство браузеров поддерживают элемент <main>.

Тип живой области, в которой важная информация часто изменяется.

<ul role="marquee">
 <li>Dow +0.26%</li>
 <li>Nasdaq +0.54%</li>
 <li>S&amp;P +0.44%</li>
</ul>

Содержимое, представляющее собой математическое выражение.

<img role="math" alt="y=mx+b" src="slope.png">

Тип виджета, который предлагает список вариантов для пользователя.

<ul role="menu">
  <li role="menuitem">Новый</li>
  <li role="menuitem">Открыть</li>
  <li role="menuitem">Сохранить</li>
  <li role="menuitem">Закрыть</li>
</ul>

Представление меню, которое обычно расположено горизонтально.

<ul role="menubar">
  <li role="menuitem">Файл</li>
  <li role="menuitem">Правка</li>
  <li role="menuitem">Вид</li>
  <li role="menuitem">Справка</li>
</ul>

Пункт в группе вариантов, содержащихся в menu или в menubar.

<ul role="menubar">
  <li role="menuitem">Файл</li>
  <li role="menuitem">Правка</li>
  <li role="menuitem">Вид</li>
  <li role="menuitem">Справка</li>
</ul>

Помечаемый элемент меню, который имеет три возможных значения: true, false или смешанный.

<ul role="menu">
 <li role="menuitem">Консоль</li>
 <li role="menuitem">Макет</li>
 <li role="menuitemcheckbox" aria-checked="true">Обертка</li>
</ul>

Помечаемый элемент меню в группе ролей menuitemradio, только один из которых может быть выбран.

<ul role="menu">
 <li role="menuitemradio" aria-checked="true">Left</li>
 <li role="menuitemradio" aria-checked="false">Center</li>
 <li role="menuitemradio" aria-checked="false">Right</li>
</ul>

Набор навигационных элементов (обычно ссылок) для навигации по документу или связанным документам.

<ul role="navigation">
 <li><a href="/">Домой</a></li>
 <li><a href="/about">О нас</a></li>
 <li><a href="/contact">Контакты</a></li>
</ul>

Раздел, содержимое которого является постоянным или вспомогательным для основного содержимого ресурса.

<p>Lorem ipsum...</p>
<p>Lorem ipsum...</p>
<p role="note">Lorem ipsum...</p>

Выбираемый элемент в раскрывающимся списке.

<ul role="listbox">
 <li role="option">Option 1</li>
 <li role="option">Option 2</li>
 <li role="option">Option 3</li>
</ul>

Элемент, который отображает статус выполнения для задач, занимающие много времени.

<progress role="progressbar" value="25" max="100">25%</progress>

Выбираемое состояние в переключателе в группе ролей radio, только один из которых может быть выбран.

<div role="radiogroup">
 <input role="radio" type="radio" aria-checked="true"> Один<br>
 <input role="radio" type="radio" aria-checked="false"> Два<br>
 <input role="radio" type="radio" aria-checked="false"> Три
</div>

Переключатель.

<div role="radiogroup">
 <input role="radio" type="radio" aria-checked="true"> Один<br>
 <input role="radio" type="radio" aria-checked="false"> Два<br>
 <input role="radio" type="radio" aria-checked="false"> Три
</div>

Довольно значительный раздел веб-страницы или документа, который, по мнению автора, достаточно важен для включения в краткое изложение или оглавление страницы, например, область страницы, содержащую статистику спортивных событий в реальном времени.

<div role="region">
 Домашняя команда: 4<br>
  Команда гостей: 2
</div>

Строка ячеек в табличном контейнере.

<table>
 <thead>
 <!-- etc -->
 </thead>
 <tbody>
   <tr role="row">
   <!-- etc -->
   </tr>
 </tbody>
</table>

Группа, содержащая одну или несколько строк в сетке.

<table>
 <thead role="rowgroup">
 <!-- etc -->
 </thead>
 <tbody role="rowgroup">
 <!-- etc -->
 </tbody>
</table>

Ячейка, содержащая заголовочную информацию для строки в сетке.

<table role="grid">
  <thead>
  <!-- etc -->
  </thead>
  <tbody>
    <tr>
      <th role="rowheader">День 1</th>
      <td>65</td>
    </tr>
    <tr>
      <th role="rowheader">День 2</th>
      <td>74</td>
    </tr>
  </tbody>
</table>

Графический объект, который управляет прокруткой содержимого в пределах области просмотра, независимо от того, полностью ли он отображается в области просмотра.

<div id="content1">Lorem ipsum...</div>
<div
   role="scrollbar"
   aria-controls="content1"
   aria-orientation="vertical"
   aria-valuemax="100"
   aria-valuemin="0"
   aria-valuenow="25">
 <div class="scrollhandle"></div>
</div>

Ориентировочная область, содержащая набор элементов и объектов, которые в целом объединяются для создания объекта поиска.

<div role="search">
    <input role="searchbox" type="text">
    <button role="button">Найти</button>
</div>

Текстовое поле, предназначенное для указания критериев поиска.

<div role="search">
    <input role="searchbox" type="text">
    <button role="button">Найти</button>
</div>

Разделитель, который выделяет разделы в контенте или группе элементов меню.

<p>Lorem ipsum...</p>
<hr role="separator">
<p>Lorem ipsum...</p>

Пользовательское поле, в котором пользователь выбирает значение из заданного диапазона.

<div
   role="slider"
   aria-valuemax="100"
   aria-valuemin="0"
   aria-valuenow="25">
 <div class="sliderhandle"></div>
</div>

Форма ползунка(range), которая ожидает, что пользователь будет выбирать из дискретных значений.

<input
 role="spinbutton"
 aria-valuemax="100"
 aria-valuemin="0"
 aria-valuenow="25"
 type="number"
 value="25">

Сейчас большинство браузеров поддерживают input type="range".

Контейнер, содержимое которого является уведомительной информацией для пользователя, но не является достаточно важным, чтобы оправдывать предупреждение. Часто, но не обязательно представляется в виде строки состояния.

<div role="status">Online</div>

Тип флажка, который представляет значения вкл/ выкл, в отличие от отмечен/не отмечен.

<select role="switch" aria-checked="false">
  <option>On</option>
  <option selected>Off</option>
</select>

Группирующая пометка, обеспечивающая механизм выбора содержимого вкладки, которое должно быть передано пользователю.

<ul role="tablist">
  <li role="tab">Введение</li>
  <li role="tab">Глава 1</li>
  <li role="tab">Глава 2</li>
</ul>

Раздел, содержащий данные, расположенные в строках и столбцах. Роль table предназначена для табличных контейнеров, которые не являются интерактивными.

<table role="table">
  <thead>
  <!-- etc -->
  </thead>
  <tbody>
  <!-- etc -->
  </tbody>
</table>

Список элементов вкладок, которые являются ссылками на элементы tabpanel.

<ul role="tablist">
  <li role="tab">Введение</li>
  <li role="tab">Глава 1</li>
  <li role="tab">Глава 2</li>
</ul>

Контейнер для ресурсов, связанных с вкладкой, где каждая вкладка содержится в списке вкладок.

<ul role="tablist">
  <li role="tab">Введение</li>
  <li role="tab">Глава 1</li>
  <li role="tab">Глава 2</li>
</ul>
<div role="tabpanel">
 <!-- etc -->
</div>

Поле, которое позволяет в качестве значения использовать текст свободной формы.

<textarea role="textbox"></textarea>

Тип живой области, содержащей числовой счетчик, который указывает количество прошедшего времени от начальной точки или время, оставшееся до конечной точки.

<p>
  осталось <span role="timer">60</span> секунд.
</p>

Набор широко используемых функциональных кнопок, представленных в компактной визуальной форме.

<ul role="toolbar">
 <li><img alt="Новый" src="new.png"></li>
 <li><img alt="Открыть" src="open.png"></li>
 <li><img alt="Сохранить" src="save.png"></li>
 <li><img alt="Закрыть" src="close.png"></li>
</ul>

Контекстное всплывающее окно, отображающее описание элемента.

<span aria-describedby="slopedesc">Наклон</span>
<div role="tooltip" id="slopedesc">y=mx+b</div>

Как правило, всплывающая подсказка будет скрыта. Используя JavaScript, всплывающая подсказка будет отображаться после задержки, когда пользователь наводится на элемент, который он описывает. Кроме того, часто используют атрибут title, который отображает подсказку встроенными в браузер средствами.

Тип списка, который может содержать вложенные подгруппы, которые могут быть свернуты и развернуты.

<ul role="tree">
  <li role="treeitem">
    Часть 1
    <ul>
      <li role="treeitem">Глава 1</li>
      <li role="treeitem">Глава 2</li>
      <li role="treeitem">Глава 3</li>
    </ul>
  </li>
  <li role="treeitem">
    Часть 2
    <ul>
      <li role="treeitem">Глава 4</li>
      <li role="treeitem">Глава 5</li>
      <li role="treeitem">Глава 6</li>
    </ul>
  </li>
  <li role="treeitem">
    Часть 3
    <ul>
      <li role="treeitem">Глава 7</li>
      <li role="treeitem">Глава 8</li>
      <li role="treeitem">Глава 9</li>
    </ul>
  </li>
</ul>

Сетка, строки которой можно развернуть и свернуть так же, как в дереве.

Элемент ветви дерева. Это элемент расположенный внутри дерева, который может быть развернут или свернут, если он содержит группу подуровней treeitems.

<ul role="tree">
  <li role="treeitem">
    Часть 1
    <ul>
      <li role="treeitem">Глава 1</li>
      <li role="treeitem">Глава 2</li>
      <li role="treeitem">Глава 3</li>
    </ul>
  </li>
  <li role="treeitem">
    Часть 2
    <ul>
      <li role="treeitem">Глава 4</li>
      <li role="treeitem">Глава 5</li>
      <li role="treeitem">Глава 6</li>
    </ul>
  </li>
  <li role="treeitem">
    Часть 3
    <ul>
      <li role="treeitem">Глава 7</li>
      <li role="treeitem">Глава 8</li>
      <li role="treeitem">Глава 9</li>
    </ul>
  </li>
</ul>