可访问的手风琴角色（选项卡和选项卡列表） [英] Accessible accordion roles (tab and tablist)

问题描述

我正在研究可访问的手风琴，但我不确定为什么以下代码不能在VoiceOver上正常工作：

I'm working on an accessible accordion and I'm not quite sure why the following code does not work properly with 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标题1 ...，尽管在我的。手风琴 role = tab c>。因此，我尝试删除每个 .accordion__item 并得到如下结果：

VoiceOver always says something like "tab 1 of 1 Heading 1...", although there clearly are two different role="tab" inside my .accordion. So i tried removing each .accordion__item and ended up with something like that:

<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表示标签2之1 ...），我真的需要 .accordion__item 围绕我的实际内容进行样式设置。尽管两者之间几乎没有什么区别，但我不确定为什么只有第二个代码真正可以与Screen Readers一起使用。所以我问你是否有办法同时获取周围的 .accordion__item 和正确的VoiceOver文本？

While this works (VoiceOver says "tab 1 of 2 ...") I really need the .accordion__item around my actual content for styling. Although there is only very little difference between the two I'm not sure why only the second code really works with Screen Readers. So I'm asking you if there is any way to have both my surrounding .accordion__item and a correct VoiceOver text?

预先感谢。

此外，我知道使手风琴易于使用还不止于此，但这是我真正不知道的唯一问题不知道为什么它不起作用。

推荐答案

您需要做的是设置role = presentation ，而不是属于Tablist特定角色之一的所有结构。

What you need to do is set role="presentation" on all the structures that are not one of the tablist specific roles.

这篇关于可访问的手风琴角色（选项卡和选项卡列表）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！