React 手风琴组件的语义正确 html

Question

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

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

我读过几篇文章，建议最好为手风琴 header 使用 button html 元素。我读过这个 gitHub post。此 post 还 link 显示正在使用的按钮的示例。

我发现的另一个示例来自 accessible-accordion-pattern，它还显示了 button 和 div 方法的使用。在手风琴容器中使用 button 而不是 div 的理由是什么？

我发现的另一篇文章来自 Carnegie Museums of Pittsburgh 及其可访问性。该示例还显示了对手风琴 header 使用 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 用于手风琴 header 并且还包含 ul 和 li 还是最好的做法是做一些完全不同的事情？如上显示的任何简单示例将不胜感激。

Answer 1

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

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

你不应该在手风琴上使用 role="tab"。那是 Tabs pattern.

React 手风琴组件的语义正确 html

Semantically correct html for react accordion component

html

accessibility

wai-aria