Использование тегов <a> и <button> требует внимательного подхода, чтобы обеспечить доступность веб-ресурсов и улучшить SEO. В этой статье мы рассмотрим правильное использование ссылок и кнопок и объясним, почему это важно.
Ссылки должны оставаться ссылками
Ссылки используются для переходов на другие страницы или ресурсы. Важно помнить, что браузеры корректно отображают только те ссылки, которые имеют атрибут href. Также поисковые системы сканируют только ссылки с атрибутом href, что влияет на SEO.
Примеры правильных ссылок:
<a href="https://www.google.com">Хорошая ссылка 1</a>
<a href="/newpage/file">Хорошая ссылка 2</a>Примеры неправильных ссылок:
<a onclick="window.location.href='https://www.google.com'">Плохая ссылка 1</a>
<a go="goto('https://www.google.com')">Плохая ссылка 2</a>Использование тега <a> без href или использование других тегов в качестве ссылок негативно влияет на SEO и доступность.
Кнопки должны оставаться кнопками
Кнопки используются для изменения состояний или выполнения действий, таких как отправка формы. Они не должны использоваться для перехода на другие страницы, за исключением кнопок submit в формах.
Примеры правильного использования кнопок:
<button onclick="saveButton()">Сохранить</button>
<button onclick="window.location.href='/newpage/file'">Перейти</button>Примеры неправильного использования кнопок:
<button onclick="window.location.href='https://www.google.com'">Перейти</button>
<button href="https://www.google.com">Перейти</button>Кнопки могут использоваться для модификации динамического содержимого сайта.
Использование ARIA для улучшения доступности
The Web Accessibility Initiative’s Accessible Rich Internet Applications Suite (WAI-ARIA или просто ARIA) представляет собой набор инструментов, позволяющих сделать веб-контент более доступным. Атрибут aria-role позволяет преобразовывать семантическую роль тегов для улучшения восприятия с помощью специальных возможностей (assistive technologies).
Примеры использования ARIA:
<div tabindex="0" role="button">
Это div, который работает как button
</div>
<a tabindex="0" role="button">
Это ссылка, которая работает как button
</a>Атрибут tabindex="0" может принимать любое положительное целое число от 0 до 32767 и определяет порядок перехода при нажатии клавиши Tab.
Однако, семантическая HTML-разметка должна преобладать над ARIA. Использование правильных тегов для их изначальных целей всегда является лучшей практикой.
Заключение
Правильное использование ссылок и кнопок улучшает доступность веб-ресурсов и положительно влияет на SEO. Следование этим рекомендациям поможет создать более доступный и удобный для пользователя сайт. Внедрение ARIA может дополнительно улучшить взаимодействие с сайтом для пользователей со специальными потребностями.
