Why do Bootstrap tabs have role="presentation"?

Question

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 role="presentation" to the list items in their nav list.

So I put together a little chunk of test HTML from the Bootstrap template:

<ul class="nav nav-tabs">   <li role="presentation" class="active"><a href="#">Home</a></li>   <li role="presentation"><a href="#">Profile</a></li>   <li role="presentation"><a href="#">Messages</a></li> </ul>  <ul class="nav nav-tabs">   <li class="active"><a href="#">Home</a></li>   <li><a href="#">Profile</a></li>   <li><a href="#">Messages</a></li> </ul> 

The ARIA spec says that presentation is a role for which:

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,

It seems to me that the <li> 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.

Also, when accessing that test HTML with ChromeVox, the lists are announced identically. So it seems that the role doesn't have any practical effect.

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?

Answer 1

See the write up about accessible tabs by Marco at https://www.marcozehe.de/2013/02/02/advanced-aria-tip-1-tabs-in-web-apps/

His implementation has role="presentation" on the li to indicate "that the screen reader should ignore the list items themselves" and then adds the "tab" role on the links "mapping the roles to the intended screen-reader recognizable element type."

One point that was made in an issue in the bootstrap accessibility project (https://github.com/paypal/bootstrap-accessibility-plugin/issues/59) is that (right or wrong) tabs are fairly commonly used as navigation so it would be inappropriate to always include the roles tablist and tab. As Marco's article notes: "There are many circumstances where tabs are not the appropriate semantics."

BTW our job isn't made any easier by the fact that individual combinations of screen readers and browsers fail to support this in the same way. (See this article for a write up on that: http://john.foliot.ca/aria-hidden/)