Роля Съставна контрола

`menubar`

Маркира контейнер като постоянна лента с менюта — винаги видимата хоризонтална лента от менюта от вида File/Edit/View, характерна за десктоп приложения. Различна е от menu, което е изскачащо меню. На уеб почти никога не е правилният шаблон.

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

За постоянна лента с менюта от тип приложение, имитираща главното меню на десктоп програма (File, Edit, View, …). Най-legitните приложения са вътре в уеб-базирани инструменти за създаване на съдържание, IDE и приложения за пълноекранна продуктивност.

Ако „лентата с менюта” всъщност е навигация в заглавната секция на сайта, тя НЕ е menubar. Използвайте <nav> с <ul> от <a> връзки. Ролята menubar изисква единична точка на достъп с Tab, навигация с клавишите-стрелки и затваряне с Escape — нищо от това не отговаря на очакванията на потребителите за заглавна навигация на сайт.

Децата на menubar обикновено са role="menuitem" тригери, отварящи подменюта (aria-haspopup="menu").

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

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

Tab премества фокуса в лентата с менюта върху първия или последния фокусиран елемент; Tab премества фокуса ИЗВЪН нея.
Левият/Десният клавиш-стрелка премества фокуса между елементите на лентата на най-горно ниво (с обхождане по кръг).
Стрелката надолу (или Enter/Space) отваря подменюто на фокусирания елемент и премества фокуса върху първия menuitem в него.
Стрелката нагоре отваря подменюто и премества фокуса върху последния menuitem.
Escape вътре в подменю затваря подменюто и връща фокуса към елемента в menubar.
Typeahead: натискането на буква прескача до следващия елемент, започващ с тази буква.

Използва се roving tabindex.

Чести грешки

role="menubar" върху основния <nav> на сайта. Несъответствие между обявената роля и очакванията на потребителя.
Всеки елемент има tabindex="0", поради което Tab обхожда всеки елемент от менюто поотделно. Шаблонът изисква единична точка на достъп с Tab.
Подменюта, отварящи се при hover, но не и при натискане на стрелката надолу.
Липса на aria-haspopup/aria-expanded върху елементите на menubar, задействащи подменюта.
Escape вътре в подменю затваря менюто, но губи фокуса — фокусът трябва да се върне към родителския елемент в menubar.

Пример

<ul role="menubar" aria-label="Document">
  <li role="menuitem" tabindex="0"  aria-haspopup="menu" aria-expanded="false">File</li>
  <li role="menuitem" tabindex="-1" aria-haspopup="menu" aria-expanded="false">Edit</li>
  <li role="menuitem" tabindex="-1" aria-haspopup="menu" aria-expanded="false">View</li>
  <li role="menuitem" tabindex="-1" aria-haspopup="menu" aria-expanded="false">Help</li>
</ul>