WAI-ARIA - выбранный / текущий пункт меню / страница, как установить правильное состояние в строке меню?
Я делаю некоторые очистки кода / проверки на веб-сайте, и столкнулся с проблемой. На сайте есть главное меню (меню), где указывается текущая страница.
Структура меню как есть:
<nav role="navigation">
<ul role="menubar">
<li role="menuitem" aria-selected="true">
<a href="currentpage">Current page</a>
</li>
<li role="menuitem">
<a href="anotherpage">Another page</a>
</li>
</ul>
</nav>
В соответствии со спецификацией WAI-ARIA, выбранное ария штата не допускается в пункте меню ролей: http://www.w3.org/TR/wai-aria/states_and_properties. Также я не могу найти ни одного состояния для элемента меню, которое, кажется, помечает элемент меню как выбранный: http://www.w3.org/TR/wai-aria/roles.
Какова будет правильная реализация выбранного пункта меню / страницы в строке меню?
Обновить:
Я нашел один ответ, предлагающий оставить якорь на текущей странице меню, но не уверен, что это даст мне то, что я хочу.
<li role="menuitem">Current page</li>
1 ответ
Как очень хорошо изложено в записи блога "Доступная текущая страница, связывающая головоломку", похоже, что есть новое решение, представив атрибут aria-current="true"
,
На данный момент вы остаетесь с
- вы обнаружили, что я оставил привязку к пункту меню текущей страницы
или включить
aria-described
атрибут, который указывается для присоединения описательной информации к одному или нескольким элементам путем ссылки на идентификатор. Пример:<nav role="navigation"> <ul> <li><a href="/" aria-describedby="a11y-desc-current">Home</a></li> <li><a href="/about/">About</a></li> <li><a href="/contact/">Contact</a></li> </ul> <span id="a11y-desc-current">current page</span> </nav>