Accessible accordion roles (tab and tablist)

问题:

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

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?

Thanks in advance.

Also I know that there is more than just that to make an accordion accessible, but that is currently the only issue I really don't know why it doesn't work.

回答1:

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