TabaKordion是一个jQuery插件，用于使用ARIA属性创建完全可访问的选项卡、手风琴和剧透内容。

如何使用它:

1.要开始，请下载并加载jquery.TabaKordion.js查询jQuery之后的脚本。

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/dist/jquery.TabaKordion.min.js"></script>

2.初始化插件。

$(function() {
  $('.tabakordion').TabaKordion();
});

3.创建一个内容切换控件，该控件可用于使用隐藏和显示区域咏叹调膨胀.aria控件用于维护标记关联。键盘交互：

• 选项卡：在触发器之间移动
• 输入或空格：切换隐藏/显示区域的显示。

<a href="#showhide-region" id="showhide" class="tabakordion showhide">
  Show/Hide
</a>
<div id="showhide-region">
  Any Content Here
</div>

4.创建一个选项卡UI，其中包含选项卡及其关联的内容面板。键盘交互：

• 选项卡：只有活动选项卡处于选项卡顺序中。用户通过按下选项卡键到达选项卡面板组件，直到活动选项卡标题获得焦点。
• 左箭头：当焦点在选项卡上时，按下向左箭头将焦点移动到选项卡列表中的上一个选项卡并激活该选项卡。当焦点在标签列表中的第一个选项卡上时按下向左箭头，将移动焦点并激活列表中的最后一个选项卡。
• 右箭头：当焦点放在选项卡上时，按下向右箭头将焦点移动到选项卡列表中的下一个选项卡并激活该选项卡。当焦点在选项卡列表中最后一个选项卡上时按下向右箭头，焦点将移动到并激活列表中的第一个选项卡。
• 向上箭头：行为与向左箭头相同，以便支持垂直选项卡
• 向下箭头：行为与向右箭头相同，以便支持垂直选项卡
• 控制+向上箭头：焦点位于选项卡面板内的任何位置时，按Control+向上箭头将焦点移动到该面板的选项卡。
• 控制+翻页：当焦点在选项卡面板内时，按Control+PageUp将焦点移动到选项卡列表中上一个选项卡的选项卡，并激活该选项卡。当焦点位于选项卡列表中的第一个选项卡面板时，按Ctrl+PageUp将焦点移到选项卡列表的最后一个选项卡，并启动该选项卡。
• 控制+向下翻页：当焦点在选项卡面板内时，按Control+PageDown将焦点移动到选项卡列表中下一个选项卡的选项卡并激活该选项卡。当焦点在标签列表中最后一个选项卡面板时，按Ctrl+PageUp将焦点移动至标签列表中的第一个选项卡并激活那个选项卡。

<div class="tabakordion tabs">
  <ul>
    <li id="tab1" class="tab" aria-controls="panel1">
      <a href="#panel1">Tab 1</a>
    </li>
    <li id="tab2" class="tab selected" aria-controls="panel2">
      <a href="#panel2">Tab 2</a>
    </li>
    <li id="tab3" class="tab" aria-controls="panel3">
      <a href="#panel3">Tab 3</a>
    </li>
  </ul>
  <div id="panel1" class="panel" aria-labelledby="tab1">
    Tab 1 Content
  </div>
  <div id="panel2" class="panel" aria-labelledby="tab2">
    Preselected panel
  </div>
  <div id="panel3" class="panel" aria-labelledby="tab3">
    Tab 3 Content
  </div>
</div>

5.创建一个手风琴组件。标记必须具有的角色小报作家并且已经aria-multiselectable="true"这将使辅助技术，如屏幕阅读器，能够传达出演奏者是手风琴或多选择的演奏者。这也会告诉用户键盘导航匹配的是手风琴，而不是制表符。键盘交互：

