Блог

Я создаю список навигации, который ссылается на различные статьи. В прошлом я определял списки навигации как nav элементы, содержащие один ul элемент, который содержит несколько li элементов, каждый со своими индивидуальными a элементами.

Мне интересно, можно ли избежать a элементов с помощью атрибута link role WAI-ARIA?

Естественно, li элементы не имеют разрешенных href атрибутов, поэтому следующее не будет преобразовано во что-либо понятное браузеру:

 <nav role=listbox>
  <ul>
    <li role=link href=#foo>
      Foo
    </li>
  </ul>
</nav>
  

Рекомендация WAI-ARIA описывает роль ссылки следующим образом:

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

Это продолжается с:

Если это собственная ссылка на языке хоста (например, привязка HTML со значением href), активация ссылки приводит к переходу агента пользователя к этому ресурсу. Если это имитируемая ссылка, автор веб-приложения отвечает за управление навигацией.

Конечно, я мог бы добавить простой обработчик кликов JavaScript, но это не позволяет браузеру определить, на что указывает ссылка. Например, в Chrome, Edge и Firefox в левом нижнем углу экрана появляется серое поле, когда ссылка активирована, чтобы пользователь знал, что ссылка делает. При наведении курсора мыши на ссылку, которую я включил выше в этот пост, пользователь увидит, что это отображается:

Возможно ли заставить браузер включить эту функциональность без реализации каких-либо дополнительных элементов?

Нет, роль WAI-ARIA link является просто описательной и предназначена для помощи устройствам, таким как программы чтения с экрана. Это не приведет к какой-либо функциональности. Это особенно полезно, когда рассматриваемая ссылка является не a элементом, а имитируемой ссылкой с помощью javascript.

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

При этом некоторые браузеры позволяют вам манипулировать этим, либо изменяя настройки в браузере, либо устанавливая дополнения. Это не имеет реальной практической цели, поскольку большинство пользователей не почувствуют изменений, но, похоже, это единственный способ. Я нашел большую часть документации для Firefox на странице window.status. Вы можете установить window.status = 'www.fakeurl.com' , однако вам нужно установить dom.disable_window_status_change предпочтение на false в about:config , прежде чем это сработает.

Если отображение текста в строке состояния абсолютно необходимо, единственный способ добиться этого — использовать a элемент. Как правило, если ваше приложение позволяет использовать a элемент для навигации, то вы всегда должны использовать a элемент для навигации. И с CSS3 трудно представить слишком много сценариев, в которых вы не смогли бы этого сделать, поскольку вы могли бы придать этому тегу привязки вид практически любого, что вы хотели.