Rola Struktura dokumentu

`toolbar`

Oznacza kontener jako pasek narzędzi — zgrupowany zestaw powiązanych kontrolek (pasek formatowania, rząd przycisków ikony). Zmniejsza koszt tabulacji: pasek 10 przycisków staje się jednym punktem tabulacji, a strzałki służą do poruszania się między przyciskami.

Kiedy używać

Gdy masz rząd (lub kolumnę) co najmniej trzech powiązanych kontrolek — pasek formatowania edytora tekstu, rząd ikon nad polem czatu, akcje edycji zdjęć. Korzyścią jest wydajność klawiatury: zamiast każdego przycisku jako oddzielnego punktu tabulacji, pasek narzędzi zajmuje jeden punkt i udostępnia swoje dzieci przez klawisze strzałek.

Pasek narzędzi MUSI mieć dostępną nazwę (aria-label lub aria-labelledby). Domyślna orientacja to pozioma; ustaw aria-orientation="vertical" dla pionowego paska.

Elementy potomne to zazwyczaj przyciski (<button>), z role="separator" między grupami logicznymi. Paski narzędzi MOGĄ zawierać przyciski, przyciski przełączające, łącza, przyciski menu i inne małe kontrolki — ale nie całe formularze ani widżety listowe.

Kontrakt klawiatury i fokusu

Zgodnie z wzorcem APG dla paska narzędzi:

Tab przenosi fokus do paska narzędzi na pierwszą lub ostatnio skoncentrowaną kontrolkę; Tab przenosi fokus NA ZEWNĄTRZ.
Strzałki Prawo/Lewo (Góra/Dół dla pionowych) przesuwają fokus między elementami paska.
Home / End przeskakują do pierwszego / ostatniego elementu.
Każdy przycisk nadal aktywuje się przez Enter lub Space — kontrakt aktywacji nie zmienia się przez rolę toolbar.

Stosuj roving tabindex: tylko jeden element paska narzędzi ma tabindex="0" w danym momencie.

Typowe błędy

Wszystkie przyciski w pasku narzędzi mają tabindex="0". Niweluje to cały sens — Tab i tak przechodzi przez każdy przycisk.
Pasek narzędzi bez dostępnej nazwy.
Przyciski paska bez etykiet, bo wizualnie to ikona. Dodaj aria-label do każdego.
Mieszanie paska narzędzi z semantyką role="group". Wybierz jedno: toolbar zakłada nawigację strzałkami, group — nie.
role="toolbar" na elemencie <nav>. Role są sprzeczne — użyj jednej z nich.

Przykład

<div role="toolbar" aria-label="Text formatting">
  <button type="button" tabindex="0"  aria-pressed="false" aria-label="Bold">B</button>
  <button type="button" tabindex="-1" aria-pressed="false" aria-label="Italic">I</button>
  <button type="button" tabindex="-1" aria-pressed="false" aria-label="Underline">U</button>
  <span role="separator" aria-orientation="vertical"></span>
  <button type="button" tabindex="-1" aria-label="Insert link">Link</button>
</div>