Справочник разработчика

атрибуты ARIAи роли с примерами

Ищите роль или свойство aria-* и сразу смотрите разметку, условия взаимодействия и первоисточник.

Роль или свойство

Совпадения

Выбранная запись

button

Роль

button запускает действие; обычная кнопка уже поддерживает фокус и клавиатуру.

Клавиатура: Нативный HTML уже обрабатывает базовые клавиши; собственная роль требует кода.

Ограничение: Не повторяйте роль, которую нативный элемент уже реализует вместе с поведением.

Важные требования: Нет

Пример HTML

<button type="button">Save</button>

Определение WAI-ARIA 1.2 Модель APG

Проверить живой элемент

Срабатываний: 0

Поиск остаётся на странице; внешние источники откроются только после нажатия.

Категория

Показано 1 из 16

WAI-ARIA 1.2 · 06.06.2023Проверено 23.09.2026

Открыть проверку контраста

Если важна доступность сайта, прежде чем добавлять семантику самодельному элементу, проверьте, нужны ли атрибуты ARIA. Обычные button и input уже имеют роль и клавиатурное поведение; одно значение role не добавляет обработчики.

Здесь атрибуты ARIA и распространённые роли собраны вместе с фрагментами кода. Для вкладок, диалогов и сложных выпадающих списков открывайте подробные модели APG.

Зачем смотреть атрибуты ARIA здесь

Определение, условия работы и источник находятся в одной карточке.

Сначала нативный HTML

Карточки button и checkbox показывают обычные элементы. Атрибуты ARIA и role на div не добавляют фокус и активацию клавишами Enter и Space.

Нативная кнопка реагирует на клавиатуру, а простой блок с ролью не получает такой обработки сам

Связывайте состояние с содержимым

Пример aria-expanded показывает кнопку и связанную панель. Когда используются атрибуты ARIA, значение состояния должно меняться вместе с видимым интерфейсом.

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

От названия свойства к рабочему компоненту

Ищите точный токен

Поддерживаются button, role=button и aria-expanded. Фильтр разделяет роли и свойства внутри локального списка без автоматических запросов наружу.

Сверяйте поведение до копирования

Фрагмент о том, как применять атрибуты ARIA, показывает лишь семантическую основу. Для tab, dialog и combobox прочитайте модель APG и реализуйте управление фокусом.

Проверьте версию и испытайте

Каждая запись ведёт к фиксированной редакции WAI-ARIA 1.2. Затем проверьте готовую страницу клавиатурой и программой экранного доступа.

Определение рядом с практическим условием

Роли и свойства в одном поиске

Список содержит восемь ролей и восемь состояний или свойств aria-*. Отсутствие результата не означает, что токена нет в стандарте.

Пример со ссылкой на норму

Для каждой записи приведены HTML и точная ссылка на WAI-ARIA 1.2; сложные шаблоны дополнены руководством APG.

Состояние не создаёт действие

aria-expanded сообщает, открыт ли блок, но не открывает его самостоятельно. Код должен синхронно менять панель и значение.

Границы справочного списка

Только шестнадцать записей: Эти атрибуты ARIA и роли выбраны как частые примеры. Если токен не найден, обратитесь к полному тексту W3C, а не считайте его ошибочным.
Фрагмент не заменяет виджет: Скопированный tab, dialog или собственный checkbox не получает обработку стрелок, возврат фокуса и обновление состояния автоматически.
Без вывода о соответствии: Страница не анализирует DOM и не подтверждает WCAG. Контраст цветов проверяйте отдельным инструментом, а взаимодействие — на реальной странице.

Вопросы про атрибуты ARIA

Когда нужна роль ARIA вместо семантического HTML?

Если семантический HTML уже даёт нужную роль и поведение, используйте его. Роль ARIA нужна там, где нативного элемента недостаточно, но логику взаимодействия всё равно придётся написать.

Добавляет ли role=button поддержку клавиатуры?

Нет. role=button меняет описание для вспомогательных технологий, но не делает div доступным по Tab и не обрабатывает Enter или Space. Обычно лучше взять button.

В чём разница между aria-label и aria-labelledby?

aria-label содержит строку имени прямо в атрибуте. aria-labelledby ссылается на ID элементов с текстом имени. Видимая подпись и HTML-label предпочтительнее, когда подходят.

Какие атрибуты обязательны для роли ARIA?

Требования отличаются по ролям. Карточка показывает основные состояния и связи; полный нормативный перечень находится в разделе WAI-ARIA 1.2 по ссылке.

Достаточно ли ARIA для соответствия WCAG?

Нет. Справочник, где собраны атрибуты ARIA, помогает выбрать семантику; для WCAG нужны реальные проверки содержимого, фокуса, клавиатуры и программ экранного доступа.

Не хватает записи или нашли ошибку?

Ищите атрибуты ARIA сейчас

Выберите токен, проверьте нативную альтернативу и откройте определение W3C до внедрения.

Поиск по справочнику Открыть категории

атрибуты ARIAи роли с примерами