ARIA-атрибуты

Что такое ARIA-атрибуты и какими они бывают.

Время чтения: 10 мин

Кратко

Секция статьи "Кратко"

ARIA-атрибуты — это группа дополнительных атрибутов из спецификации WAI-ARIA, которая состоит из свойств и состояний.

Состояния (states) описывают состояния элементов и отвечают на вопрос «В каком состоянии сейчас элемент?».

Свойства (properties) нужны для раскрытия дополнительных функций элементов. Отвечают на вопрос «Что ещё делает этот элемент?».

ARIA-атрибуты поддерживают роли и помогают браузерам и Accessibility API правильно обрабатывать элементы для вспомогательных технологий. Сами по себе, без CSS и JavaScript, они не изменяют внешний вид и функциональность элементов.

Как пишется

Секция статьи "Как пишется"

Общий синтаксис ARIA-атрибутов — aria-атрибут="значение".

Для примера сообщим скринридеру с помощью ARIA-атрибута, что у поля есть инструкция к нему.

        
          
          <label for="psw">Пароль</label><input  type="password"  name="password"  id="psw"  aria-describedby="hint"><span id="hint">Пароль должен содержать не меньше 20 знаков</span>
          <label for="psw">Пароль</label>
<input
  type="password"
  name="password"
  id="psw"
  aria-describedby="hint"
>
<span id="hint">Пароль должен содержать не меньше 20 знаков</span>

        
        
          
        
      

aria-describedby связывает с помощью одинакового ID два элемента — поле и подсказку из тега <span>. Скринридер озвучит текст подсказки после подписи и основной информации о поле.

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

Для каких-то атрибутов в качестве значения используют произвольный текст, как для aria-label:

        
          
          <button aria-label="Копировать">  <img src="copy-icon.svg" alt=""></button>
          <button aria-label="Копировать">
  <img src="copy-icon.svg" alt="">
</button>

        
        
          
        
      

Есть атрибуты, которые принимают булевые значения true или false. Например, aria-hidden:

        
          
          <span aria-hidden="true">×</span>
          <span aria-hidden="true">×</span>

        
        
          
        
      

Для других атрибутов используют конкретные токены. К примеру, для aria-live:

        
          
          <div class="alert" aria-live="assertive"></div><div class="error" aria-live="polite"></div>
          <div class="alert" aria-live="assertive"></div>

<div class="error" aria-live="polite"></div>

        
        
          
        
      

Некоторые атрибуты в качестве значения принимают пустую строку — это равно значению false. Например, aria-invalid. Однако лучше задавать атрибутам конкретные значения. Так сложнее ошибиться.

        
          
          <label for="psw">Пароль</label><input  type="password"  name="password"  id="psw"  aria-describedby="error"  aria-invalid=""><!-- В поле нет ошибки, поэтому скрипт не добавил текст в <span> --><span id="error"></span>
          <label for="psw">Пароль</label>
<input
  type="password"
  name="password"
  id="psw"
  aria-describedby="error"
  aria-invalid=""
>
<!-- В поле нет ошибки, поэтому скрипт не добавил текст в <span> -->
<span id="error"></span>

        
        
          
        
      

Список всех типов значений атрибутов есть в спецификации WAI-ARIA 1.2 (Web Accessibility Initiative – Accessible Rich Internet Applications 1.2).

Правила использования

Секция статьи "Правила использования"
  • Атрибуты можно задавать любым элементам.
  • Для HTML-тегов сначала используйте HTML-атрибуты, а уже потом думайте об ARIA-атрибутах.
  • Всегда уточняйте, какие атрибуты сочетаются с явной или встроенной ролью элемента.
  • У всех интерактивных элементов, особенно кастомных, должны быть ARIA-атрибуты.
  • Следите за тем, какие значения можно использовать для атрибутов.
  • Старайтесь не оставлять значение атрибута пустым.
  • Значения большинства атрибутов можно динамически изменять.

Типы атрибутов

Секция статьи "Типы атрибутов"

Другая важная особенность атрибутов — атрибуты сочетаются не со всеми ARIA-ролями. Они бывают разных типов в зависимости от функций и связи с ролями элементов.

Список всех ARIA-атрибутов с их подробным описанием есть в спецификации WAI-ARIA 1.2.

Глобальные атрибуты

Секция статьи "Глобальные атрибуты"

