Правильное обращение Арии с навигацией по хлебным крошкам

Что можно сделать, чтобы улучшить доступность меню хлебных крошек, подобного: 

<ul class="breadcrumbs" aria-label="breadcrumb navigation" role="navigation">
    <li><a href="~/">Home</a></li>
    <li><a href="~/news">News</a></li>
    <li class="unavailable"><a href="#">@Model.Title</a></li>
</ul>

В данном примере Home-это корень сайта, News-первый потомок, а недоступный класс-текущий элемент элемента / news / article.

Можно ли что-нибудь сделать, чтобы улучшить это, например, используя атрибуты rel или атрибуты aria-level?

4 11
html5 accessibility breadcrumbs

4 ответа:

Я бы избегал использования aria-level и использовал вместо этого элемент <ol>. Лучше всего избегать использования атрибутов aria везде, где существует собственная альтернатива. Использование арии добавляет дополнительный уровень сложности. Простой HTML намного лучше и уже имеет семантику, которая проявляется в AT. Это Первое правило Ария.

Заимствуя из документа WAI-ARIA-Practices , хлебные крошки выглядели бы примерно так: 

<nav aria-label="Breadcrumb" class="breadcrumb">
    <ol>
      <li>
        <a href="../../">
          WAI-ARIA Authoring Practices 1.1
        </a>
      </li>
      <li>
        <a href="../../#aria_ex">
          Design Patterns
        </a>
      </li>
      <li>
        <a href="../../#breadcrumb">
          Breadcrumb Pattern
        </a>
      </li>
      <li>
        <a href="./index.html" aria-current="page">
          Breadcrumb Example
        </a>
      </li>
    </ol>
</nav>

Некоторые Примечания:

  1. упаковка хлебных крошек в элемент <nav> позволяет пользователям программы чтения с экрана быстро находить и переходить к хлебным крошкам.
  2. используя элемент <ol>, можно выполнить заказ для пользователей программы чтения с экрана.
  3. <ol> должен быть дочерним от <nav>. Некоторые реализации применяются role="nav" к самому <ol>. Это неверно и переопределит семантику по умолчанию <ol>.
  4. aria-current сообщает пользователям программы чтения с экрана, что это текущая страница. Если последний хлебный мякиш для текущая страница не является ссылкой, атрибут aria-current необязателен.
5

Переходя от использования программы чтения с экрана и чтения этого сообщения в блоге, атрибуты rel не будут иметь значения для A. T. Что касается использования aria-level, это работает, если вы поместите его на якорные теги. Я бы также посоветовал обернуть список в элемент nav, для семантических целей и для того, чтобы избежать необходимости добавлять в список роль навигации, когда вам это не нужно.

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

<nav aria-label="breadcrumb" role="navigation">
  <ul>
    <li><a href="#" aria-level="1">Home</a></li>
    <li><a href="#" aria-level="2">News</a></li>
  </ul>
</nav>

Надеюсь, это поможет!

8

Вы можете использовать как показано ниже

<nav role="navigation"  aria-label="breadcrumbs">
    <p id="breadcrumblabel">You are here:</p>
    <ol id="breadcrumb" aria-labelledby="breadcrumblabel">
        <li><a href="index.html" title="Home">Home</a></li>
        <li><a href="products.html" title="Menu1">Menu1</a></li>
        <li><a href="shoes.html" title="Menu2">Menu2</a></li>
    </ol>
</nav>
4

При поиске в Интернете полного решения на доступных хлебных крошках, решение @ Craig Brett казалось хорошим на первый взгляд. Но после прочтения нескольких источников, aria-level, кажется, неправильно используется там (кроме проблемы проверки W3C, см. Мой комментарий выше).
Поэтому я хотел бы предложить такой подход: 

<nav aria-labelledby="bc-title" role="navigation">
    <h6 id="bc-title" class="vis-off">You are here:</h6>
    <a href="~/" aria-labelledby="bc-level-1">
        <span id="bc-level-1" class="vis-off">Homepage Website-Title </span>Home
    </a>
    <a href="~/news" aria-labelledby="bc-level-2">
        <span id="bc-level-2" class="vis-off">Level 2: News </span>News
    </a>
    <a href="#" aria-disabled="true">@Model.Title</a>
</nav>

В этом решении у нас есть HTML5-секционирующий элемент (nav), который должен иметь заголовок, и *tada* есть. Класс vis-off обозначает элемент, который является просто доступны для чтения с экрана. С помощью aria-labelledby я говорю экранному читателю прочитать этот заголовок.

В отличие от решения Криса, либо <ul>, либо aria-level исчезает.
Я бы так или иначе пошел на <ol>, Если это необходимо, потому что элементы находятся в порядке . Лучше оставить его, иначе он становится очень многословным во многих читателях экрана на каждой странице ("пункт списка 1...").
aria-level кажется, неправильно используется в решении выше в моем понимании. Он должен быть дитя атрибута роли, такого как f. e. role="list" и эта роль просто означает не структурно размеченныенеинтерактивные списки.
Возможно, роль treeitem была бы более подходящей. ИМХО, это перебор.

PS: Я не используюнотацию BEM здесь, чтобы сократить идентификаторы и классы для удобства чтения.
4