Frontend Academy · Урок

ARIA и доступность: label, role, aria-*

Урок 2 из 413 шагов

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

Зачем нужен ARIA

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

Первое правило ARIA

Не используйте ARIA, если задачу может решить встроенный элемент или атрибут HTML. <button> всегда лучше, чем <div role="button">. Встроенные возможности HTML обеспечивают доступность бесплатно.

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

Роли ориентиров ARIA позволяют пользователям программ чтения с экрана быстро переходить к разделам страницы. Большинство таких ролей подразумевается семантическим HTML: <main> → role=main, <nav> → role=navigation. Добавляйте явные роли только тогда, когда семантический элемент не используется.

<div role="main">...</div>    <!-- prefer <main> -->
<div role="navigation">...</div>  <!-- prefer <nav> -->
<div role="banner">...</div>      <!-- prefer <header> at page level -->

aria-label

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

<button aria-label="Close dialog">×</button>
<a href="/rss.xml" aria-label="Subscribe to RSS feed">
  <img src="rss-icon.svg" alt="">
</a>

aria-labelledby

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

<h2 id="billing-title">Billing Information</h2>
<form aria-labelledby="billing-title">
  ...
</form>

aria-describedby

aria-describedby ссылается на дополнительный описательный текст — например, сообщение об ошибке или подсказку, дополняющие подпись. Программы чтения с экрана сначала озвучивают подпись, а затем описание.

<input id="pass" type="password" aria-describedby="pass-hint">
<p id="pass-hint">Must be at least 12 characters with a symbol.</p>

aria-expanded и aria-haspopup

Для динамических элементов управления нужны атрибуты состояния. aria-expanded указывает, открыт или закрыт раскрывающийся элемент (аккордеон, выпадающий список). Обновляйте его в JavaScript при изменении состояния.

<button aria-expanded="false" aria-controls="menu" id="menu-btn">Menu</button>
<ul id="menu" hidden>...</ul>

<!-- On toggle: -->
btn.setAttribute('aria-expanded', 'true');
menu.removeAttribute('hidden');

aria-hidden

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

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

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

aria-live сообщает программам чтения с экрана, что об изменениях в этой области нужно объявлять пользователю. polite ждёт, пока пользователь завершит текущее действие. assertive немедленно прерывает его (используйте этот режим экономно).

<div aria-live="polite" aria-atomic="true">
  <!-- Status messages announced when updated -->
  Form saved successfully.
</div>

role="alert"

role="alert" неявно задаёт aria-live=assertive. Вставьте сообщения об ошибках или важные уведомления в элемент с этой ролью, и программы чтения с экрана объявят их немедленно.

const errorEl = document.querySelector('[role="alert"]');
errorEl.textContent = 'Email is required.'; // announced immediately

Доступные сообщения об ошибках формы

Если в поле возникла ошибка, используйте aria-invalid="true", свяжите сообщение об ошибке с помощью aria-describedby и обновите содержимое role="alert". Такой подход из трёх частей гарантирует, что программы чтения с экрана сообщат всю необходимую информацию.

<input id="email" type="email" aria-invalid="true" aria-describedby="email-error">
<p id="email-error" role="alert">Please enter a valid email address.</p>

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

Какой атрибут ARIA предоставляет доступное имя элемента, если у него нет видимой текстовой подписи?

Ответь в интерактивном уроке

Итоги: основы ARIA

Предпочитайте встроенные возможности HTML вместо ARIA. Используйте aria-label для кнопок со значками. Применяйте aria-labelledby для ссылки на видимые подписи. Используйте aria-describedby для подсказок и ошибок. Применяйте aria-expanded для раскрывающихся элементов. Используйте aria-hidden для декоративного содержимого. Применяйте aria-live для динамических обновлений состояния. Для ошибок формы используйте aria-invalid + role=alert.

Можно начать бесплатно

Изучай HTML с ИИ-репетитором — бесплатно

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

Курсы: 41
Уроки: 163

Начать учиться бесплатно Посмотреть полный курс

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

Урок «ARIA и доступность: label, role, aria-*» бесплатный?

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

Чему я научусь в уроке «ARIA и доступность: label, role, aria-*»?

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

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

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

Сколько времени занимает урок «ARIA и доступность: label, role, aria-*»?

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

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

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

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

Элементы управления формой: типы input, select, textarea
ARIA и доступность: label, role, aria-*
Семантический HTML5: семантика вместо набора div
Атрибуты проверки форм

← Назад к Frontend Academy