Twitter bootstrap 使用bootstrap 3创建可访问的选项卡

我正在Bootstrap3上创建一个可访问的站点，但我的问题是选项卡不可访问。 如何使选项卡可访问。我的代码是这样的。屏幕阅读器像链接列表一样读取它

 <div class="tabbable">
   <ul class="nav nav-tabs">
    <li class="active"><a href="#pane1" data-toggle="tab">Tab 1</a></li>
    <li><a href="#pane2" data-toggle="tab">Tab 2</a></li>
    <li><a href="#pane3" data-toggle="tab">Tab 3</a></li>
    <li><a href="#pane4" data-toggle="tab">Tab 4</a></li>
  </ul> 
<div class="tab-content">
  <div id="pane1" class="tab-pane active">
    <h4>The Markup</h4>
  <pre>Code here ...</pre>
</div>
<div id="pane2" class="tab-pane">
<h4>Pane 2 Content</h4>
  <p> and so on ...</p>
</div>
<div id="pane3" class="tab-pane">
  <h4>Pane 3 Content</h4>
</div>
<div id="pane4" class="tab-pane">
  <h4>Pane 4 Content</h4>
</div>
</div><!-- /.tab-content -->

加价
代码在这里。。。
窗格2内容
等等

窗格3内容
窗格4内容

---

欢迎加入！你听说过Paypal开发人员提供的吗？可能很方便（这是最近的，我还没有测试过）我已经添加了它，但是标签不可访问。阅读标签菜单就像阅读链接列表是一个问题吗？它们中的大多数都是这样编码的，不管是不是自举。如果你想改进它，你必须用WAI-ARIA（

tablist

组件）来管理它。是的，它读起来就像一个链接列表。谢谢WAI-ARIA的帮助