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

Мы находимся в процессе реализации (то есть добавления) поддержки WAI-ARIA в основное меню навигации веб-портала. Меню показано здесь:

Меню реализовано с помощью классического дерева <ul>/<li>/<a> DOM, созданного с помощью CSS, чтобы выглядеть как горизонтальные вкладки.

Какова рекомендуемая реализация WAI-ARIA для такого виджетов?

Я собираюсь опубликовать возможную реализацию здесь как ответ, так что все будет в порядке.

Пропустите оставшиеся абзацы, если вы знаете/не заботитесь о навигационных меню CSS в контексте WAI-ARIA.

ТА

Преамбула (так сказать)

Я прочитал многие части последних спецификаций WAI-ARIA от w3org для общего понимания, таксономии и т.д. Затем я прочитал несколько примеров реализации виджета пользовательского интерфейса. Я не мог найти какой-либо пример, специально предназначенный для такого меню навигации по CSS. Ближайшими виджетами, которые я всегда находил, являются меню, MenuBar и TabPanel. Конечно, я также просмотрел бесплатную группу сообщества ARIA (где этот вопрос был первоначально отправлен).

Я бы сказал, что ни один из этих виджетов точно не соответствует навигационному меню (CSS). Например, TabPanel может контролировать некоторый контент на странице (- > aria-controls), возможно, MenuBar; но я вовсе не уверен, что меню навигации управляет контентом на странице (он контролирует следующую страницу для показа). Не идя дальше, есть и другие отличия. Ссылки находятся в конце сообщения. Если кто-нибудь лучше (или более подходит) примеры навигационного меню, мы будем рады узнать о них.

Ссылки

Ответ 1

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

Структура 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>. То есть для обеспечения соблюдения концепции "selected < == > текущая страница"
aria-extended = "true/false" для контейнеров <ul> второго уровня
aria-hidden = "true/false" для контейнеров <ul> второго уровня
aria-activedescendant = "" для основного контейнера навигационной панели <ul>. Это альтернатива работе с tabindex
tabindex = 0 в текущем посещенном элементе <a>; tabindex = -1 на других элементах <a>. Это делается для того, чтобы сначала сфокусироваться на текущей странице при переходе на панель навигации. Это альтернатива работе с aria-activedescendant.

Клавиатура:

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

Август /2014: выбранный ариями Vs menuitem

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

Ответ 2

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

Ответ 3

Escape to close - это стандартный путь назад, это ожидаемое поведение многих пользователей.

Ответ 4

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

Ответ 5

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