Need to make Tab and Accordion Plugin Accessible/Screen reader compatible

Question

I am using the following WordPress Plugins: Accordions : https://wordpress.org/plugins/responsive-accordion-and-collapse/ Tabs: https://wordpress.org/plugins/tabs-responsive/

They are having issues being read by screenreaders. Is there code (javascript or jQuery) I can use that will make these accessibility compliant?

Below is example code of how the tabs and accordion display on the front end HTMl. Please help, I do not want to go with another accordion or tab system.

The website must be accessibility compliant.

Tabs:

<div id="tab_container_3998">
  <ul class="wpsm_nav wpsm_nav-tabs" role="tablist" id="myTab_3998">
    <li role="presentation" class="">
      <a href="#tabs_desc_3998_1" aria-controls="tabs_desc_3998_1" role="tab" data-toggle="tab" aria-expanded="false">
        <span>Tab1</span>
      </a>
    </li>
    <li role="presentation" class="active">
      <a href="#tabs_desc_3998_2" aria-controls="tabs_desc_3998_2" role="tab" data-toggle="tab" aria-expanded="true">
        <span>Tab2</span>
      </a>
    </li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content" id="tab-content_3998">
    <div role="tabpanel" class="tab-pane" id="tabs_desc_3998_1">
      <h1>Title 1</h1>
      <p>This is content in a tab, <a href="http://www.google.com">please read.&nbsp;</a></p>
    </div>
    <div role="tabpanel" class="tab-pane  active animated fadeIn" id="tabs_desc_3998_2">
      <h1>Title 2</h1>
      <p>This is content in a second tab, <a href="http://www.google.com">please read.&nbsp;</a></p>
    </div>
  </div>
</div>

Accordions:

<div class="wpsm_panel-group" id="wpsm_accordion_3995">
  <!-- Inner panel Start -->
  <div class="wpsm_panel wpsm_panel-default">
    <div class="wpsm_panel-heading acc-a" role="tab">
      <h4 class="wpsm_panel-title">
        <a class="" data-toggle="collapse" data-parent="#wpsm_accordion_3995 " href="#ac_3995_collapse1" aria-expanded="true">
          <span class="ac_open_cl_icon fa fa-minus"></span>
          <span class="ac_title_class">
            Accordion Title 1 </span>
        </a>
      </h4>
    </div>
    <div id="ac_3995_collapse1" class="wpsm_panel-collapse collapse show in" style="" aria-expanded="true">
      <div class="wpsm_panel-body">
        <h1>Title 1</h1>
        <p>This is content in an accordion <a href="http://www.google.com">please read.&nbsp;</a></p>
      </div>
    </div>
  </div>
  <!-- Inner panel End -->
</div>

The screen readers don't read the accordions open or closed and don't read the second or third tabs.

Answer 1

The tab code looks ok. It follows the pattern on the " WAI-ARIA Authoring Practices 1.1 ". What is not working with it?

The accordion code looks a bit wonky. There are accordion recommendations in the authoring practices too. The accordion shouldn't have any "tab" roles and aria-expanded should only be set on the button that does the expanding. Remove it from the accordion panel.

Both the Tab example and Accordion example should toggle the value of aria-expanded between true/false as the user selects the appropriate button.

Also, the tab that has aria-expanded set to true also needs aria-selected set to true.

This is all documented in the authoring practices links above.