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

Question

我目前有一个具有以下语义的功能性 React 手风琴组件：

<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 标记。这是正确的方法吗？我还没有找到另一个看起来像这样的例子。

我目前正在尝试增加手风琴组件的可访问性，但不确定语义。同样在下面，我添加了我正在使用的 aria 标签。以下内容是否足够或者我应该使用任何额外的 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 还是做一些完全不同的事情的最佳做法？任何如上所示的简单示例将不胜感激。

Answer 1

我建议去源代码并使用 WAI-ARIA Authoring Practices 1.1 页面上的手风琴模式。

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

您不应该在手风琴上使用role="tab"。那是给Tabs pattern的。