create accessible tabs using bootstrap 3

Question

I am creating a accessible site on bootstrap 3 but my problem is that tabs are not accessible. how can i make tabs accessible.MY code is like this.Screen Reader reading it like link list

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