menuitem

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

Само вътре в role="menu" или role="menubar", и само когато менюто е меню от тип приложение — такова, което имитира лентата File/Edit/View на настолно приложение, с единична Tab-спирка, навигация с клавиши-стрелки и затваряне с Escape.

Горната навигация на сайт НЕ е меню. За нея се използва <nav> с <ul> от <a> връзки. Объркването на двете е най-честата ARIA грешка в уеб — тя блокира потребителите с клавиатура в навигация с клавиши-стрелки, когато Tab би бил по-естествен, и съобщава на екранните четци „меню на приложение”, когато съдържанието всъщност са просто връзки.

Сродни роли: menuitemcheckbox (за записи в менюто, които се превключват) и menuitemradio (за изключителни избори вътре в меню).

Договор за клавиатура и фокус

Съгласно APG шаблона за меню:

• Tab влиза в и излиза от менюто — фокусът се позиционира на първия menuitem при влизане. Tab НЕ обхожда записите на менюто.
• Стрелките нагоре/надолу преместват фокуса между записите (с обхождане в кръг).
• Дясна/Лява стрелка отварят подменюта / връщат към родителя.
• Enter или интервал активира фокусирания запис.
• Escape затваря менюто и връща фокуса към тригера.
• Въвеждането на буква прескача към следващия запис, започващ с тази буква (typeahead).

Използва се roving tabindex: само текущо фокусираният menuitem има tabindex="0"; останалите имат tabindex="-1".

Чести грешки

• Употреба на role="menuitem" за обикновена връзка в навигацията на сайта. Причинява блокиране на клавиатурата и некоректно обявяване от екранния четец.
• Всеки menuitem с tabindex="0", поради което Tab обхожда всеки запис поотделно. Шаблонът изисква единична Tab-спирка.
• Подменюта, които се отварят при преминаване с мишката, но не и при натискане на дясна стрелка.
• Escape затваря подменюто, но фокусът се губи и потребителят остава без ориентация извън менюто.
• Записи без достъпно наименование, тъй като иконата е единственото съдържание — необходим е aria-label.

Пример

<button id="fileBtn" aria-haspopup="menu" aria-expanded="false" aria-controls="fileMenu">
  File
</button>
<ul id="fileMenu" role="menu" aria-labelledby="fileBtn" hidden>
  <li role="menuitem" tabindex="0">New</li>
  <li role="menuitem" tabindex="-1">Open</li>
  <li role="menuitem" tabindex="-1" aria-haspopup="menu" aria-expanded="false">
    Open recent
  </li>
  <li role="separator"></li>
  <li role="menuitem" tabindex="-1">Save</li>
</ul>