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的。

语义正确的HTML，用于React手风琴组件

1 个答案: