Вопрос с собеседования · Frontend

Что такое ARIA и когда её использовать?

MiddleБраузер и DOM
Ещё спрашивают так:
  • Что делает aria-label?
  • Первое правило ARIA
Коротко

ARIA — атрибуты, которые сообщают вспомогательным технологиям роль (role="dialog"), состояние (aria-expanded, aria-selected) и связи (aria-labelledby, aria-describedby, aria-controls) там, где HTML не справляется — в сложных виджетах (вкладки, комбобокс, меню). Первое правило ARIA: если есть нативный элемент — используйте его; ARIA не добавляет поведения (клавиатуру пишете сами) и при ошибке делает хуже. aria-live объявляет динамические изменения (уведомления, результаты поиска).

  • aria-label — подпись для элемента без видимого текста (кнопка-иконка)
  • aria-hidden="true" скрывает декоративное от скринридера — не на фокусируемых элементах
  • Готовые паттерны — WAI-ARIA Authoring Practices

Подробно

<button aria-expanded="false" aria-controls="menu">Меню</button>
<ul id="menu" hidden>…</ul>
<button aria-label="Закрыть">✕</button>

Что хотят услышать

  • Роли, состояния, связи.
  • Нативные элементы прежде ARIA.
  • aria-label, aria-live, aria-hidden.

Проверьте себя

Один верный вариант. Подумайте, потом откройте ответ.

Показать варианты и ответ
  • ✗role="button" на div полностью заменяет настоящую кнопку вместе с клавиатурой, фокусом и Enter
  • ✓ARIA передаёт роли, состояния и связи, где HTML не справляется; сначала нативные элементы
  • ✗Чем больше ARIA-атрибутов на странице, тем она доступнее для скринридеров
  • ✗aria-hidden стоит ставить на фокусируемые кнопки, чтобы не мешали чтению

Связанные вопросы

Партнёр платформы

Разбор собеседования с sotto

После собеседования sotto разбирает разговор: оценка, каждый вопрос — хорошо, частично или слабо, чего не хватило в ответе и над чем поработать к следующему разу. Первые 30 минут бесплатно.

Разбор собеседования