0Pricing
Frontend Academy · Урок

Роли и атрибуты ARIA

Применяйте роли ориентиров, живые области и атрибуты aria-*, чтобы улучшать компоненты там, где возможностей нативного HTML недостаточно.

«Роли и атрибуты ARIA» — бесплатный урок Frontend Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Frontend Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Frontend Academy содержит 4 уроков всего.

Что такое ARIA

ARIA (Accessible Rich Internet Applications) — это набор атрибутов HTML, которые описывают роль, состояние и свойства элементов для вспомогательных технологий. Это связующее звено для настраиваемых компонентов, которые нельзя выразить с помощью встроенного HTML.

Первое правило ARIA: не используйте ARIA

Если встроенный элемент выполняет нужную задачу, используйте его. <button> лучше, чем <div role="button">. Неправильно применённая ARIA хуже, чем отсутствие ARIA: интерфейс кажется доступным, но пользователи остаются в тупике.

Категории атрибутов ARIA

Три категории: роли (что представляет собой элемент), свойства (относительно статичные — доступное имя и дополнительное описание), состояния (динамические — раскрыт ли элемент, нажат ли он и выбран ли).

Роли ориентиров

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

<!-- HTML5 (preferred): -->
<nav>...</nav>
<main>...</main>
<aside>...</aside>

<!-- ARIA equivalents (use only when HTML5 won't work): -->
<div role="navigation">...</div>
<div role="main">...</div>
<div role="complementary">...</div>

Доступное имя и ссылка на подпись

aria-label: задаёт доступное имя с помощью строки. aria-labelledby: указывает на текст другого элемента, используемый как имя. Используйте их, если видимого текста нет или его недостаточно.

<!-- Icon-only button needs a label: -->
<button aria-label="Close dialog">
  <svg>...</svg>
</button>

<!-- Section labelled by its heading: -->
<section aria-labelledby="settings-title">
  <h2 id="settings-title">Settings</h2>
  ...
</section>

Дополнительное описание для подсказок

aria-describedby связывает элемент с более подробным описанием. Это полезно для подсказок в формах, сообщений об ошибках и всплывающих подсказок.

<label for="password">Password</label>
<input id="password" type="password" aria-describedby="pw-hint">
<p id="pw-hint">Must be at least 12 characters with a number and symbol.</p>

Раскрытие с помощью aria-expanded

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

<button aria-expanded="false" aria-controls="faq-1" onclick="toggle()">
  How do I cancel?
</button>
<div id="faq-1" hidden>
  Visit Settings &gt; Billing to cancel.
</div>

Кнопки-переключатели с aria-pressed

Для кнопок с состоянием «включено/выключено» (отключение звука, жирное начертание) используйте aria-pressed.

<button aria-pressed="true" onclick="toggleBold()">
  Bold
</button>

Динамические области: aria-live

Динамически обновляемое содержимое (всплывающие уведомления, результаты поиска, сводки ошибок) должно находиться в динамической области, чтобы программы чтения с экрана объявляли изменения. Режим «вежливый» ждёт паузы, а «настойчивый» прерывает пользователя.

<!-- Toast container -->
<div aria-live="polite" aria-atomic="true" id="toast-region"></div>

<!-- Critical alert -->
<div role="alert">Session expired. Please log in again.</div>

Сокращённая запись для оповещения

role="alert" — сокращённая запись для настойчивой динамической области с aria-atomic. Используйте её экономно: каждое оповещение прерывает пользователя.

Скрытие декоративного содержимого

aria-hidden="true" удаляет элемент из дерева доступности. Используйте его для декоративных значков рядом с текстовыми метками — иначе программы чтения с экрана будут объявлять их повторно.

<button>
  <svg aria-hidden="true" focusable="false">...</svg>
  Save
</button>

Проверяйте с помощью программы чтения с экрана

Единственный способ узнать, работает ли ARIA, — проверить её. VoiceOver (macOS/iOS, бесплатно), NVDA (Windows, бесплатно), TalkBack (Android, бесплатно). Десять минут с VoiceOver могут показать больше, чем любой инструмент аудита.

Быстрая проверка

Какой атрибут ARIA следует задать кнопке только со значком, у которой нет видимой текстовой метки?

Повторение: ARIA

ARIA описывает роль, свойства и состояние для вспомогательных технологий. Сначала используйте встроенный HTML и только потом обращайтесь к ARIA. Атрибуты доступного имени задают имя элемента. Дополнительное описание предназначено для подсказок. Состояния раскрытия и нажатия — для переключателей. Динамические области — для объявлений изменений. Скрытие доступности — для декоративного содержимого. Всегда проверяйте интерфейс с настоящей программой чтения с экрана.

Часто задаваемые вопросы

Урок «Роли и атрибуты ARIA» бесплатный?

Да — полный текст урока «Роли и атрибуты ARIA» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Frontend Academy, подпишись на CoddyKit PRO. Курс Frontend Academy содержит 4 уроков всего.

Чему я научусь в уроке «Роли и атрибуты ARIA»?

Применяйте роли ориентиров, живые области и атрибуты aria-*, чтобы улучшать компоненты там, где возможностей нативного HTML недостаточно. Ты практикуешь Frontend Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Frontend Academy?

Предыдущий опыт не требуется. Frontend Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.

Сколько времени занимает урок «Роли и атрибуты ARIA»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Frontend Academy?

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

Все уроки этого курса

  1. Уровни WCAG: A, AA и AAA
  2. Семантический HTML как основа
  3. Роли и атрибуты ARIA
  4. Навигация с клавиатуры и управление фокусом
← Назад к Frontend Academy