Роля Структура на документа

`toolbar`

Маркира контейнер като лента с инструменти — групиран набор от свързани контроли (лента за форматиране, ред с иконни бутони). Намалява броя на точките за достъп с Tab: лента с 10 бутона се превръща в една точка на достъп, а между бутоните се навигира с клавишите-стрелки.

Кога да се използва

Когато има ред (или колона) от три или повече свързани контроли — лента за форматиране на текст в редактор, ред с икони над поле за чат, действия за редактиране на снимки. Предимството е ефективност при навигация с клавиатура: вместо всеки бутон да е отделна точка за достъп с Tab, лентата с инструменти заема само една такава точка, а децата й се достигат чрез клавишите-стрелки.

Лентата с инструменти ТРЯБВА да има достъпно наименование (aria-label или aria-labelledby). Ориентацията по подразбиране е хоризонтална; за вертикална лента се задава aria-orientation="vertical".

Децата обикновено са бутони (<button>), с role="separator" между логически групи. Лентите с инструменти МОГАТ да съдържат бутони, превключващи бутони, връзки, menubutton и други малки контроли — но не цели форми или списъчни уиджети.

Клавиатура и управление на фокуса

Съгласно шаблона APG toolbar:

Tab премества фокуса в лентата с инструменти върху първия или последния фокусиран контрол; Tab премества фокуса ИЗВЪН нея.
Стрелките Дясно/Ляво (Горе/Долу при вертикална ориентация) преместват фокуса между елементите на лентата.
Home / End прескачат до първия / последния елемент.
Всеки отделен бутон се активира с Enter или Space — неговият начин на активиране остава непроменен от ролята toolbar.

Използва се roving tabindex: само един елемент от лентата с инструменти има tabindex="0" в даден момент.

Чести грешки

Всички бутони в лентата с инструменти имат tabindex="0". Обезсмисля изцяло шаблона — Tab все така обхожда всеки бутон поотделно.
Лента с инструменти без достъпно наименование.
Бутоните в лентата нямат етикети, защото визуалното им представяне е икона. Добавете aria-label към всеки.
Смесване на toolbar със семантиката на role="group". Изберете едно: toolbar предполага навигация с клавишите-стрелки, group — не.
role="toolbar" върху елемент <nav>. Ролите си противоречат — използвайте само едната.

Пример

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