Роли-контейнеры: toolbar.

В предыдущем посте я рассказал о ролях menu и menubar. Напомню: это роли-контейнеры для элементов menuitem, menuitemradio и menuitemcheckbox. По функционалу это набор каких-то действий и функций, которые может вызвать пользователь. Но это не набор навигационных ссылок. Предполагается горизонтальная (для menubar) и вертикальная (для menu) стрелочная навигация.

Есть и другие роли-контейнеры для интерактивных элементов, например toolbar.

toolbar — контейнер для интерактивных элементов, таких как кнопки, чекбоксы, переключатели и т.д. toolbar предназначен для группировки набора интерактивных элементов, которые визуально сгруппированы и для уменьшения количества шагов табуляции.

В качестве примеров: панель инструментов в текстовом или графическом редакторе.

toolbar очень похож на menubar, оба горизонтальные и предполагают навигацию стрелками влево/вправо. Разница между ними в том, что внутри menubar могут быть только элементы с определёнными ролями, а у toolbar таких ограничений нет. Внутри toolbar можно расположить любые интерактивные элементы с одной оговоркой.

Есть некоторые интерактивные элементы, которые используют стрелки в своих нуждах. Например, <input type="number">. При попадании фокуса стрелки вверх/вниз увеличивают/уменьшают значение, а стрелки влево/вправо перемещают каретку. Такие элементы не рекомендуется использовать внутри toolbar, чтобы избежать конфликтов со стрелками и не сломать навигацию. Но такие элементы можно использовать в конце toolbar, если их избежать не получается.

Для toolbar подразумевается aria-orientation="horizontal", то есть элементы расположены горизонтально и есть стрелочная навигации между элементами. Это можно переопределить, указав атрибут с другим значением. Если на странице более одного toolbar, то всем им нужно добавить имя при помощи aria-label или aria-labelledby. Использовать toolbar стоит только когда элементов 3 и более.

Скринридеры озвучивают роль и имя (если оно есть), а также выход за пределы toolbar:

<div role="toolbar" aria-label="Text settings">
  <button type="button" aria-label="Bold"></button>
  <button type="button" aria-label="Italic"></button>
  <button type="button" aria-label="Underline"></button>
</div>

При последовательной навигации это будет зачитано так:

Text settings toolbar
Bold button
Italic button
Underline button
Out of toolbar

Кейсы использования:
- панель инструментов в редакторе чего-либо
- группировка связанных по смыслу интерактивных элементов в приложениях с большим количеством таких элементов.

Описание паттерна toolbar.
Пример реализации toolbar в текстовом редакторе. Обратите внимание на то, что внутри toolbar различные элементы и паттерны.
Спецификация роли toolbar.