Roll Dokumentstruktur

`toolbar`

Markerar en behållare som ett verktygsfält — en grupperad uppsättning relaterade kontroller (ett formateringsfält, en rad med ikonknappar). Minskar tabb-kostnaderna: ett verktygsfält med 10 knappar ger ett enda tabbtegångspunkt; piltangenterna navigerar mellan knapparna.

När ska du använda detta

När du har en rad (eller kolumn) med tre eller fler relaterade kontroller — ett formateringsfält i en textredigerare, en ikonrad ovanför ett chattfält, fotoredigeringsåtgärder. Fördelen är tangentbordseffektivitet: i stället för att varje knapp är ett eget tabbtegångspunkt konsumerar verktygsfältet ett enda tabbtegångspunkt och exponerar sina underordnade via piltangenter.

Ett verktygsfält MÅSTE ha ett tillgängligt namn (aria-label eller aria-labelledby). Orienteringen är som standard horisontell; ange aria-orientation="vertical" för ett vertikalt fält.

Underordnade element är vanligtvis knappar (<button>), med role="separator" mellan logiska grupper. Verktygsfält KAN innehålla knappar, växlingsknknappar, länkar, menyknappar och andra små kontroller — men inte hela formulär eller listwidgetar.

Tangentbord och fokuskontrakt

Enligt APG toolbar-mönstret:

Tabb flyttar fokus in i verktygsfältet till den första eller senast fokuserade kontrollen; Tabb rör sig ut.
Höger/Vänster-pil (Upp/Ned om vertikalt) navigerar mellan verktygsfältsobjekten.
Home / End hoppar till det första / sista.
Varje enskild knapp aktiveras fortfarande med Enter eller Mellanslag — dess aktiveringsbeteende förändras inte av verktygsfältsrollen.

Använd ett rörligt tabindex: bara ett verktygsfältsobjekt har tabindex="0" åt gången.

Vanliga fel

Alla knappar i verktygsfältet har tabindex="0". Det motverkar hela syftet — Tabb stegar igenom varje knapp ändå.
Verktygsfält utan tillgängligt namn.
Verktygsfältsknappar saknar etiketter eftersom det visuella är en ikon. Lägg till aria-label på varje.
Att blanda verktygsfält med role="group"-semantik. Välj ett: toolbar innebär piltangentsnavigering, group gör det inte.
role="toolbar" på ett <nav>-element. Rollerna är motstridiga — använd en av dem.

Exempel

<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>