html - 可访问的 Accordion 角色(tab 和 tablist)

我正在制作一个可访问的 Accordion ，但我不太确定为什么以下代码不能与 VoiceOver 一起正常工作:

<ul class="accordion" role="tablist">
<li class="accordion__item">
    <h3 class="accordion__head" id="tab1" tabindex="0" role="tab"  aria-controls="panel1">Headline</h3>
    <div class="accordion__content" id="panel1" role="tabpanel" aria-labelledby="tab1" aria-hidden="true">
        Content
    </div>
</li>
<li class="accordion__item">
    <h3 class="accordion__head" id="tab2" tabindex="0" role="tab" aria-controls="panel2">Headline</h3>
    <div class="accordion__content" id="panel2" role="tabpanel" aria-labelledby="tab2" aria-hidden="true">
        Content
    </div>
</li>

VoiceOver 总是说“tab 1 of 1 Heading 1...”，尽管在我的 role="tab" 中显然有两个不同的 .accordion 。所以我尝试删除每个 .accordion__item 并最终得到类似的结果:

<div class="accordion" role="tablist">
    <h3 class="accordion__head" id="tab1" tabindex="0" role="tab"  aria-controls="panel1">Headline 1</h3>
    <div class="accordion__content" id="panel1" role="tabpanel" aria-labelledby="tab1" aria-hidden="true">
        Content 1
    </div>
    <h3 class="accordion__head" id="tab2" tabindex="0" role="tab" aria-controls="panel2">Headline 2</h3>
    <div class="accordion__content" id="panel2" role="tabpanel" aria-labelledby="tab2" aria-hidden="true">
        Content 2
    </div>
</div>

虽然这有效(VoiceOver 说“第 1 个标签，共 2 个......”)我真的需要 .accordion__item 围绕我的实际内容进行样式设置。尽管两者之间只有很小的区别，但我不确定为什么只有第二个代码才真正适用于屏幕阅读器。所以我问你是否有办法同时拥有我周围的 .accordion__item 和正确的 VoiceOver 文本？

提前致谢。

此外，我知道让 Accordion 变得可访问的不仅仅是这个，但这是目前唯一的问题，我真的不知道为什么它不起作用。

最佳答案

您需要做的是在所有不是 tablist 特定角色之一的结构上设置 role="presentation"。

关于html - 可访问的 Accordion 角色(tab 和 tablist)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/23795169/