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?
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/)
It is mainly for accessibility purposes. http://john.foliot.ca/aria-hidden/. You can remove or change the "role"
It really depends whether you wanted to implement actual tabs (e.g. tab panels are toggled dynamically by a script) or a simple nav (e.g. links open a new page). In case of simple nav (even if it's styled as tabs by CSS) you should not implement any of the roles tablist, tab, tabpanel, presentation...
In your case role="presentation" on <li> element is not required. It would be required thought if an implied role of a list element <ul> was changed e.g. <ul role="tablist"> or <ul role="tree"> etc. In that case <ul> element is not a list anymore and <li> elements do not have a list container which is illegal. Therefore the role of <li> elements can be set to role="presentation" which means simply "no role". In opposite to <ul> if a role="tablist" is set on a <div> element then the issue does not exists and there is no need for role="presentation"
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
https://getbootstrap.com/docs/4.3/components/navs/
Which is right?
Please decide for yourself. I put my research arguments below.
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
