В настоящее время у меня есть функциональный аккордеонный компонент со следующей семантикой:
<AccordionWrapper(div)>
<AccordionTab(div)>
<AccordionHeader(div)></AccordionHeader(/div)>
<AccordionContent(div)></AccordionContent(/div)>
<AccordionTab(/div)>
</AccordionWrapper(/div)>
Я прочитал несколько статей о том, что рекомендуется использовать button html-элемент для заголовка гармошки. Я прочитал этот gitHub пост. Этот пост также ссылается на пример, в котором показана используемая кнопка.
Другой пример, который я нашел, был из available-accordion-pattern , он также показывает использование подхода button и div. Чем оправдано использование button над div для аккордеонного контейнера?
Другая статья, которую я нашел, была из Музеев Карнеги в Питтсбурге и их доступности. В примере также показано использование button для их заголовка гармошки. Это также приводит меня к другому вопросу. В их примере они используют теги ul и li html. Это правильный подход? Мне не удалось найти другой пример, который выглядит следующим образом.
В настоящее время я пытаюсь увеличить доступность для моего аккордеонного компонента, но не уверен в семантике. Также ниже я добавил теги арии, которые я использую. Достаточно ли приведенного ниже или я должен использовать какие-либо дополнительные теги aria?
<AccordionWrapper>
<AccordionTab role='tab'>
<AccordionHeader aria-expanded={...} tabIndex={...}>
heading name here
</AccordionHeader>
<AccordionContent aria-hidden={...}>
Any content I choose here
</AccordionContent>
<AccordionTab>
</AccordionWrapper>
Как моя семантика, которую я использую выше, означает мою цель повысить доступность, должен ли я использовать button для заголовка гармошки, а также включать ul и li или лучше всего делать что-то совершенно другое? Будем весьма благодарны за любые простые примеры, показанные выше.