Правильная обработка арии навигации breadcrumb

что можно сделать, чтобы улучшить доступность меню навигации аналогично:

<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-первый дочерний элемент, А класс unavailable-текущий элемент/news / article.

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

11
accessibility breadcrumbs design html5 wai-aria

4 ответов

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

заимствование из документ 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> семантика.
  4. aria-current информирует пользователей Screen reader, что это текущая страница. Если последняя хлебная крошка для текущей страницы не является ссылкой, то aria-current атрибут является необязательным.
5

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

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

<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), которая должны есть заголовок, и *тада * вот он. Класс!--3--> обозначает элемент, доступный только для чтения с экрана. С aria-labelledby Я говорю читателю экрана прочитать этот заголовок.

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

PS: я не использую БЭМ нотацию сократить идентификаторы и классы для удобства чтения.

4