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

Question

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

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

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

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

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

Т.А.

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

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

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

Рекомендации

• https://developer.mozilla.org/en-US/docs/Accessibility/ARIA/ARIA_Test_Cases
• http://wiki.jqueryui.com/w/page/38666403/Menubar
• http://www.oaa-accessibility.org/examplep/menubar2/
• http://test.cita.illinois.edu/aria/menubar/
• http://dev.aol.com/dhtml_style_guide
• http://whatsock.com/modules/aria_tabs_menu_modules/demo.htm
• http://www.w3.org/TR/wai-aria-practices/
• http://www.w3.org/TR/wai-aria/roles
• http://www-03.ibm.com/able/resources/wai_aria_intro.html

Answer 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>

Роли:

• роль = "навигация" для внешней оболочки <div>
• role="menubar" для <ul> контейнер навигационной панели
• role="menu" для второго уровня <ul> контейнеры
• роль = "презентация" для первого и второго уровня <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 2

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

Answer 3

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

Answer 4

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

Answer 5

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