Помогите сделать Интернет лучше для всех

Смешивание ссылок и кнопок довольно распространено в мире веб-разработки.

Часто вы используете ссылку, но без href, и устанавливаете собственные onclick функции. Или вы делаете то же самое с кнопкой, чтобы создать кнопку, которая действует как ссылка.

Мы разъясним использование ссылок и кнопок и дадим вам советы, как улучшить доступность вашего веб-сайта, а также улучшить качество Google SEO.

Ссылки не должны быть кнопками

Ссылки используются для перехода в другое место.

Когда пользователь переходит на новую страницу веб-сайта, вы должны использовать ссылку.

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

Повторюсь: Google может переходить по ссылкам только в том случае, если в них есть тег <a> с атрибутом href.

Практика наличия ссылок без тега href или использования других тегов, которые работают как ссылки из-за событий сценария, не будет работать для SEO и доступности.

Вот примеры ссылок, по которым Google и программы чтения с экрана могут и не могут переходить.

Это означает, что нажатие на ссылку не должно добавлять, изменять или удалять какие-либо данные в серверной части (за исключением статистики использования, которая отличается). Таким образом, действие удаления не должно быть ссылкой или действием сохранения.

Кнопки не должны быть ссылками

Кнопки используются для изменения состояния приложения. Они не должны перемещать вас на другую страницу, за исключением кнопок отправки для форм.

Их можно использовать на динамической странице для изменения состояния настроек некоторой информации, взятой с сервера, без перезагрузки или изменения страницы веб-сайта.

Роли ARIA

В полях ARIA атрибут role был введен для всех элементов HTML.

Этот атрибут aria-role может использоваться для преобразования элемента из его типа в определенный другой тип для программы чтения с экрана.

В этом случае я создал div, который стал похож на кнопку для программы чтения с экрана, а затем создал ссылку, которая трансформировалась в кнопку.

tabindex = ”0 '

tabindex="0" требуется, чтобы пользователь мог сфокусироваться и выбрать эти элементы с помощью программы чтения с экрана. tabindex указывает браузеру добавить те элементы к элементам, которые можно выбрать, нажав клавишу табуляции.

Проверьте свой сайт на наличие проблем с доступностью!

Для этого существует множество нестандартных продуктов, таких как Husable, которые предоставят вам настоящую человеческую оценку вашего веб-сайта, чтобы обнаружить реальные проблемы, которые автоматические инструменты не найдут или не обнаружат, потому что вам просто нужен человек!

Ссылки и ресурсы