Rooli Asiakirjarakenne

`toolbar`

Merkitsee säilön työkalupalkiksi — ryhmäksi toisiinsa liittyviä ohjaimia (muotoilupalkki, kuvakepainikkeiden rivi). Vähentää sarkaintasausten määrää: kymmenen painikkeen työkalupalkista tulee yksi sarkainpysähdys, nuolinäppäimillä liikutaan välillä.

Milloin käyttää

Kun sinulla on rivi (tai sarake) kolme tai useampia toisiinsa liittyviä ohjaimia — tekstieditorin muotoilupalkki, chat-syötteen yläpuolella oleva kuvakkerivi, kuvankäsittelytoiminnot. Hyöty on näppäimistötehokkuus: sen sijaan että jokainen painike on oma sarkainpysähdyksensä, työkalupalkki kuluttaa yhden sarkainpysähdyksen ja sen lapset ovat käytettävissä nuolinäppäimillä.

Työkalupalkilla TÄYTYY olla saavutettava nimi (aria-label tai aria-labelledby). Suunta on oletuksena vaakasuuntainen; aseta aria-orientation="vertical" pystysuoralle palkille.

Lapset ovat yleensä painikkeita (<button>), joiden välissä on role="separator" loogisten ryhmien erottamiseksi. Työkalupalkki VOI sisältää painikkeita, vaihtonappeja, linkkejä, valikkopainikkeita ja muita pieniä ohjaimia — mutta ei kokonaisia lomakkeita tai listawidgettejä.

Näppäimistö- ja kohdistussopimus

APG toolbar -mallin mukaan:

Sarkain siirtää kohdistuksen työkalupalkkiin ensimmäiselle tai viimeksi kohdistuneelle ohjaimelle; Sarkain siirtää kohdistuksen ulos.
Oikea/Vasen nuoli (Ylös/Alas pystysuorassa) liikkuu työkalupalkin kohteiden välillä.
Home / End hyppää ensimmäiseen / viimeiseen.
Jokainen yksittäinen painike aktivoituu edelleen Enter- tai Välilyönti-näppäimellä — aktivointisopimus ei muutu toolbar-roolin myötä.

Käytä kiertävää tabindex-arvoa: vain yhdellä työkalupalkin kohteella on tabindex="0" kerrallaan.

Yleiset virheet

Kaikilla työkalupalkin painikkeilla on tabindex="0". Kumoaa koko tarkoituksen — Sarkain kulkee silti jokaisen painikkeen läpi.
Työkalupalkilla ei ole saavutettavaa nimeä.
Työkalupalkin painikkeista puuttuvat nimet, koska visuaalinen elementti on kuvake. Lisää aria-label jokaiselle.
Toolbar sekoitetaan role="group" -semantiikkaan. Valitse yksi: toolbar edellyttää nuolinäppäinnavigointia, group ei.
role="toolbar" <nav>-elementissä. Roolit ovat ristiriidassa — käytä vain toista.

Esimerkki

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