html - react Accordion 组件的语义正确 html

Question

我目前有一个具有以下语义的功能性 React Accordion 组件:

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

我读过几篇文章，建议最好为 Accordion 标题使用 button html 元素。我读过这个gitHub邮政。这篇文章还链接到一个示例，该示例显示了正在使用的按钮。

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

我找到的另一篇文章来自 Carnegie Museums of Pittsburgh以及它们的可访问性。该示例还展示了使用 button 作为 Accordion 标题。这也让我想到了另一个问题。在他们的示例中，他们使用 ul 和 li html 标记。这是正确的方法吗？我还没找到另一个类似这样的例子。

我目前正在尝试增加 Accordion 组件的可访问性，但不确定语义。同样在下面，我添加了我正在使用的 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 用于 Accordion header 并合并 ul 和 li 还是做完全不同的事情的最佳实践？如上显示的任何简单示例将不胜感激。

Answer 1

我建议去源代码并在 WAI-ARIA Authoring Practices 1.1 上使用 Accordion 模式页面。

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

你不应该在 Accordion 上使用 role="tab"。那是为了 Tabs pattern .