toolbar

Quando utilizzarlo

Quando si dispone di una riga (o colonna) di tre o più controlli correlati — una barra di formattazione per un editor di testo, la riga di icone sopra un campo di chat, le azioni di modifica di una foto. Il vantaggio è l’efficienza della tastiera: anziché avere ogni pulsante come tab-stop autonomo, la barra degli strumenti occupa un unico tab-stop ed espone i propri figli tramite i tasti freccia.

Una barra degli strumenti DEVE avere un nome accessibile (aria-label o aria-labelledby). L’orientamento predefinito è orizzontale; è necessario impostare aria-orientation="vertical" per una barra verticale.

I figli sono generalmente pulsanti (<button>), con role="separator" tra i gruppi logici. Le barre degli strumenti POSSONO contenere pulsanti, pulsanti a pressione alternata, link, menubutton e altri controlli di piccole dimensioni — ma non interi moduli o widget a lista.

Contratto di tastiera e focus

Come definito nel pattern APG per le barre degli strumenti:

• Tab sposta il focus nella barra degli strumenti sul primo controllo o sull’ultimo che aveva il focus; Tab lo sposta FUORI.
• I tasti freccia Destra/Sinistra (Su/Giù se verticale) si spostano tra gli elementi della barra.
• Home / End saltano al primo / all’ultimo elemento.
• Ogni singolo pulsante si attiva ancora con Invio o Spazio — il suo contratto di attivazione non è modificato dal ruolo toolbar.

Utilizzare un roving tabindex: solo un elemento della barra degli strumenti ha tabindex="0" per volta.

Errori comuni

• Tutti i pulsanti nella barra degli strumenti hanno tabindex="0". Vanifica l’intero obiettivo — Tab scorre comunque attraverso ogni pulsante.
• Barra degli strumenti priva di nome accessibile.
• Pulsanti della barra privi di etichetta perché il contenuto visivo è un’icona. È necessario aggiungere aria-label a ciascuno.
• Confusione tra toolbar e semantica role="group". Occorre sceglierne uno: toolbar implica la navigazione con i tasti freccia, group non lo fa.
• role="toolbar" su un elemento <nav>. I ruoli sono in conflitto — è necessario utilizzare l’uno o l’altro.

Esempio

<div role="toolbar" aria-label="Formattazione testo">
  <button type="button" tabindex="0"  aria-pressed="false" aria-label="Grassetto">B</button>
  <button type="button" tabindex="-1" aria-pressed="false" aria-label="Corsivo">I</button>
  <button type="button" tabindex="-1" aria-pressed="false" aria-label="Sottolineato">U</button>
  <span role="separator" aria-orientation="vertical"></span>
  <button type="button" tabindex="-1" aria-label="Inserisci link">Link</button>
</div>