Глобальные атрибуты — самый универсальный тип. Они описывают элементы с любыми ролями.

  • aria-atomic (свойство) — о каком объёме изменений сообщит вспомогательная технология на основе значения aria-relevant. Это вся «живая» область или её часть.
  • aria-busy (состояние) — вспомогательная технология должна подождать, пока элемент окончательно изменится.
  • aria-controls (свойство) — элемент управляет другим элементом или их группой.
  • aria-current (состояние) — текущий, выбранный элемент из контейнера или группы элементов.
  • aria-describedby (свойство) — один элемент или несколько подробно описывают другой элемент.
  • aria-details (свойство) — элемент максимально подробно описывает другой элемент.
  • aria-dropeffect (свойство) — что произойдёт, когда объект «бросят». Устарело.
  • aria-flowto (свойство) — у элементов изменён порядок чтения, и вспомогательная технология может прочитать содержимое в исходном порядке.
  • aria-grabbed (состояние) — объект «схвачен». Устарело.
  • aria-hidden (состояние) — элемент скрыт из дерева доступности и недоступен для вспомогательных технологий.
  • aria-keyshortcuts (состояние) — нестандартное сочетание клавиш для взаимодействия с элементом.
  • aria-label (свойство) — имя элемента.
  • aria-labelledby (свойство) — один элемент или несколько содержат подпись для другого элемента.
  • aria-live (свойство) — указание на то, что элемент изменится, тип и важность этого изменения.
  • aria-owns (свойство) — один элемент или несколько связаны с другими как родители или дети визуально, функционально или в контексте, но это не отражено в DOM.
  • aria-relevant (свойство) — вспомогательная технология объявит об изменениях в «живой» области после определённых изменений в дереве доступности.
  • aria-roledescription (состояние) — описание роли на естественном языке.

Также есть глобальные атрибуты из черновика спецификации WAI-ARIA 1.3, которые пока не поддерживаются всеми браузерами и вспомогательными технологиями.

  • aria-braillelabel (свойство) — имя элемента для дисплея Брайля.
  • aria-brailleroledescription (свойство) — описание роли элемента на естественном языке для дисплея Брайля.
  • aria-description (свойство) — дополнительное подробное описание элемента, которое видно только скринридеру.

Атрибуты виджетов

Секция статьи "Атрибуты виджетов"

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

  • aria-autocomplete (свойство) — у поля есть выпадающий список с вариантами для автозаполнения.
  • aria-checked (состояние) — отжат или нет интерактивный элемент, например, чекбокс или радиокнопка. Эквивалент в HTML — checked.
  • aria-disabled (состояние) — элемент есть на странице, но с ним нельзя взаимодействовать. Эквивалент в HTML — disabled.
  • aria-errormessage (свойство) — элемент содержит сообщение об ошибке.
  • aria-expanded (состояние) — элемент раскрыт или свёрнут.
  • aria-haspopup (свойство) — элемент раскрывает попап.
  • aria-hidden (состояние) — элемент скрыт из дерева доступности и недоступен для вспомогательных технологий.
  • aria-invalid (состояние) — введённые данные не соответствуют нужному формату.
  • aria-label (свойство) — имя элемента.
  • aria-level (состояние) — уровень элемента в иерархии элементов.
  • aria-modal (состояние) — модальность элемента, когда он не скрыт.
  • aria-multiline (свойство) — сколько строк можно ввести в поле.
  • aria-multiselectable (свойство) — можно выбрать несколько элементов. Эквивалент в HTML — multiple.
  • aria-orientation (свойство) — ориентация элемента на странице.
  • aria-placeholder (свойство) — подсказка по заполнению поля. Эквивалент в HTML — placeholder.
  • aria-posinset (свойство) — позиция или номер элемента среди элементов списка или древовидного списка.
  • aria-pressed (состояние) — нажат или нет переключатель.
  • aria-readonly (свойство) — элемент недоступен, но можно прочесть его содержимое. Эквивалент в HTML — readonly.
  • aria-required (свойство) — обязательное ли поле или нет. Эквивалент в HTML — required.
  • aria-selected — выбран или нет интерактивный элемент.
  • aria-setsize (свойство) — количество элементов из текущего списка или древовидного списка, когда их нет в DOM.
  • aria-sort (свойство) — сортировка элементов в таблице или сетке.
  • aria-valuemax (свойство) — максимальное значение ползунка. Эквивалент в HTML — max.
  • aria-valuemin (свойство) — минимальное значение ползунка. Эквивалент в HTML — min.
  • aria-valuenow (свойство) — текущее значение ползунка.
  • aria-valuetext (свойство) — описание значений ползунка на естественном языке.

Атрибуты изменяющихся областей

Секция статьи "Атрибуты изменяющихся областей"

