htmlaccessibilitywai-aria

Is aria-label useful for tablist role?


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?


Solution

  • 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 use aria-label.

    As such, the omission in the Bootstrap example is allowed, although inadvisable.