Ссылка - это ссылка, кнопка - это кнопка

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

2022-10-11 I Shar

время чтения 2 мин.

Мы используем a без href, создаем для ссылок пользовательские функции onClick или используем кнопки для перехода на другие страницы.

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

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

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

Например, если пользователь хочет перейти на новую страницу сайта, Вы должны использовать ссылку. Браузер не будет корректно отображать ссылку без атрибута href. Поисковые системы сканируют только те ссылки a, которые имеют атрибут href

Использование тега a без href или использование в качестве ссылки другого тега, оказывает отрицательное влияние на SEO и доступность.

Вот примеры ссылок, которые Google будет сканировать:

Хорошая ссылка 1
Хорошая ссылка 2

А вот примеры ссылок, которые Google сканировать не будет:

Плохая ссылка 1
Плохая сылка 2

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

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

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

Вот примеры корректного использования кнопок:

А вот примеры неверного использования кнопок:

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

ARIA

The Web Accessibility Initiative’s Accessible Rich Internet Applications Suite (WIA-ARIA или ARIA) - набор инструментов, позовляющих сделать веб-контент более доступным.

Благодаря ARIA для всех тегов появился атрибут aria-role, преобразующий их семантическую роль для улучшения воспроиятия с помощью специальных возможностей (assistive technologies).


  Это div, который работает как button


  Это ссылка, которая работает как button

tabindex="0" - может иметь в качестве своего значения любое положительное целое число от 0 до 32767 и определяет порядок перехода при нажатии кнопки tab или ее эквивалента на специальном устройстве.