Атрибуты изменяющихся или «живых» областей (live regions) нужны для частей страниц, которые динамически изменяются. К примеру, для сообщений об ошибках, таймеров и оповещений. Их можно применять к любым элементам.

  • aria-atomic (свойство) — о каком объёме изменений сообщит вспомогательная технология на основе значения aria-relevant. Это вся «живая» область или её часть.
  • aria-busy (состояние) — вспомогательная технология должна подождать, пока элемент окончательно изменится.
  • aria-live (свойство) — указание на то, что элемент изменится, тип и важность этого изменения.
  • aria-relevant (свойство) — вспомогательная технология объявит об изменениях в «живой» области после определённых изменений в дереве доступности.

Атрибуты связи

Секция статьи "Атрибуты связи"

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

  • aria-activedescendant (свойство) — фокус на дочернем элементе из составного интерактивного элемента или элемента с ролями textbox, group, application.
  • aria-colcount (свойство) — общее количество колонок таблицы, сетки или древовидной сетки.
  • aria-colindex (свойство) — индекс или позиция колонки таблицы, сетки или древовидной сетки.
  • aria-colspan (свойство) — количество колонок, которые складываются из ячеек таблицы, сетки или древовидной сетки. Эквивалент в HTML — colspan.
  • aria-controls (свойство) — элемент управляет другим элементом или их группой.
  • aria-describedby (свойство) — один элемент или несколько подробно описывают другой элемент.
  • aria-details (свойство) — элемент максимально подробно описывает другой элемент.
  • aria-errormessage (свойство) — элемент содержит сообщение об ошибке.
  • aria-flowto (свойство) — у элементов изменён порядок чтения, и вспомогательная технология может прочитать содержимое в исходном порядке.
  • aria-labelledby (свойство) — один элемент или несколько содержат подпись для другого элемента.
  • aria-owns (свойство) — один элемент или несколько связаны с другими как родители или дети визуально, функционально или в контексте, но это не отражено в DOM.
  • aria-posinset (свойство) — текущее число или положение элемента списка или древовидного списка, когда не все элементы есть в DOM.
  • aria-rowcount (свойство) — общее количество строк таблицы, сетки или древовидной сетки.
  • aria-rowindex (свойство) — индекс или позиция строки таблицы, сетки или древовидной сетки.
  • aria-rowspan (свойство) — число строк, которые складываются из ячеек таблицы, сетки или древовидной сетки. Эквивалент в HTML — rowspan.
  • aria-setsize (свойство) — текущее количество элементов списка или древовидного списка, когда не все элементы есть в DOM.

Драг-н-дроп атрибуты

Секция статьи "Драг-н-дроп атрибуты"

Нужны для элементов, которые перетаскивают в определённую область страницы.

  • aria-dropeffect (свойство) — что произойдёт, когда объект «бросят».
  • aria-grabbed (состояние) — объект «схвачен».

Подсказки

Секция статьи "Подсказки"

💡 У семантических тегов и элементов с явными ролями есть свойства и состояния по умолчанию. Они имеют значения false, undefined, none, off или нулевое значение в случае числа, строки, ID и так далее.

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

💡 Если изменяете роль семантического тега, то вместе с ролью изменятся его свойства и состояния.

💡 Когда задаёте атрибуты родительским элементам, их наследуют и дети. В случае с атрибутом aria-hidden это приведёт к проблемам с доступностью, если в родительский элемент вложен интерактивный. Тогда кнопка, ссылка или что-то другое станут невидимыми для скринридеров.

💡 Значения HTML-атрибутов перезаписывают значения ARIA-атрибутов. Исключения — aria-label, aria-labelledby и aria-describedby.

        
          
          <!-- Скринридер прочтёт «Введите пароль» из HTML-атрибута placeholder --><label for="psw">Пароль</label><input  type="password"  name="password"  id="psw"  placeholder="Введите пароль"  aria-placeholder="Введите свой невероятно сложный пароль"><!-- Скринридер прочтёт «Закрыть окно» из ARIA-атрибута aria-label --><button aria-label="Закрыть окно">  <img src="cross.svg" alt="Закрыть"></button>
          <!-- Скринридер прочтёт «Введите пароль» из HTML-атрибута placeholder -->
<label for="psw">Пароль</label>
<input
  type="password"
  name="password"
  id="psw"
  placeholder="Введите пароль"
  aria-placeholder="Введите свой невероятно сложный пароль"
>

<!-- Скринридер прочтёт «Закрыть окно» из ARIA-атрибута aria-label -->
<button aria-label="Закрыть окно">
  <img src="cross.svg" alt="Закрыть">
</button>

        
        
          
        
      

Ссылки

Секция статьи "Ссылки"