Использование тега <a> без атрибута href: нормы HTML

Быстрый ответ

**Использование тега `<a>` без `href`** допускается **стандартом HTML5**, но оно получает смысл лишь при использовании дополнительных интерактивных элементов. Для активации ссылки с клавиатуры добавьте `tabindex="0`, а для обработки кликов мышью – `onclick`.

**Пример кода**:

<a onclick="surprise();" tabindex="0">Здесь начинается волшебство</a>

Такой элемент ведёт себя как интерактивный объект, реагируя на клики и будучи полностью доступным для навигации с помощью клавиатуры.

Когда и зачем использовать <a> без навигации?

Тег <a> без href часто выполняет роль заполнителя для событий, управляемых с помощью JavaScript. Он подходит для создания модальных окнов или выпадающих меню. Важно акцентировать внимание на доступности: элементы должны быть легко воспринимаемы и доступными для использования через клавиатуру и скринридеры.

Содействие динамичности для <a>

Если тег <a> должен имитировать поведение <button>, вы можете добавить ему role="button" и назначить слушатели событий в JavaScript. Это поможет подчеркнуть их семантическую роль и обеспечить интерактивность.

Подробнее об этом расскажет наш спикер на видео

Доступность для пользователей клавиатуры

Учтите тех, кто предпочитает работать с клавиатурой! Сделайте взаимодействие с элементом удобным, добавив:

• tabindex="0", чтобы элемент можно было выделить;
• Обработку нажатий клавиш Enter и Space через слушатели событий;
• Внешний вид <a> можно адаптировать под кликабельный элемент с помощью CSS.

a[role="button"] {
    cursor: pointer; /* Указатель появляется при наведении курсора */
    text-decoration: underline; /* Подчёркивание добавляет визуальное сходство со ссылкой */
}

Визуализация

Представьте тег <a> как дверь (🚪):

Дверь (🚪) | Функция
----------- | --------------------
С **дверной ручкой** (🔗) | Открывает путь (как `<a href="...">`)
Без **дверной ручки** (❓) | Просто часть стены (как `<a>` без `href`)

Тег <a> без href никуда не ведёт. Но возможно ли "постучать"?

<🚪>     | Можно попробовать потрогать, постучать, но прохода нет.
<🚪🔗> | Приглашает вас переступить порог в другое пространство!

Создание доступных и семантически корректных якорей

Семантическая оптимизация

Хотя тег <a> можно адаптировать под роль кнопки, лучше использовать <button> для интерактивных действий. Если же использование <a> необходимо, присвойте ему role="button", чтобы пользователи вспомогательных технологий воспринимали его функциональность корректно.

Функциональность JavaScript

Дополнительные атрибуты, такие как data-toggle и data-target, позволяют JavaScript взаимодействовать с якорями без href. Обеспечьте поддержку атрибута aria-expanded, чтобы скринридеры сообщали об изменении видимости элементов.

ARIA для доступности

При использовании иконок внутри якоря добавьте aria-hidden="true", чтобы указать их декоративную роль. Атрибут aria-label поможет описать действие для ссылок, имитирующих кнопки.

<a role="button" onclick="doSomething();" aria-label="Запустить действие" tabindex="0">
    Запустить <i class="fa fa-play-circle" aria-hidden="true"></i> <!-- Это не настоящая кнопка, а лишь имитация! -->
</a>

Нестандартные, но возможные к реализации атрибуты

Атрибуты target, download, rel, hreflang и type теоретически не должны функционировать без href. Однако они могут работать под управлением JS, что может вызвать проблемы с доступностью.

Полезные материалы

1. <a>: Элемент якоря | MDN — Достоверный источник стандартов для спецификаций веба.
2. HTML Standard: Элемент a — Полная характеристика правил HTML5 для элементов <a> от WHATWG.
3. HTML тег a — Практичные примеры и руководства по использованию тега <a>.
4. Ссылки и гипертекст — Подробное руководство по доступности ссылок <a>.
5. Когда кнопка не кнопка? — Дискуссия об использовании <button> вместо <a>.
6. Таблицы поддержки HTML5 — Ресурс для ознакомления с поддержкой HTML5 в браузерах, в контексте якорей.