Веб-доступность: избыточная ссылка — соседние ссылки ведут на один и тот же URL для тега ‹a href=javascript:void(0)›

код :

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

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

Я так понимаю из-за href="javascript:void(0)" выдает ошибку - Соседние ссылки ведут на один и тот же URL. Но мне нужно запустить функцию jquery (чтобы проверить проверку и установить значение перед перенаправлением) при нажатии тега.

Любое предложение, пожалуйста?


web-accessibility wcag2.0
person Avnish Patel    schedule 04.09.2020    source источник
comment
Вместо этого вы должны использовать прослушиватель событий. Гиперссылки должны иметь конечную точку, href="javascript:void(0) — это антишаблон. У вас есть role="button" - так почему бы просто не использовать <button> и не облегчить себе жизнь :-) хе-хе.   -  person Graham Ritchie    schedule 04.09.2020

Ответы (1)


arrow_upward
1
arrow_downward

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

Решение

  1. В идеале используйте <button> (как было упомянуто в комментарии выше) - он естественно обработает все события
  2. If it's not possible:
    • change the target (it can be replaced with href="#")
    • удалить role="button" - в противном случае все поведение ссылок будет перезаписано.
    • удалить ссылку на слово как в title, так и во внутреннем тексте является избыточным - роль будет сообщена пользователям программы чтения с экрана из разметки, нет необходимости добавлять ее в метки.

Примеры

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

Or

<button style="">Start a Process</a>
person Anna Kanterova    schedule 07.09.2020
comment
Это работает для меня. ‹a href=# title=Начать процесс style=›Начать процесс‹/a› Спасибо Анна Кантерова - person Avnish Patel; 07.09.2020