Enter
    Расширенный поиск
    Клавиша / esc

    Доступность

    ARIA-атрибуты

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

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

    Кратко

    Скопировано

    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 (свойство) — общее количество элементов из группы, когда не все они отображаются на странице в данный момент.
    • aria-sort (свойство) — как отсортированы данные в колонке (столбце), строке таблицы или сетки.
    • aria-valuemax (свойство) — максимальное значение ползунка, индикатора загрузки и других элементов с диапазоном чисел. Эквивалент в HTML — max у <input>.
    • aria-valuemin (свойство) — минимальное значение ползунка, индикатора загрузки и других элементов с диапазоном чисел. Эквивалент в HTML — min у <input>.
    • aria-valuenow (свойство) — текущее значение ползунка, индикатора загрузки и других элементов с диапазоном чисел. Эквивалент в HTML — value у <input>.
    • aria-valuetext (свойство) — текстовое описание значений ползунка, индикатора загрузки и других элементов с диапазоном чисел.

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

    Скопировано

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

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

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

    Скопировано

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

    • aria-activedescendant (свойство) — активный элемент из составного интерактивного элемента. Например, из меню, сетки или комбинированного списка.
    • 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 (свойство) — текущий порядковый номер или положение элемента из обычного или древовидного списка, когда не все элементы есть на странице в данный момент.
    • aria-rowcount (свойство) — общее количество строк таблицы, обычной или древовидной сетки.
    • aria-rowindex (свойство) — индекс или позиция строки таблицы, обычной или древовидной сетки в виде числа.
    • aria-rowspan (свойство) — количество строк, которые объединены в ячейку таблицы, обычной или древовидной сетки. Эквивалент в HTML — rowspan.
    • aria-setsize (свойство) — общее количество элементов из группы, когда не все они отображаются на странице в данный момент.

    В ARIA 1.3 появятся новые атрибуты связи:

    • aria-colindextext (свойство) — индекс или позиция колонки (столбца) таблицы и обычной или древовидной сетки в виде текста.
    • aria-rowindextext (свойство) — индекс или позиция строки таблицы и обычной или древовидной сетки в виде текста.

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

    Скопировано

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

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

    Ссылки

    Скопировано

    Читайте также