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

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

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

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

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

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

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

<a href="www.google.com">Хорошая ссылка 1</a>
<a href="/newpage/file">Хорошая ссылка 2</a>

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

<a onclick="window.location('www.google.com')">Плохая ссылка 1</a>
<a go="goto('www.google.com')">Плохая сылка 2</a>

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

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

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

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

<button onclick="saveButton()" >Сохранить</button>
<button href="/newpage/file">Перейти</button>

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

<button onclick="window.location('www.google.com')">Перейти</button>
<button href="www.google.com">Перейти</button>

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

ARIA

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

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

<div tabindex="0" role="button">
  Это div, который работает как button
</div>
<a tabindex="0" role="button">
  Это ссылка, которая работает как button
</a>

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

В любом случае семантическая HTML разметка должна преобладать над ARIA.

Спасибо за внимание.