tablist

Quando utilizzarlo

Attorno alla riga (o colonna) di elementi role="tab" in un’interfaccia a schede. Il tablist DEVE avere un nome accessibile tramite aria-label o aria-labelledby — senza di esso, un utente di screen reader che sente «elenco schede» non riesce a distinguere quale tablist si trovi nella pagina.

Le barre di schede verticali richiedono aria-orientation="vertical". Il valore predefinito è orizzontale, quindi l’attributo può essere omesso per le schede disposte in orizzontale.

Se le «schede» in questione sono in realtà link di navigazione verso altri URL, è preferibile usare <nav> con link <a> — il pattern in cui il clic modifica l’URL non è compatibile con la semantica del tablist.

Contratto tastiera + focus

Secondo il pattern APG per le schede:

• Il tasto Tab sposta il focus nel tablist e sulla scheda selezionata; un ulteriore Tab sposta il focus fuori (tipicamente nel tabpanel attivo).
• I tasti freccia sinistra/destra spostano il focus tra le schede (su/giù per i tablist verticali). Il wrap-around è facoltativo ma convenzionale.
• Home / Fine saltano alla prima / ultima scheda.
• Attivazione: in modalità automatica, i tasti freccia spostano il focus E selezionano. In modalità manuale (consigliata quando l’attivazione è onerosa), Spazio o Invio selezionano la scheda focalizzata.

Il tablist stesso non gestisce il focus — il focus va sulla scheda, non sul contenitore tablist.

Errori comuni

• Tablist senza nome accessibile. Più tablist sulla stessa pagina diventano indistinguibili.
• Tutti i tab con tabindex="0". Il pattern prevede un unico tab-stop; solo la scheda selezionata ha tabindex="0".
• Mancanza di aria-orientation="vertical" su un tablist verticale — lo screen reader istruisce l’utente a usare i tasti sinistra/destra quando il layout visivo richiede su/giù.
• role="tablist" che racchiude link (<a href="#section">) invece di pulsanti. Lo scroll dell’ancora interrompe il funzionamento del pulsante indietro.
• Tabpanel nascosto sia con display: none che con l’attributo hidden quando ne è sufficiente uno.

Esempio

<div role="tablist" aria-label="Project sections" aria-orientation="horizontal">
  <button role="tab" id="t-overview" aria-selected="true"  aria-controls="p-overview" tabindex="0">Overview</button>
  <button role="tab" id="t-files"    aria-selected="false" aria-controls="p-files"    tabindex="-1">Files</button>
  <button role="tab" id="t-team"     aria-selected="false" aria-controls="p-team"     tabindex="-1">Team</button>
</div>