语义上正确的html反应手风琴组件

Question

我目前有一个功能反应手风琴组件，具有以下语义：

<AccordionWrapper(div)>
  <AccordionTab(div)>
    <AccordionHeader(div)></AccordionHeader(/div)>
    <AccordionContent(div)></AccordionContent(/div)>
  <AccordionTab(/div)>
</AccordionWrapper(/div)>

我已经阅读了一些文章，建议最好使用button html元素作为手风琴标题。我已经阅读了这篇gitHub帖子。这篇文章还链接到一个示例，通过该示例显示正在使用的按钮。

我发现的另一个例子来自accessible-accordion-pattern，它也显示了使用button和div方法。在button上使用div作为手风琴容器有什么理由？

我发现的另一篇文章来自Carnegie Museums of Pittsburgh及其可访问性。该示例还显示了button用于手风琴标题的用法。这也引出了另一个问题。在他们的例子中，他们使用ul和li html标签。这是正确的方法吗？我还没有设法找到另一个看起来像这样的例子。

我目前正在尝试增加手风琴组件的可访问性，但不确定语义。另外下面我添加了我正在使用的咏叹调标签。以下是否足够或我应该使用任何额外的咏叹调标签？

<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，或者最好的做法是做一些完全不同的事情？如上所示的任何简单示例都将非常感激。

Answer 1

我建议去qzxswpoi页面上使用手风琴模式。

听起来你所引用的所有其他网站都在前面提到的W3C页面上使用相同的模式，这很棒。跨应用程序的一致性是拥有该模式的目的。

你不应该在手风琴上使用qazxsw poi。这是为qazxsw poi。