Акордеон мысалында қандай ARIA-атрибуттар пайдаланылады?

Для аккордеона (компонента с разворачивающимися панелями) обычно используются следующие ARIA-атрибуты:

• role="button" — на элементе, который открывает/закрывает панель.
• aria-expanded="true|false" — указывает, раскрыта ли панель.
• aria-controls="ID_панели" — связывает кнопку с панелью, которую она раскрывает.
• role="region" или role="tabpanel" — на самой панели, чтобы обозначить область с содержимым.
• aria-labelledby="ID_кнопки" — связывает панель с кнопкой, которая её открывает.

Пример:

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