Как сделать доступный аккордеон с помощью hgroup? ⇐ Html

[Anonymous]

У меня есть аккордеон в моем приложении, где каждая кнопка имеет заголовок, а некоторая дополнительная информация:

Моя начальная реализация (которая работает нормально) заключается в следующем, но не идеальна с точки зрения доступности как Вытирает роль «заголовок» роли элементов в нем из-за того, что рассматривает детей как к презентации (см. Обсуждение по этому поводу и рекомендации здесь). -Верд ">

Код: Выделить всё

Heading 1
Supplementary information 1

Согласно примерам доступных аккордеонов, которые я обнаружил (например, в руководстве по программе создания ARIA), следует содержать внутри элемента заголовка. Однако я не вижу, как сделать это, не разбивая hgroup и в итоге дополняя дополнительную информацию внутри элемента заголовка, например,

Код: Выделить всё

Heading 1
Supplementary information 1

При вышеуказанном подходе элемент имеет доступное имя «Заголовок 1 Дополнительная информация 1» (неверно) и ассоциация дополнительной Информация с заголовком (ранее предоставленной ) отсутствует. Под тегом заголовка (и, если возможно, сгруппировано с )?

Подробнее здесь: https://stackoverflow.com/questions/794 ... -an-hgroup