Ярлык ARIA для виджета меню не читается

UA: Mozilla Firefox 28.0; AT: JAWS 14.0.1534 и NVDA 2014.1; ОС: MS Windows 7 Professional SP1

Учитывая следующий простой виджет меню с расширенным ARIA, почему ассоциированный ярлык «Куда пойти» никогда не читается? Насколько я понимаю, метки, связанные с фокусируемыми элементами, должны объявляться при получении фокуса. Вместо этого читается только текст пункта меню.

<div role="application">
<ul id="main-menu" role="menu" aria-label="Where to go" aria-activedescendant="item-1" tabindex="0">
    <li id="item-1" role="menuitem"><a href="page-1.html" tabindex="-1">First page</a></li>
    <li id="item-2" role="menuitem"><a href="page-2.html" tabindex="-1">Second page</a></li>
    <li id="item-3" role="menuitem"><a href="page-3.html" tabindex="-1">Third page</a></li>
</ul>
</div>

Это какая-то «оптимизация», чтобы пользователь не читал лишнюю информацию каждый раз, когда меню получило фокус? Например, содержимое «элемента меню» будет иметь приоритет над маркировкой содержащего его виджета меню. Конечно, это просто дикая догадка. Есть ли у кого-нибудь более подробная информация, которая могла бы помочь прояснить вышеуказанную ситуацию?

Связанный вопрос, основанный на том же примере кода: я обнаружил, что отказ от содержащего div (того, который с атрибутом role = "application") абсолютно ничего не меняет в отношении поведения виджета (есть код Javascript для управления клавиатурой взаимодействие и обновление атрибута aria-activedescendant UL). Когда вам действительно нужен контейнер с role = "application"?


accessibility wai-aria
person Zunino    schedule 26.03.2014    source источник
comment
Мое первое предположение заключалось в том, что это приложение role все испортило. Тед Дрейк написал статью о application роли, в которой может помочь некоторым.   -  person Ryan B    schedule 26.03.2014

Ответы (1)


arrow_upward
2
arrow_downward

Судя по примеру, это не похоже на то, что должно быть меню.

Роль меню предназначена для меню в стиле приложения, которое представляет собой всплывающие подменю. См. этот пример строки меню.

При переходе в меню с помощью вкладок вы затем используете для навигации клавиши со стрелками, а не табуляцию.

У вас есть (по крайней мере, пока) простая навигация, а на веб-сайте наиболее подходящим механизмом являются стандартные ссылки.

  <nav aria-label="Where to go">
  <ul id="main-menu">
     <li><a href="page-1.html">First page</a></li>
     <li><a href="page-2.html">Second page</a></li>
     <li><a href="page-3.html">Third page</a></li>
  </ul>
  </nav>

Метка aria может быть прочитана программой чтения с экрана, а может и не быть (в кратком тесте NVDA этого не сделала, а VoiceOver сделала), если это важно, скрыть заголовок вне экрана над меню. Однако эта метка используется, если пользователь перемещается по «ориентиру».

Если вы выберете полное меню, я бы попробовал доступное мегаменю Adobe < / а>.

person AlastairC    schedule 26.03.2014
comment
Конечно. Вот и все: jsfiddle.net/Zunino/z9x9h. Вы заметите, что я избавился от role = application, а также что я действительно управляю фокусом для виджета. Спасибо за уделенное время. - person Zunino; 27.03.2014