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

Проблема с двойными ссылками

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

На обычной странице со списком товаров отображается 50 товаров. Для каждого продукта представьте, что у вас есть три ссылки, ведущие на страницу продукта: одна на заголовке продукта, одна на цене и одна на комментариях.

Если мы умножим эти три ссылки на 50 продуктов, мы получим около 150 ссылок, которые нашему пользователю придется перебирать, пытаясь найти нужный продукт. Их будут постоянно бомбардировать одним и тем же именем три раза подряд.

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

То же самое произойдет на более крупных веб-сайтах, таких как Amazon, где объединение или отключение нескольких ссылок, указывающих на один и тот же раздел страницы продукта, уменьшит шесть идентичных ссылок.

Как исправить двойные ссылки

Вы можете выбрать один из двух простых способов:

  1. Отключение tabindex для соседних изображений и текстовых ссылок
  2. Объединение смежных изображений и текстовых ссылок

Отключение tabindex для смежных изображений и текстовых ссылок

Чтобы удалить ссылку из выбираемых элементов элемента с помощью клавиши табуляции, вам нужно добавить код tabindex="-1".

<a href="http://foo.bar" tabindex="-1">inaccessible by tab link</a>

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

Объединение смежных изображений и текстовых ссылок

Многие ссылки имеют как текстовое, так и графическое представление, прилегающие друг к другу - просто отображаемые в отдельных a элементах.

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

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

Вы можете преобразовать свой код из этого:

<a href="http://dope.dope">DOPE Shoe Red</a>
<a href="http://dope.dope"><img src="dope.png" alt="shoe red"/></a>
<a href="http://dope.dope">Learn more about Dope Shoe Red</a>

К этой более доступной версии с помощью одной ссылки:

<a href="http://dope.dope">
  <span>DOPE Shoe Red</span>
  <img src="dope.png" alt=""/>
  <p>Learn more about Dope Shoe Red</p>
</a>

Проверьте свой сайт на наличие проблем с доступностью!

Для этого существует множество нестандартных продуктов, таких как Husable, которые предоставят вам настоящую человеческую оценку вашего веб-сайта, чтобы выявить реальные проблемы, которые автоматические инструменты не найдут или не обнаружат, потому что вам просто нужен человек!

Ссылки и ресурсы