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

[Anonymous]

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

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

Heading 1
Supplementary information 1

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

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

Heading 1
Supplementary information 1

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

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