Rolle Dokumentstruktur

`toolbar`

Markerer en beholder som en værktøjslinje — en gruppe relaterede kontrolelementer (en formateringsbjælke, en række ikonknapper). Reducerer tab-stop-antallet: 10 knapper bliver ét tab-stop med piletaster til at navigere imellem dem.

Hvornår skal det bruges

Når du har en række (eller kolonne) med tre eller flere relaterede kontrolelementer — en formateringsbjælke i en teksteditor, en ikonrække over et chatfelt, billedredigeringshandlinger. Fordelen er tastatureffektivitet: i stedet for at hver knap er sit eget tab-stop, optager værktøjslinjen ét tab-stop og eksponerer sine underordnede via piletaster.

En toolbar SKAL have et tilgængeligt navn (aria-label eller aria-labelledby). Orienteringen er som standard vandret; sæt aria-orientation="vertical" for en lodret bjælke.

Underordnede elementer er typisk knapper (<button>), med role="separator" mellem logiske grupper. Toolbars KAN indeholde knapper, til/fra-knapper, links, menuknapper og andre små kontrolelementer — men ikke hele formularer eller listewidgets.

Tastatur- og fokuskontrakt

Ifølge APG toolbar-mønstret:

Tab flytter fokus ind i toolbaren til det første eller sidst fokuserede kontrolelement; Tab flytter fokus UD.
Højre/venstre piletaster (op/ned hvis lodret) flytter mellem elementerne i toolbaren.
Home / End springer til første / sidste.
Hver enkelt knap aktiveres stadig med Enter eller mellemrum — dens aktiveringskontrakt ændres ikke af toolbar-rollen.

Brug et glidende tabindex: kun ét toolbar-element har tabindex="0" ad gangen.

Typiske fejl

Alle knapper i toolbaren har tabindex="0". Det ophæver hele formålet — Tab træder stadig gennem hver knap.
Toolbar uden tilgængeligt navn.
Toolbar-knapper mangler labels, fordi det visuelle er et ikon. Tilføj aria-label til hver enkelt.
Sammenblanding af toolbar med role="group"-semantik. Vælg én: toolbar forudsætter piletastersnavigation, group gør ikke.
role="toolbar" på et <nav>-element. Rollerne er i konflikt — brug den ene eller den anden.

Eksempel

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