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, состояние aria-selected не разрешено в элементе меню роли: http://www.w3.org/TR/wai-aria/states_and_properties#aria-selected. Я также не могу найти состояние для элемента меню, которое, кажется, помечает элемент меню как выбранный: http://www.w3.org/TR/wai-aria/roles#menuitem.

Какой будет правильная реализация выбранного элемента меню / страницы в строке меню?

Обновлять:

Я нашел один ответ, предлагающий оставить привязку на текущей странице в меню, но не уверен, что это даст мне то, что я хочу.

<li role="menuitem">Current page</li>

accessibility wai-aria
person Karine    schedule 07.07.2014    source источник
comment
Это действительно навигационное меню? Атрибут role="menubar обычно должен входить только в такие меню, как это oaa-accessibility.org/examplep/menubar1 а не на панели навигации.   -  person Volker E.    schedule 17.07.2014

Ответы (1)


arrow_upward
3
arrow_downward

Как очень красиво изложено в записи блога The Accessible Current Загадка со ссылками на страницу, похоже, скоро появится решение путем введения атрибута _ 1_.

А пока ты остаешься с

  • ваш вывод о том, что привязка отсутствует в пункте меню текущей страницы

  • или включите атрибут 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>
person Volker E.    schedule 17.07.2014