可访问的手风琴角色（tab 和 tablist）

Question

我正在制作一个可访问的手风琴，但我不太确定为什么以下代码不能与 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 of 2 ...”）我真的需要.accordion__item围绕我的实际内容进行样式设置。尽管两者之间只有很小的区别，但我不确定为什么只有第二个代码才真正适用于屏幕阅读器。所以我问你是否有任何方法可以同时拥有我的周围.accordion__item和正确的 VoiceOver 文本？

提前致谢。

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

Answer 1

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