A11Y 101: Добавление пропущенных ссылок

Оценивая свой сайт, я понял, что при использовании программы для чтения с экрана. Чтобы добраться до основной части сайта, пользователю приходится часто переходить по вкладкам.

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

Что такое пропуск ссылок?

К счастью для нас, есть решение, как исправить ситуацию, — это пропуск ссылок.

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

Для примера это может выглядеть следующим образом:

<a href="#main-content" class="skip-link">Skip navigation</a>
<nav>
  <a href="#">About</a>
  <a href="#">Contact</a>
  <a href="#">Login</a>
</nav>
<main id="main-content">I'm the main content</main>
<footer>
  <a href="#">Privacy</a>
</footer>
Войти в полноэкранный режим Выйти из полноэкранного режима

В целом, это уже работает. Мы можем быстро открыть вкладку и пропустить весь раздел навигации!

Улучшение ссылок для пропуска

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

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

.skip-link {
  background: #da0060;
  color: #fff;
  left: 50%;
  padding: 8px;
  position: absolute;
  transform: translate(-50%, -200%);
  transition: transform 0.3s;
}
Вход в полноэкранный режим Выход из полноэкранного режима

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

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

.skip-link:focus {
  transform: translate(-50%, 0);
}
Вход в полноэкранный режим Выход из полноэкранного режима

И когда пользователь наведет курсор на этот элемент, он появится.

Я создал этот очень простой демонстрационный пример, чтобы вы могли поиграть с ним.
Попробуйте использовать навигацию по вкладкам и взаимодействовать с элементом пропуска, затем снова перейдите по вкладке.

Вы сразу же окажетесь в нижнем колонтитуле, верно?
Теперь попробуйте не нажимать на ссылку skip, а продолжать переходить по вкладке.
Теперь вы можете посетить меню!

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

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

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