Ответ 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-ответа, есть некоторые решения, учитывая текущее состояние вещей, и есть и новый предложенный атрибут.