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

Question

我在bootstrap 3上创建了一个可访问的站点但我的问题是标签不可访问。 如何使标签可访问。我的代码就像这样。屏幕阅读器读取它像链接列表

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