Рекомендуемая реализация WAI-ARIA для панели навигации / меню

Возможная реализация:

Структура HTML:

<div> <!-- Outer wrapper -->
  <ul> <!-- Main navigation bar container -->
    <li> <!-- First-level item without submenu -->
      <a> <!-- Destination URL -->
      </a>
    </li>
    <li> <!-- First-level item with submenu -->
      <a> <!-- Destination URL -->
      </a>
      <ul> <!-- Second-level menu container -->
        <li> <!-- Second-level item -->
          <a>
          </a> <!-- Destination URL -->
        </li>
      </ul>
    </li>
  </ul>
</div>

Роли:

• role = "navigation" для внешней оболочки <div>
• role = "menubar" для <ul> контейнера панели навигации
• role = "menu" для <ul> контейнеров второго уровня
• role = "presentation" для <li> пунктов меню первого и второго уровня (они не нужны в открытой доступной структуре строки меню)
• role = "menuitem" для <a> пунктов меню первого и второго уровня

Свойства:

• aria-haspopup = "true" для <a> пунктов меню первого уровня, имеющих подменю
• aria-labelledby = "ID предыдущего <a> пункта меню" для <ul> контейнеров второго уровня

Состояния:

• aria-selected = "true" для посещаемого в данный момент <a> элемента первого или второго уровня; aria-selected = "false" по остальным <a> элементам. Это необходимо для реализации концепции «выбранная‹ ==> текущая страница ».
• aria-extended = "true / false" для <ul> контейнеров второго уровня
• aria-hidden = "true / false" для <ul> контейнеров второго уровня
• aria-activedescendant = "" для контейнера основной <ul> панели навигации. Это альтернатива работе с tabindex
• tabindex = 0 для посещаемого в данный момент <a> элемента; tabindex = -1 для остальных <a> элементов. Это необходимо для того, чтобы сначала сосредоточиться на текущей странице при переходе на панель навигации. Это альтернатива работе с aria-activedescendant.

Клавиатура:

• Вкладка: перемещение фокуса в / из меню из других точек веб-приложения.
• Shift + Tab: перемещение фокуса в / из меню из других точек веб-приложения в обратном порядке.
• Стрелка вправо: следующий элемент панели навигации
• Стрелка влево: предыдущий элемент панели навигации
• Enter: активировать выбранный в данный момент элемент (т. Е. Перейти к соответствующему URL-адресу)
• Пробел: активировать выбранный в данный момент элемент (т. Е. Перейти к соответствующему URL-адресу)

Август / 2014: выбор арии по сравнению с пунктом меню

В ответ на комментарий @Joshua Muheim: теперь я могу видеть отсюда, а также из его ссылки, этот атрибут aria-selected не допускается для роли menuitem.
Как я прочитал из недавнего SO answer, есть некоторые решения с учетом текущего положения вещей, а также предлагается новый атрибут.

К вашему сведению, вы можете получить меню для объявления информации «X из Y», добавив атрибуты aria-posinset и aria-setsize к элементам с ролью = menuitem. С уважением, Брайан Гаравента

Побег, чтобы закрыть - стандартный способ возврата, это ожидаемое поведение многих пользователей.

Шаблоны проектирования ARIA обеспечивают ожидаемое поведение пользовательского интерфейса для ряда настраиваемых элементов управления http://www.w3.org/TR/wai-aria-practices/#aria_ex использование клавиши esc для закрытия и возврата к запускающему элементу при закрытии является стандартным пользовательским интерфейсом для настольных компьютеров и в Интернете. Попробуйте его в любом приложении Google docs (например).

+ Клавиша Escape должна закрывать открытое меню и возвращать фокус элементу, который его открывает.