2 Correct answers
Whatever you name the 'tab-pane' id should be what you name the 'aria-controls' and the href should also be named the same - Bootstrap js/jQuery uses this to find and open the correct tab-pane with the matching id.
Check out the default Bootstrap 4 code/documentation listed at the website:
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
</li
Am I missing the point? The subject of this topic is
Aria controls error
how can you continue to ignore this issue?
The following is cited in the linked document that I quoted:
Note that navigation bars, even if visually styled as tabs with the .nav-tabs class, should not be given role="tablist", role="tab" or role="tabpanel" attributes.
For a nore elaborate explanation: https://www.w3.org/TR/wai-aria-practices/examples/tabs/tabs-2/tabs.html
25
Replies
Blimey.... It did make me wonder that the component still worked despite aria errors.
By @Weat01
Browsers are very tolerant, as long as the flow is not impacted like when a missing end tag is missing.
Blimey.... It did make me wonder that the component still worked despite aria errors.
By @Weat01
Component will still work as aria has nothing to do with html/javascript/css its another 'language' which unless you are an accessibilty expert you probably shouldnt attempt to deploy and as you can see if Bootstrap struggles to implement it correctly, according to how its meant to be officially applied, what's the chances that you will.
Will dreamweaver cc update itself to bootstrap 5 and update html pages automatically, or would that need to be done manually?
By @Weat01
You CANT use Bootstrap 5 where you have deployed Bootstrap 4 code - the 2 are NOT compatible and no nothing gets automatically updated.
Having looked at this Bootstrap 5 tabs component is almost identical to Bootstrap 4 tabs component, except for one uses anchor tags (Bootstrap 4) to evoke the tab panels and the other uses buttons (Bootstrap 5) so you may as well believe that Bootstrap 5 is the more current at handing accessibility aria, therefore you can easily update Bootstrap 4 tabs to be identical to Bootstrap 5 tabs:
Bootstrap 4 tabs code updated to be identical to Bootstrap 5 tabs:
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="home-tab" type="button" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="profile-tab" type="button" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="contact-tab" type="button" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</button>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">Home</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">Profile</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">Contact</div>
</div>
Then add the below css selectors to your css file (NOT the Bootstrap 4 default css file but the css file where you over-ride the default Bootstrap css styling)
#myTab .nav-link {
color: #0d6efd;
background-color: transparent;
}
#myTab .nav-link.active {
color: #212529;
background-color: transparent;
}
That's Bootstrap 5 documentation - did Bootstrap 4 get it wrong as the tab example on the Bootstrap 4 website includes the aria attributes that are missing now from Bootstrap 5 and replaced with buttons?
By @osgood_
This is for Bootstrap 4 - no role.
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>Thats not what is on the Bootstrap 4 official website, unless they have various versions listed. The version I posted directly from the website sample has 'role' and the other aria attributes mentioned.
By @osgood_
It is important for Aria to be included if you do not want to be sued for neglect. One reason to choose `professional` developers over backyard hacks.
https://css-tricks.com/why-how-and-when-to-use-semantic-html-and-aria/
AdChoices