title: Why do Bootstrap tabs have role="presentation"?
body: <p>I'm working on a design system that's extending from the Bootstrap framework. One of the key goals is accessibility. When implementing Bootstrap tabs I see that they apply <code>role="presentation"</code> to the list items in their nav list.</p>
  
  <p>So I put together a little chunk of test HTML from the Bootstrap template:</p>
  
  <pre><code>&lt;ul class="nav nav-tabs"&gt;
    &lt;li role="presentation" class="active"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
    &lt;li role="presentation"&gt;&lt;a href="#"&gt;Profile&lt;/a&gt;&lt;/li&gt;
    &lt;li role="presentation"&gt;&lt;a href="#"&gt;Messages&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;ul class="nav nav-tabs"&gt;
    &lt;li class="active"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Profile&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Messages&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>The ARIA spec says that presentation is a role for which:</p>
  
  <blockquote>
    <p>The intended use is when an element is used to change the look of the
    page but does not have all the functional, interactive, or structural
    relevance implied by the element type,</p>
  </blockquote>
  
  <p>It seems to me that the <code>&lt;li&gt;</code> elements have a structural relevance to someone using an accessibility device as they tell you how many tabs are present. If you were to discover, for example, that the third tab held the information you were interested in, navigating to the list and knowing there are three tabs would let you get to what you want more quickly.</p>
  
  <p>Also, when accessing that test HTML with ChromeVox, the lists are announced identically. So it seems that the <code>role</code> doesn't have any practical effect.</p>
  
  <p>I've Googled this question, but haven't found any discussion of it. So, does anyone know why this is part of the Bootstrap framework?</p>