menuitem

Самостоятельная роль виджета из WAI-ARIA для пункта строки меню или из связанного со строкой подменю.

В HTML нет тега с ролью menuitem.

        
          
          <div role="menubar">  <button    role="menuitem"    type="button"    aria-expanded="false"    aria-haspopup="menu"    aria-controls="fonts"  >    Начертание  </button>  <ul    role="menu"    id="fonts"  >    <!-- Пункты подменю -->  </ul>  <!-- Другие пункты строки меню -->  <button    role="menuitem"    type="button"    tabindex="-1"  >    Новая дока  </button></div>
          <div role="menubar">
  <button
    role="menuitem"
    type="button"
    aria-expanded="false"
    aria-haspopup="menu"
    aria-controls="fonts"
  >
    Начертание
  </button>

  <ul
    role="menu"
    id="fonts"
  >
    <!-- Пункты подменю -->
  </ul>

  <!-- Другие пункты строки меню -->

  <button
    role="menuitem"
    type="button"
    tabindex="-1"
  >
    Новая дока
  </button>
</div>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Задайте role="menuitem" любому тегу. Это может быть <div>, <span>, <li> и даже <button>.

Пункты menuitem должны находиться внутри строки меню menubar или в подменю menu. При этом они могут располагаться отдельно или группироваться внутри другого элемента-обёртки с ролью group.

        
          
          <div role="menubar">  <span    role="menuitem"    tabindex="0"  >    Редактирование  </span>  <div role="group">    <span      role="menuitem"      tabindex="-1"    >      Помощь    </span>    <span      role="menuitem"      tabindex="-1"    >      Клавиатурные сокращения    </span>  </div>  <span    role="menuitem"    tabindex="-1"  >    Сохранение  </span></div>
          <div role="menubar">
  <span
    role="menuitem"
    tabindex="0"
  >
    Редактирование
  </span>

  <div role="group">
    <span
      role="menuitem"
      tabindex="-1"
    >
      Помощь
    </span>
    <span
      role="menuitem"
      tabindex="-1"
    >
      Клавиатурные сокращения
    </span>
  </div>

  <span
    role="menuitem"
    tabindex="-1"
  >
    Сохранение
  </span>
</div>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

У menuitem обязательно должно быть имя — краткое название, которое описывают цель пункта меню. Лучше всего добавлять видимые подписи, как «Начертание» в этом примере:

        
          
          <span  role="menuitem"  tabindex="0">  Начертание</span>
          <span
  role="menuitem"
  tabindex="0"
>
  Начертание
</span>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Другой способ добавить имя пункту меню, о котором будет знать только скринридер, — атрибут aria-label:

        
          
          <span  role="menuitem"  aria-label="Начертание"  tabindex="0">  <!-- Иконка --></span>
          <span
  role="menuitem"
  aria-label="Начертание"
  tabindex="0"
>
  <!-- Иконка -->
</span>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Пунктам menuitem можно задавать все глобальные ARIA-атрибуты, а также некоторые атрибуты виджетов:

• aria-disabled — неактивный пункт.
• aria-expanded — пункт, раскрывающий попап.
• aria-haspopup — тип попапа, который раскрывает пункт. Это может быть подменю menu, диалоговое окно dialog, выпадающий список listbox, древовидный список tree или сетка grid.
• aria-setsize — сколько всего пунктов в группе с учётом тех, которых пока нет на странице.
• aria-posinset — порядковый номер или положение пункта меню в группе, пока его нет на странице.

По пунктам строки меню menubar перемещаются стрелками влево ← и вправо →, а внутри menu — стрелками вверх ↑ и вниз ↓. Для перехода к первому пункту используют Home, к последнему — End.

Дополнительно можно отслеживать нажатие на клавиши с буквами и символами при фокусе на строке меню или в подменю. Пользователи смогут быстро переместиться к нужным пунктам, которые начинаются со знака с нажатой клавиши. Например, попасть на пункт «Настройки» при нажатии на клавишу H.

Если задаёте роль menuitem неинтерактивным тегам вроде <div> или <span>, не забудьте сделать их кнопками с точки зрения их поведения. Тут не обойтись без JavaScript.

Настоящие кнопки <button> срабатывают при нажатии Enter и пробела, а также при клике и тапе на них. Кнопка нажимается столько, сколько зажимаете и не отпускаете Enter (событие keydown). Если нажали на пробел (событие keyup), то действие с кнопкой срабатывает после того, как отпустили клавишу.

Полностью кастомные пункты menuitem также нужно добавить в порядок фокуса с помощью tabindex со значенем -1 по умолчанию. Когда пользователь сделал фокус на пункте, меняйте значение на 0. Имейте в виду, что только у одного пункт может быть нулевое значение tabindex.

Пункты меню обычно раскрывают попапы или изменяют что-то в интерфейсе. menuitem по желаемому поведению и свойствам похожа на другую роль button, которая по умолчанию есть у одноимённого тега <button>. Некоторые Accessibility API даже вычисляют в случае пунктов строк меню и подменю роль menubutton.

menuitem — базовый элемент строки меню. Два других — menuitemcheckbox и menuitemradio. Обычные пункты меню внешне похожи на кнопки или вкладки, menuitemcheckbox — на чекбоксы, а menuitemradio — на радиокнопки.