If we take a look at Bootstrap tab example:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA3dLNH46c0X0pANo8jQd+2uAGeZHuFr8iI1wCdh0Pej1krpDTRj9PI4y3eC9S" crossorigin="anonymous">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home-tab-pane" type="button" role="tab" aria-controls="home-tab-pane" aria-selected="true">Home</button>
</li>
…
</ul>
…we see, that Bootstrap authors didn't specify aria-label
for the tablist (<ul>
). Is it OK? Maybe, it'd be better to describe the tablist?
Per the WAI ARIA Authoring Practicing Guide's page on Providing Accessible Names and Descriptions, labelling is "Recommended" but not "Required". From the page:
- Helps screen reader users understand the context and purpose of the tablist.
- Use
aria-labelledby
if a visible label is present, otherwise usearia-label
.
As such, the omission in the Bootstrap example is allowed, although inadvisable.