可访问 Bootstrap 下拉菜单中的手风琴

Question

我已经按照 Bootstrap 推荐的标记实现了一些手风琴，但它并不完全符合 ARIA。我正在研究这样的事情：

http://oaa-accessibility.org/examplep/accordian1/

但是，当我按 Tab 键和箭头 space 并输入键盘键时，行为不是预期的。 Bootstrap 不处理按键事件并且缺少一些 aria 属性 and/or 未正确更新（即 aria-selected、tabindex）

我已经尝试将 JavaScript 代码集成到可访问的示例中，但我认为它并不像我希望的那样流畅。

我有这个代码笔http://codepen.io/anon/pen/jWWewr

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default"> ... here goes the panel-heading
  </div>
  <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"> ... here goes the panel contents
  </div>
</div>

几个问题：

第一次尝试在第二个和最后一个面板中显示（按 space 栏或回车键），请不要在第一次尝试时打开。也许只是标记问题？或者有人可以帮助我发现代码中的任何错误...
是否可以在 Bootstrap 中实现此功能而无需此特殊脚本并仅指定符合 aria 标准的标记？
如果答案是否定的，将其转换为 Bootstrap 插件的最佳方法是什么？谁能指出我编写 Bootstrap 插件的正确路径？

提前致谢！

Answer 1

要回答您的第一个问题，您的 HTML 标记和 TablPanel.togglePanel() 代码存在问题。

togglePanel() 接收选项卡 (div.panel-heading)，然后查看 children 面板。 (div.panel-collapse) 它检查 "aria-hidden" 属性，如果为真（面板隐藏），则将其设置为假。（显示面板）

但是，在您的标记中，所有 div.panel-collapse 都有 aria-hidden 未定义，因此 tabPanel 假定它们可见并隐藏它们，设置 aria-hidden =真。（第二次点击然后发现 aria-hidden '因为现在它已经被设置，它设置为 false 并显示面板）

在未开封的 div.panel-collpase 上设置 aria-hidden=true，然后事情应该没问题。 :)

至于其余的，我不相信你可以单独使用 Bootstrap/aria mark-up 来做你想要的，手风琴行为的 Boostrap JS 代码（collapse.js) 没有实现 aria-selected、aria-hidden 或键盘侦听器，因此您必须编写一个插件。唉，我从来没有做过。 :/

可访问 Bootstrap 下拉菜单中的手风琴

Accessible Bootstrap Accordion inside Dropdown

html

wai-aria

twitter-bootstrap-3