Ссылка не содержит текста, показывающего ошибку в инструменте оценки доступности Wave

У меня есть страница HTML, в которой есть

<a href="example.com"><i class="myclass"></i></a>

<a href="#" onclick="location.href='http://www.google.com'; return false;" class="cart visible-xs"><i   class="t-icon t-icon-cart-xs-2"></i></a>

но из инструмента доступности волны он показывает ошибку, что тег привязки не содержит текста, хотя я использую тег <i> внутри тега <a>, но я ничего не могу записать внутри тега привязки.

Ответ 1

Согласно инструменту WAVE оба предоставленных вами элемента <a> содержат пустые ссылки, которые нарушают Руководство 2.4.4 WCAG 2.0.4" Назначение ссылок (в контексте)".

Из инструмента WAVE:

"Что это значит Ссылка не содержит текста.

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

Как это исправить Удалите пустую ссылку или укажите текст внутри ссылки, который описывает функциональные возможности и/или цель этой ссылки.

Алгоритм... на английском языке Элемент привязки имеет атрибут href, но не содержит текста (или только пробелы) и изображений с альтернативным текстом. "

Один простой способ исправить ошибку - добавить атрибут aria-label к элементу <a>:

<a href="https://example.com" aria-label="first link"><i class="myclass"></i></a>

<a href="https://www.google.com" class="cart visible-xs" aria-label="second link"><i class="t-icon t-icon-cart-xs-2"></i></a>

Ответ 2

То, что я нашел лучшим вариантом, - добавить тег span с классом "sr-only", который скрывает тег от обычного пользователя, но позволяет читателям экрана видеть его. (Я думаю, что Bootstrap управляет этими ситуациями.) Вот пример:

<a href="example.com">
    <i class="myclass"></i>
    <span class="sr-only">Visit example.com</span>
</a>

<style>
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}
</style>

Ответ 3

Как вы заметили, ваша ссылка не содержит никакого контента. Да, он содержит элемент i, но его пустой.

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

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

Если вам нужно использовать CSS для включения изображения, вы должны хотя бы предоставить некоторый текст в элементе a (который может быть визуально скрыт с помощью CSS, если это необходимо). (И вы не должны использовать элемент i для этой цели.)

Ответ 4

Если вы не можете написать что-либо внутри тега привязки, вы можете добавить атрибут title к тегу a:

  <a href="example.com" title="Visit example.com website"><i class="myclass"></i></a>