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总是说“标题1的标题1中的标签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文本同时出现？

提前致谢。

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

Answer 1

您需要做的是在所有不属于Tablist特定角色的结构上设置role =“presentation”。

可访问的手风琴角色（标签和标签列表）

1 个答案: