Сложные компоненты и a11y

Модалка, аккордеон, выпадающее меню — это не «просто див». Ожидания экранных читалок стандартизированы: роль, состояние и поведение фокуса. Разбираем на живых паттернах.

Модальное окно

• role="dialog" + aria-modal="true" — «это окно поверх всего»;
• aria-labelledby — на заголовок, чтобы читалка объявила, о чём окно;
• фокус-ловушка: Tab не уходит из окна (Escape — закрыть);
• по закрытию вернуть фокус на кнопку, которая открыла окно.

<div role="dialog" aria-modal="true" aria-labelledby="mTitle">
  <h2 id="mTitle">Подтверждение</h2>
  <p>Удалить пост?</p>
  <button>Отмена</button>
  <button>Удалить</button>
</div>

Аккордеон

<button aria-expanded="false" aria-controls="panel-1">
  Что такое кэш?
</button>
<div id="panel-1" hidden>
  Кэш — быстрые повторные ответы без нагрузки на базу.
</div>

aria-expanded передаёт читалке состояние «раскрыт/свёрнут», aria-controls связывает кнопку с панелью. Чередование показа и скрытия — это обновление атрибута и toggle атрибута hidden.