A11Y 101: Обеспечьте уникальность ориентиров

Анализируя свой сайт, мы обнаружили следующую ошибку: «Ensure landmarks are unique».

Эта конкретная ошибка возникла на странице детализации поста с двумя элементами <nav>.

Один используется для тегов, а другой — в футере.

Почему это важно?

Возможно, вы зададитесь вопросом, почему эти ориентиры должны быть уникальными?
И это очень правильный вопрос.

Давайте рассмотрим этот сценарий с точки зрения устройства чтения с экрана.

Считыватели экрана используют ориентиры для идентификации структуры на странице. Если присутствуют два или более одинаковых ориентира, нам нужно сделать их уникальными с помощью меток.

Устройство чтения с экрана может определить, для чего используется каждый ориентир. Это особенно важно для элементов навигации.

Устранение проблемы

Давайте возьмем мой сайт в качестве примера и исправим проблему. Здесь есть два навигационных элемента, и нам нужно их идентифицировать.

Я добавил aria-label как «Tag» для элемента tag.

<nav aria-label="Tag">
  <ul>
    <li>#remix</li>
  </ul>
</nav>
Вход в полноэкранный режим Выход из полноэкранного режима

Обратите внимание, что вам не нужно явно указывать navigation. Так как экранные сканеры уже прочитают это как «тег навигации».

И для нижнего колонтитула мы применим ту же концепцию:

<nav aria-label="Footer">
  <ul>
    <li>about</li>
  </ul>
</nav>
Вход в полноэкранный режим Выход из полноэкранного режима

Вот и все. Определяя метку aria, мы обеспечиваем уникальность каждого лендинга.

Эту концепцию также следует применять к дублирующимся заголовкам, колонтитулам и формам, поскольку все они являются ориентирами.

Повторяющиеся ориентиры

Я слышу, как вы задаетесь вопросом, а как насчет повторяющихся ориентиров?
Например, ваша навигация в верхнем и нижнем колонтитулах полностью совпадает?

В этом случае вы можете использовать один и тот же ярлык.

<header>
  <nav aria-label="Main">
    <ul>
      <li>home</li>
    </ul>
  </nav>
</header>

<footer>
  <nav aria-label="Main">
    <ul>
      <li>about</li>
    </ul>
  </nav>
</footer>
Вход в полноэкранный режим Выход из полноэкранного режима

Спасибо, что прочитали, и давайте общаться!

Спасибо, что читаете мой блог. Не стесняйтесь подписываться на мою рассылку по электронной почте и подключайтесь к Facebook или Twitter.

Оцените статью
Procodings.ru
Добавить комментарий