Аккордеоны с Button и aria-expanded

Аккордеон — это набор заголовков, которые разворачиваются и сворачиваются, показывая содержимое. Каждый раздел может открываться независимо от других, в отличие от вкладок.

Сделайте каждый заголовок аккордеона настоящей кнопкой. Кнопки получают фокус, работают с Enter и пробелом и автоматически объявляются экранными дикторами.

Остерегайтесь кликабельного div в роли заголовка. Он не получает фокус, не реагирует на клавиатуру и ничего не сообщает вспомогательным технологиям о своём назначении.

Добавьте к кнопке aria-expanded, чтобы экранные дикторы объявляли, свернут раздел или развернут. Именно это состояние делает аккордеон доступным.

Когда пользователь активирует кнопку, переключайте aria-expanded между true и false. Синхронизируйте этот атрибут с тем, отображается ли панель на самом деле.

Используйте на кнопке aria-controls со значением id открываемой панели. Пользователи будут понимать, какое содержимое показывает этот заголовок.

Когда раздел закрыт, добавляйте его панели атрибут hidden. Это удаляет её со страницы и из дерева доступности до повторного открытия.

Поместите каждую кнопку внутрь настоящего заголовка, например h3. Пользователи экранных дикторов смогут переходить от раздела к разделу с помощью навигации по заголовкам.

Одиночный элемент показа и скрытия — это раскрывающийся блок, а не набор вкладок. Ему нужна только кнопка с aria-expanded, без ролей tablist и tab.

После переключения оставляйте фокус на кнопке, которую нажал пользователь. Не переводите фокус в панель: это может сбить пользователей клавиатуры с толку.

Поскольку кнопка содержит собственное состояние, экранный диктор каждый раз сообщает, развернут раздел или свернут. Пользователь всегда знает, что произойдет после активации.

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