toolbar

Wanneer gebruiken

Wanneer er een rij (of kolom) van drie of meer gerelateerde bedieningselementen aanwezig is — een opmaakbalk voor een teksteditor, een rij pictogrammen boven een chatvenster, bewerkingsacties voor foto’s. Het voordeel is toetsenbordefficiëntie: in plaats van een eigen tab-stop per knop, verbruikt de werkbalk één tab-stop en zijn de onderliggende elementen bereikbaar via de pijltjestoetsen.

Een werkbalk MOET een toegankelijke naam hebben (aria-label of aria-labelledby). De standaardoriëntatie is horizontaal; stel aria-orientation="vertical" in voor een verticale balk.

Onderliggende elementen zijn doorgaans knoppen (<button>), met role="separator" tussen logische groepen. Werkbalken KUNNEN knoppen, schakelknoppen, links, menuknop-widgets en andere kleine bedieningselementen bevatten — maar geen volledige formulieren of lijstwidgets.

Toetsenbord- en focuscontract

Conform het APG-werkbalkpatroon:

• Tab verplaatst de focus naar de werkbalk, naar het eerste of het laatst gefocuste element; Tab verplaatst de focus er ook weer uit.
• Rechts-/Linkspijtltjes (Omhoog/Omlaag bij verticale werkbalk) bewegen tussen de werkbalkelementen.
• Home / End springen naar het eerste respectievelijk het laatste element.
• Elke individuele knop wordt nog steeds geactiveerd met Enter of Spatiebalk — het activeringscontract wordt niet gewijzigd door de toolbar-rol.

Gebruik een roving tabindex: alleen één werkbalkelement heeft tabindex="0" tegelijk.

Veelgemaakte fouten

• Alle knoppen in de werkbalk hebben tabindex="0". Dit ondermijnt het hele principe — Tab doorloopt toch elke knop afzonderlijk.
• Werkbalk zonder toegankelijke naam.
• Werkbalkknop zonder label omdat de weergave alleen een pictogram is. Voeg aria-label toe aan elke knop.
• Vermenging van werkbalk- en role="group"-semantiek. Kies één: toolbar impliceert pijltjestoetsnavigatie; group niet.
• role="toolbar" op een <nav>-element. De rollen conflicteren — gebruik slechts één van de twee.

Voorbeeld

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