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?
presentation
in draft for 1.1 here, and in 1.0 here. There's some verbiage that DOM markedpresentation
and below will not be displayed in screen readers, which scares me a little. A little surprised Bootstrap uses it here.<a>
tags in the example provided are missing their fragment identifiers. Oftentimesa
tags are cajoled to use#
in thehref
to put them in focus order but, if the example was copied more or less from Bootstrap documentation, it may be they're using the presentation role to hide the descendent anchors from the accessibility API in order to provide more accessible documentation.