Анализируя свой сайт, мы обнаружили следующую ошибку: “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.