Search code examples
accessibilityaccordion

How can the screenreader access/read the content in an accordion tabpanel?


I've got the following code that has a single accordion element (for brevity. it would normally be more) in an open state. Screen readers do not seem to be able to read "My Copy", they just read the title.

However, if I put a fieldset with a form input in there, you can tab to the form input easily. What the hell am i doing wrong here? Why can't the screen reader tab to and read the copy?

<div class="js-accordion" aria-multiselectable="false" role="tablist">           
    <h2 class=""><button class="" role="tab" id="accordionznntk0bkn5d_tab1" aria-controls="accordionznntk0bkn5d_panel1" aria-selected="true" type="button" aria-expanded="true">
        My title
    </button></h2>
    <div class="js-accordion__panel" role="tabpanel" aria-labelledby="accordionznntk0bkn5d_tab1" id="accordionznntk0bkn5d_panel1">
        <div class="">
              <p>My copy </p>
        </div>
    </div>
</div>

Solution

  • Sounds like you're asking how to navigate using a screen reader. TAB is certainly one way to navigate but only one of many ways. If you're on a PC and using NVDA or JAWS, try the down arrow key. It essentially walks every element in the DOM (that isn't hidden).

    So from your My title button, you can press the down arrow and you should hear "My copy".