Блог

Главная - Вопросы по программированию - Веб-доступность: избыточная ссылка — смежные ссылки ведут на тот же URL для тега

Веб-доступность: избыточная ссылка — смежные ссылки ведут на тот же URL для тега

#wcag2.0 #web-accessibility

#HTML #Специальные возможности #wcag2.0

Вопрос:

код:

 <a href="javascript:void(0)" role="button" title="Start a Process link" style="">Start a Process link</a>

Я использую wave tool для обеспечения доступности в Интернете.
Инструмент Wave выдает ошибку:

Избыточная ссылка — смежные ссылки ведут на тот же URL.
Ссылка: WCAG 2.4.4 Назначение ссылки (в контексте) (уровень A)

Я понимаю, что из-за href="javascript:void(0)" этого выдается ошибка «Смежные ссылки ведут на один и тот же URL».

Но я должен запустить функцию jQuery (для проверки правильности и установки значения перед перенаправлением) при нажатии на <a> тег.

Пожалуйста, есть какие-либо предложения?

Комментарии:

1. Вместо этого вам следует использовать прослушиватель событий. Гиперссылки должны иметь конечную точку, href="javascript:void(0) это анти-шаблон. У вас есть role="button" — так почему бы просто не использовать <button> и не облегчить себе жизнь 🙂 хе-хе.

Ответ №1:

Ошибка указывает на то, что существует другой элемент ссылки (привязка <a> с допустимым href атрибутом или другой элемент с role="link" ), который имеет ту же цель. В вашем случае это очень вероятно, поскольку целевой ( href ) является javascript:void(0) , и, вероятно, существует более одной такой ссылки. Таким образом, Wave считает, что эти ссылки одинаковы, таким образом, помечая Критерий успеха WCAG 2.0 2.4.4 Назначение ссылки (в контексте).

Решение

  1. В идеале используйте <button> (как было упомянуто в комментарии выше) — он будет обрабатывать все события естественным образом
  2. Если это невозможно:
    • измените цель (ее можно заменить на href="#" )
    • удалить role="button" — в противном случае все поведение ссылки будет перезаписано.
    • удалите слово «ссылка» в обоих title и внутренний текст является избыточным — роль будет передана пользователям программы чтения с экрана из разметки, нет необходимости добавлять его в ярлыки.

Примеры

 <a href="#" title="Start a Process" style="">Start a Process</a>

Или

 <button style="">Start a Process</a>