HTML
ARIA

Синтаксис

• ария-живой
• ария релевантных
• ария-автозаполнение
• ария проверено
• ария-инвалидов
• Aria вспененные
• ария-haspopup
• ария-скрытый
• ария-инвалида
• ария-этикетка
• ария уровня
• ария-многострочный
• ария-multiselectable
• Aria-ориентации
• ария нажиму
• ария-чтение
• ария-требуется
• Aria выбранных
• ария сортировки
• ария-valuemax
• ария-valuemin
• ария-valuenow
• ария-valuetext
• ария-атомная
• ария-занят
• ария-dropeffect
• ария-потащили
• ария-activedescendant
• Aria-контроль
• ария-describedby
• ария-FlowTo
• ария-labelledby
• ария-владеет
• ария-posinset
• ария-SetSize

замечания

Роль = «тревога»

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

<div role="alert" aria-live="assertive">Your session will expire in 60 seconds.</div>

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

Источник - Хейдон Пикеринг «Некоторые практические примеры ARIA»

Роль = "alertdialog"

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

<div role="alertdialog">
  <h1>Warning</h1>
  <div role="alert">Your session will expire in 60 seconds.</div>
</div>

Роль = «применение»

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

<div role="application">
  <h1>Calculator</h1>
  <input id="num1" type="text"> + <input id="num2" type="text"> =
  <span id="result"></span>
</div>

Роль = «статья»

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

---

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

<article>
  <h1>My first article</h1>
  <p>Lorem ipsum...</p>
</article>

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

<div role="article">
  <h1>My first article</h1>
  <p>Lorem ipsum...</p>
</div>

---

W3C Вход для role=article

Роль = «баннер»

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

<div role="banner">
  <h1>My Site</h1>

  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</div>

Роль = «Кнопка»

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

<button role="button">Add</button>

Роль = «ячейка»

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

<table>
  <thead>
    <!-- etc -->
  </thead>
  <tbody>
    <td role="cell">95</td>
    <td role="cell">14</td>
    <td role="cell">25</td>
  </tbody>
</table>

Роль = «флажок»

Контрольный вход, который имеет три возможных значения: true, false или mixed.

<p>
  <input type="checkbox" role="checkbox" aria-checked="false">
  I agree to the terms
</p>

Роль = "ColumnHeader"

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

<table role="grid">
  <thead>
    <tr>
      <th role="columnheader">Day 1</th>
      <th role="columnheader">Day 2</th>
      <th role="columnheader">Day 3</th>
    </tr>
  </thead>
  <tbody>
    <!-- etc -->
  </tbody>
<table>

Роль = «выпадающий»

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

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

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

Роль = «комплементарный»

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

<div role="complementary">
  <h2>More Articles</h2>

  <ul>
    <!-- etc -->
  </ul>
</div>

Роль = "contentinfo"

Большой воспринимаемый регион, содержащий информацию о родительском документе.

<p role="contentinfo">
  Author: Albert Einstein<br>
  Published: August 15, 1940
</p>

Роль = «определение»

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

<span role="term" aria-labelledby="def1">Love</span>
<span id="def1" role="definition">an intense feeling of deep affection.</span>

Роль = «Диалог»

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

<div role="dialog">
  <p>Are you sure?</p>
  <button role="button">Yes</button>
  <button role="button">No</button>
</div>

Роль = «каталог»

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

<ul role="directory">
  <li><a href="/chapter-1">Chapter 1</a></li>
  <li><a href="/chapter-2">Chapter 2</a></li>
  <li><a href="/chapter-3">Chapter 3</a></li>
</ul>

Роль = «документ»

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

<div role="document">
  <h1>The Life of Albert Einstein</h1>
  <p>Lorem ipsum...</p>
</div>

Роль = «форма»

Ориентированный регион, который содержит коллекцию предметов и объектов, которые в целом объединяются для создания формы.

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

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

<form action="">
  <fieldset>
    <legend>Login form</legend>
    <div>
      <label for="username">Your username</label>
      <input type="text" id="username" aria-describedby="username-tip" required />
      <div role="tooltip" id="username-tip">Your username is your email address</div>
    </div>
    <div>
      <label for="password">Your password</label>
      <input type="text" id="password" aria-describedby="password-tip" required />
      <div role="tooltip" id="password-tip">Was emailed to you when you signed up</div>
    </div>
  </fieldset>
</form>

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

<div role=form>
  <input type="email" placeholder="Your email address">
  <button>Sign up</button>
</div>

Роль = «Сетка»

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

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

Роль = "GridCell"

Ячейка в сетке или древовидной.

<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>

Роль = «группа»

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

<div role="group">
  <button role"button">Previous</button>
  <button role"button">Next</button>
</div>

Роль = «заголовок»

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

<h1 role="heading">Introduction</h1>
<p>Lorem ipsum...</p>

Роль = "IMG"

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

<figure role="img">
  <img alt="A cute cat." src="albert.jpg">
  <figcaption>This is my cat, Albert.</figcaption>
<figure>

Роль = «ссылка»

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

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

Источник - https://www.w3.org/TR/html5/dom.html#aria-usage-note

Роль = «список»

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

<ul role="list">
  <li role="listitem">One</li>
  <li role="listitem">Two</li>
  <li role="listitem">Three</li>
</ul>

Роль = "ListBox"

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

<ul role="listbox">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

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

Роль = "ListItem"

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

<ul role="list">
  <li role="listitem">One</li>
  <li role="listitem">Two</li>
  <li role="listitem">Three</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 -->

