Question

我正在使用以下WordPress插件：手风琴：https://wordpress.org/plugins/responsive-accordion-and-collapse/ 标签：https://wordpress.org/plugins/tabs-responsive/

他们遇到了屏幕阅读器正在阅读的问题。我是否可以使用使这些可访问性兼容的代码（javascript或jQuery）？

以下是标签和手风琴如何在前端HTM1上显示的示例代码。请帮助，我不想使用其他手风琴或制表系统。

该网站必须符合可访问性。

标签：

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

手风琴：

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

屏幕阅读器不会阅读打开或关闭的手风琴，也不会阅读第二或第三个标签。

Answer 1

选项卡代码看起来正常。它遵循“ WAI-ARIA Authoring Practices 1.1”上的模式。什么不起作用？

手风琴代码看起来有些古怪。创作实践中也有accordion recommendations。手风琴不应具有任何“制表符”角色，aria-expanded仅应在进行扩展的按钮上设置。从手风琴面板中将其删除。

当用户选择适当的按钮时，Tab示例和“手风琴”示例都应在aria-expanded的值之间切换true / false。

此外，将aria-expanded设置为true的标签页也需要将aria-selected设置为true。

所有内容都记录在上面的创作实践链接中。

需要使Tab和Accordion插件可访问/屏幕阅读器兼容

1 个答案: