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

Answer 2

role=presentation on <li> is ONLY needed if there is a role on <ul> too e.g. <ul role="tablist">.

It's because <li> belongs to <ul> but not to <ul role="tablist">. Such element is not <ul> anymore. It's same as <div role="tablist"> now - its semantics has changed by assigning a role. You can run an Accessibility Audit from Chrome Dev Tools and you will get a warning "List items (<li>) are not contained within <ul> or <ol> parent elements." in the given example. It will not be valid.

I hope that clarifies.

Do you need role at all?

It really depends whether you wanted to implement actual tabs (tabs are toggled dynamically by javascript) or a simple nav (e.g. standard links that can be bookmarked and/or opened in a new page). Visually both can be styled the same, as tabs, but structurally in case of a simple nav you should not implement any of the roles tablist, tab, tabpanel, presentation etc... Just let them be standard list with links structurally.

Arguments to use role="presentation" on tablists

• An example from w3.org explains exactly what is going on here (but note that role=tablist is required): https://www.w3.org/TR/wai-aria-practices/#presentation_role
• Last example from the actual ARIA specification https://www.w3.org/TR/wai-aria-1.1/#presentation
• Blog post by Marco, as mentioned in the answer from @peater https://marcozehe.de/2013/02/02/advanced-aria-tip-1-tabs-in-web-apps/
• Paypal Accessibility plugin implements them too, which is the point how it got into Bootstrap 3.x https://github.com/paypal/bootstrap-accessibility-plugin/blob/master/README.md#tab-panel

Furthermore...

In Bootstrap 3.4 they still keep using role="presentation" https://getbootstrap.com/docs/3.4/javascript/#tabs-usage

In Bootstrap 4.3 they decided against using role="presentation" which I personally consider wrong and also it does not pass Accessibility Audit from Chrome Dev Tools https://getbootstrap.com/docs/4.3/components/navs/

Answer 3

It is mainly for accessibility purposes. http://john.foliot.ca/aria-hidden/. You can remove or change the "role"