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

[Anonymous]

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

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

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

Heading 1
Supplementary information 1

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

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

Heading 1
Supplementary information 1

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

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