На примере аккордеона — какие ARIA-атрибуты используются?

Основные ARIA-атрибуты аккордеона

Аккордеон — это набор сворачиваемых секций, где каждая имеет заголовок и содержимое. Для доступности важно, чтобы вспомогательные технологии понимали, что элемент является кнопкой, раскрыт ли он и как связан с панелью. Основные атрибуты: role, aria-expanded, aria-controls, aria-labelledby.

Роли и состояния

• role="button" — указывает, что заголовок ведёт себя как кнопка.
• aria-expanded="true|false" — показывает, раскрыта ли панель.
• aria-controls="id" — связывает кнопку с панелью по ID.
• aria-labelledby="id" — связывает панель с заголовком для озвучивания.

Пример разметки

<div class="accordion">
  <h3>
    <button aria-expanded="false" aria-controls="panel1">Заголовок 1</button>
  </h3>
  <div id="panel1" role="region" aria-labelledby="button1" hidden>
    <p>Содержимое панели 1</p>
  </div>
</div>

Здесь role="region" на панели помогает скринридеру определить её как отдельную область. Атрибут hidden скрывает панель, когда она закрыта.

Практическое применение

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

Вывод: Правильное использование ARIA-атрибутов делает аккордеон доступным и понятным для всех пользователей, включая тех, кто использует скринридеры.