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>
    
Другие вопросы по тегам