Роль = «бегущая строка»

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

<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">New</li>
  <li role="menuitem">Open</li>
  <li role="menuitem">Save</li>
  <li role="menuitem">Close</li>
</ul>

Роль = "Menubar"

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

<ul role="menubar">
  <li role="menuitem">File</li>
  <li role="menuitem">Edit</li>
  <li role="menuitem">View</li>
  <li role="menuitem">Help</li>
</ul>

Роль = "MENUITEM"

Опция в группе вариантов, содержащихся в меню или в строке меню.

<ul role="menubar">
  <li role="menuitem">File</li>
  <li role="menuitem">Edit</li>
  <li role="menuitem">View</li>
  <li role="menuitem">Help</li>
</ul>

Роль = "menuitemcheckbox"

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

<ul role="menu">
  <li role="menuitem">Console</li>
  <li role="menuitem">Layout</li>
  <li role="menuitemcheckbox" aria-checked="true">Word wrap</li>
</ul>

Роль = "menuitemradio"

Контролируемое меню в группе ролей 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="/">Home</a></li>
  <li><a href="/about">About</a></li>
  <li><a href="/contact">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>

Роль = «презентация»

Элемент, чья семантика неявной родной роли не будет сопоставлена ​​с API доступности.

<div style="float:left;">Some content on the left.</div>
<div style="float:right;">Some content on the right</div>
<div role="presentation" style="clear:both;"></div> <!-- Only used to clear floats -->

Роль = "ProgressBar"

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

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

Роль = «радио»

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

<div role="radiogroup">
  <input role="radio" type="radio" aria-checked="true"> One<br>
  <input role="radio" type="radio" aria-checked="false"> Two<br>
  <input role="radio" type="radio" aria-checked="false"> Three
</div>

Роль = «область»

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

<div role="region">
  Home team: 4<br>
  Away team: 2
</div>

Роль = "RadioGroup"

Группа переключателей.

<div role="radiogroup">
  <input role="radio" type="radio" aria-checked="true"> One<br>
  <input role="radio" type="radio" aria-checked="false"> Two<br>
  <input role="radio" type="radio" aria-checked="false"> Three
</div>

Роль = «строка»

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

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

Роль = "rowgroup"

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

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

Роль = "rowheader"

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

<table role="grid">
  <thead>
    <!-- etc -->
  </thead>
  <tbody>
    <tr>
      <th role="rowheader">Day 1</th>
      <td>65</td>
    </tr>
    <tr>
      <th role="rowheader">Day 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">Search</button>
</div>

Роль = "SearchBox"

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

<div role="search">
  <input role="searchbox" type="text">
  <button role="button">Search</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>

Роль = «в полях ввода»

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

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

Роль = «Статус»

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

<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">Introduction</li>
  <li role="tab">Chapter 1</li>
  <li role="tab">Chapter 2</li>
</ul>

Роль = «таблица»

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

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

Роль = "tablist"

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

<ul role="tablist">
   <li role="tab">Introduction</li>
   <li role="tab">Chapter 1</li>
   <li role="tab">Chapter 2</li>
</ul>

Роль = "tabpanel"

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

<ul role="tablist">
  <li role="tab">Introduction</li>
  <li role="tab">Chapter 1</li>
  <li role="tab">Chapter 2</li>
</ul>
<div role="tabpanel">
  <!-- etc -->
</div>

Роль = «текстовое поле»

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

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

Роль = «Таймер»

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

<p>
  <span role="timer">60</span> seconds remaining.
</p>

Роль = «Панель инструментов»

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

<ul role="toolbar">
  <li><img alt="New" src="new.png"></li>
  <li><img alt="Open" src="open.png"></li>
  <li><img alt="Save" src="save.png"></li>
  <li><img alt="Close" src="close.png"></li>
</ul>

Роль = «подсказка»

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

<span aria-describedby="slopedesc">Slope</span>
<div role="tooltip" id="slopedesc">y=mx+b</div>

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

Роль = «дерево»

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

<ul role="tree">
  <li role="treeitem">
    Part 1
    <ul>
      <li role="treeitem">Chapter 1</li>
      <li role="treeitem">Chapter 2</li>
      <li role="treeitem">Chapter 3</li>
    </ul>
  </li>
  <li role="treeitem">
    Part 2
    <ul>
      <li role="treeitem">Chapter 4</li>
      <li role="treeitem">Chapter 5</li>
      <li role="treeitem">Chapter 6</li>
    </ul>
  </li>
  <li role="treeitem">
    Part 3
    <ul>
      <li role="treeitem">Chapter 7</li>
      <li role="treeitem">Chapter 8</li>
      <li role="treeitem">Chapter 9</li>
    </ul>
  </li>
</ul>

Роль = "TreeGrid"

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

Роль = "TreeItem"

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

<ul role="tree">
  <li role="treeitem">
    Part 1
    <ul>
      <li role="treeitem">Chapter 1</li>
      <li role="treeitem">Chapter 2</li>
      <li role="treeitem">Chapter 3</li>
    </ul>
  </li>
  <li role="treeitem">
    Part 2
    <ul>
      <li role="treeitem">Chapter 4</li>
      <li role="treeitem">Chapter 5</li>
      <li role="treeitem">Chapter 6</li>
    </ul>
  </li>
  <li role="treeitem">
    Part 3
    <ul>
      <li role="treeitem">Chapter 7</li>
      <li role="treeitem">Chapter 8</li>
      <li role="treeitem">Chapter 9</li>
    </ul>
  </li>
</ul>