Доступность: лучшее место для размещения tabindex = -1, чтобы избежать дублирования ссылок?

Question

Этот вопрос о доступности.

Вот мой код:

<a href="https://example.com/url-to-details">
    <img src="https://example.com/item.png" alt="some description">
</a>
<a href="https://example.com/url-to-details">some description</a>

Это не идеально, так как мы знаем, что мы должны избегать Соседние ссылки идут на один и тот же URL (это то, что инструмент доступности WAVE говорит для меня на моемвеб-страница об этом куске кода).Другими словами, проблема здесь в том, что вы последовательно используете клавишу Tab и по-прежнему появляетесь в той же ссылке.Это не идеально.

Мое решение состоит в том, чтобы установить tabindex = "- 1" для одной из ссылок.

Итак, мои вопросы:

1.Это хорошая идея, или у вас есть лучший подход?

2.Какой код лучше с точки зрения доступности:

<a href="https://example.com/url-to-details" tabindex="-1">
    <img src="https://example.com/item.png" alt="some description">
</a>
<a href="https://example.com/url-to-details">some description</a>

или

<a href="https://example.com/url-to-details">
    <img src="https://example.com/item.png" alt="some description">
</a>
<a href="https://example.com/url-to-details" tabindex="-1">some description</a>

PS Существует 3-й подход: объединить два <a></a><a></a> в один такой, как<a> picture + some description</a>, но я бы по некоторым причинам избегал этого.

PPS Текст описания "some description" одинаков как для описания изображения, так и для текста в теге привязки.

Answer 1

С чисто WCAG точки зрения доступности, ничто не должно меняться в исходном коде.Тот факт, что WAVE указывает на это, является просто артефактом этого инструмента.Это не ошибка, а «предупреждение» (в терминах WAVE).Документ для WAVE говорит об «оповещениях»:

Цель не должна состоять в том, чтобы избавиться от всех значков, кроме ошибок.Оповещения требуют тщательного изучения - [y], вероятно, представляет собой проблему для конечного пользователя .

Ключ заключается в том, что предупреждения представляют собой проблемы «конечного пользователя», означающие проблемы с удобством использования или взаимодействия с пользователем,Не сбой доступности.

Итак, если вы пытаетесь соответствовать WCAG AA, наличие избыточной ссылки не является ошибкой и не требует исправления.Но если вы посмотрите на взаимодействие с пользователем, то уменьшение количества табуляций и ссылок, указывающих на один и тот же пункт назначения, всегда полезно.

Как вы решаете эту проблему, похоже, суть ОП.Когда две ссылки, которые находятся рядом, указывают на одно и то же местоположение, лучший способ - объединить ссылки в одну.Добавление tabindex="-1" к одному, как правило, является плохой идеей, поскольку это затрагивает только пользователей клавиатуры, а не пользователей программ чтения с экрана.

Answer 2

tabindex только меняет порядок клавиатуры, но программа чтения с экрана по-прежнему объявляет одну и ту же ссылку дважды.

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

Answer 3

Я не вижу варианта использования для ссылки на изображение и смежной текстовой ссылки, которые используют один и тот же URL.Это должна быть одна ссылка, поэтому у вас есть три варианта:

1. избавиться от ссылки на изображение,
2. избавиться от текстовой ссылки,

3. объединить изображение и текст в одну ссылку , где изображение имеет атрибут empty alt :

   <a href="https://example.com/url-to-details"><img src="https://example.com/item.png" alt=""> some description</a>

В третьем случае атрибут alt должен быть пустым во избежание дублирования текста (пользователи программы чтения с экрана не хотят слышать текст ссылки дважды).Это также приводит к более простому коду, который не зависит от tabindex="-1".См. Также Метод WCAG H2: Объединение смежных изображений и текстовых ссылок для одного и того же ресурса .

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

Answer 4

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

Допустим, вы разрабатываете страницу со списком товаров для интернет-магазина.

Если ссылка ведет на страницу сведений о продукте, то текст ссылки должен описывать эту страницу сведений.Однако изображение alt должно описывать само изображение, а не страницу с подробностями.

.link {
  display: flex;
  flex-direction: column;
  align-items: center;
}

<a class="link" href="https://www.mywebsite.org/detail-page-100">
  <img class="link-img" src="https://picsum.photos/200" alt="2 puppies running through a meadow in the summer sun">
  <span class="link-desc">Buy organic pet food - 5kg</span>
</a>

Answer 5

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

Правильный ответ - это зависит.

Если ваше изображение лучше описывает вашу ссылку, используйте это изображение.

Если ваш якорный тег лучше описывает его - тогда используйте <a>.

Некоторая информация для tabindex

Пожалуйста, ознакомьтесь со всеми возможностями, которые можно добавить по ссылке здесь