menu

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

За меню от тип приложение — изскачащият елемент, появяващ се от бутон „Файл” или при дясно кликване като контекстно меню, с навигация с клавишите за стрелки и затваряне с Escape. Дъщерните елементи трябва да са role="menuitem", role="menuitemcheckbox", role="menuitemradio" или role="separator".

Ролята menu носи семантика на приложение. Най-честата грешка в уеб е използването на role="menu" за навигация на сайт, което блокира потребителите на клавиатура в навигация с клавишите за стрелки, неправилно обявява връзките като menuitem елементи и нарушава мисловния модел на потребителя.

Правило на палеца: ако задействащият елемент е хипервръзка и елементите в списъка са хипервръзки, това е навигация, а не меню. Използвайте <nav> и <ul>.

Менюто ЗАДЪЛЖИТЕЛНО трябва да има достъпно наименование — използвайте aria-label или aria-labelledby, сочещи към задействащия елемент.

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

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

• Задействащият бутон има aria-haspopup="menu" и aria-expanded. Активирането на задействащия елемент отваря менюто и премества фокуса към първия menuitem.
• В менюто: стрелките нагоре/надолу преместват фокуса между елементите; Home/End прескачат към първия/последния.
• Стрелката надясно отваря подменю (ако фокусираният елемент го има); стрелката наляво се връща към родителското меню.
• Enter или Space активират фокусирания елемент и затварят менюто.
• Escape затваря менюто и връща фокуса към задействащия елемент.
• Бързо навигиране с клавиши: въвеждането на буква прескача към следващия елемент, започващ с нея.

Единична точка за Tab: само един menuitem в даден момент има tabindex="0"; останалите са с -1.

Чести грешки

• role="menu" върху <nav> елемент. Семантиката на приложението отменя семантиката на навигацията — екранните четци спират да го обявяват като навигационен ориентир.
• Меню без съответния aria-haspopup="menu" върху задействащия елемент.
• Escape затваря менюто, но не връща фокуса към задействащия елемент, оставяйки потребителя без ориентация.
• Фокусът НЕ се премества към първия menuitem при отваряне на менюто — потребителите трябва да натискат Tab без ефект.
• Подменюта, отварящи се само при hover, а не при работа с клавиатура.

Пример

<button id="actions" aria-haspopup="menu" aria-expanded="false" aria-controls="actionsMenu">
  Actions
</button>
<ul id="actionsMenu" role="menu" aria-labelledby="actions" hidden>
  <li role="menuitem" tabindex="0">Edit</li>
  <li role="menuitem" tabindex="-1">Duplicate</li>
  <li role="separator"></li>
  <li role="menuitem" tabindex="-1">Delete</li>
</ul>