Html 可访问的手风琴角色（选项卡和小报列表）

我正在处理一个可访问的手风琴，我不太清楚为什么下面的代码不能与画外音正常工作：

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

虽然这是可行的（画外音说“第1页，共2页…”），但我真的需要

.accordion\u项目

围绕我的实际内容来设计样式。虽然两者之间只有很小的区别，但我不确定为什么只有第二个代码真正适用于屏幕阅读器。所以我想问你，是否有任何方法可以同时拥有我周围的

.accordion\uu项目

和正确的画外音文本

提前谢谢

---

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

你需要做的是在所有结构上设置role=“presentation”，这些结构不是特定于小报的角色。

你制作了手风琴插件吗？看起来你有一个很好的版本。希望看到实现。

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