• 选项卡-当焦点位于可折叠页眉上时，按Tab键可按以下方式移动焦点：
  1. 如果可折叠标题中存在交互式字形或菜单，则焦点按顺序移动到每个字形或菜单。
  2. 当相应的面板展开时（其咏叹调膨胀状态为“true”），然后焦点移动到面板中的第一个可聚焦元素。
  3. 如果面板折叠（其aria展开状态为“false”或缺失），或者，当到达面板的最后一个交互式元素时，下一次按Tab键移动焦点，如下所示：
     • 如果后续手风琴面板已经展开，则焦点移动到该后续面板中的第一个可聚焦元素。
     • 如果没有展开后续的可折叠面板，则焦点移动到可折叠部件外部的第一个可聚焦元件。
• 向左箭头
  • 当焦点在可折叠标题上时，按下向上/向左箭头键将焦点移动到上一个逻辑可折叠标题。
  • 当焦点到达第一个标题时，进一步按下向上/向左箭头键（可选）以换行到第一个标题。
• 向右箭头
  • 当焦点在可折叠标头上时，按下向下/向右键将焦点移动到下一个逻辑可折叠标头。
  • 当焦点到达最后一个标题时，进一步按下向下/向右箭头键，可选择换行到第一个标题
• 向上箭头-行为与左箭头相同
• 向下箭头-行为与右箭头相同
• 控制+向上箭头-将焦点分别从可折叠内容中的任意位置移动到与其关联的可折叠标题或选项卡。
• 控制+翻页 -
  • 当焦点在可折叠窗格内时，按下Control+PageUp将焦点移动到上一个可折叠窗格的可折叠标题。
  • 当焦点位于第一个可折叠的标题内容时，按下Control+PageUp可选择将焦点移动到最后一个可折叠标题。
  • 焦点将简单地移动到标题，并需要Enter/Space来展开/折叠手风琴窗格。
• 控件+PageDown -
  • 当焦点在可折叠窗格内时，按下Control+PageDown将焦点移动到可折叠窗格的标题。
  • 当焦点在最后一个可折叠的标题内容中时，按下Control+PageDown可选择将焦点移动到第一个可折叠标题。
  • 在手风琴的情况下，焦点只需移动到标题，并需要Enter/Space来展开/折叠手风琴窗格。
• 终止-当焦点在手风琴式页眉上时，按下End键将焦点移动到最后一个手风琴式页眉。
• 家庭-当焦点在手风琴式页眉上时，按下Home键将焦点移动到第一个手风琴式页眉。
• 输入/空格-当焦点放在手风琴式标题上时，按下回车/空格键切换相应面板的展开。
  • 如果折叠，面板将展开，其aria展开状态将设置为“true”。
  • 如果展开，面板将折叠，其aria展开状态将设置为“false”。
• Shift+Tab键-通常是Tab的反面。
• Alt+删除 -
  • 当允许删除时，将焦点放在选项卡面板或选项卡内的任何位置，按下Alt+Delete将从选项卡界面控件中删除当前选项卡和选项卡面板。如果选项卡界面中保留了其他选项卡，则焦点将转到选项卡列表中的下一个选项卡。如果没有其他选项卡保留，则焦点移动到上一个选项卡面板中保持焦点的最后一个位置。
  • 提供关闭选项卡的键击的替代方案是提供与选项卡标题相关联的上下文菜单。当焦点在选项卡上时，按下Shift-F10或按下鼠标右键将打开一个带有关闭选项的上下文菜单。
  • 在允许进行删除之前，应向用户发出警告。

<div class="tabakordion accordion nomultiselect">
  <h3 id="tab1" class="tab" aria-controls="panel1">Accordion 1</h3>
  <div id="panel1" class="panel" aria-labelledby="tab1">
    Accordion 1
  </div>
  <h3 id="tab2" class="tab" aria-controls="panel2">Accordion 2</h3>
  <div id="panel2" class="panel" aria-labelledby="tab2">
    Accordion 2
  </div>
  <h3 id="tab3" class="tab" aria-controls="panel3">Accordion 3</h3>
  <div id="panel3" class="panel" aria-labelledby="tab3">
    Accordion 3
  </div>
</div>

预览截图

完全可访问 选项卡/Accodion/Toggle插件 jQuery TabaKordion