Атрибут hidden тега <a>

Описание

Атрибут hidden скрывает ссылку <a> от пользователя, делая её невидимой и недоступной для взаимодействия. Это булевый атрибут, не требующий значения.

Базовое использование:
<a href="#" hidden>Скрытая ссылка</a>

Особенности работы:

Характеристика Описание
Видимость Полностью скрывает элемент (аналог display: none)
Доступность Удаляется из accessibility tree
Взаимодействие Ссылка недоступна для кликов и фокуса
Наследование Не влияет на дочерние элементы

Разница с CSS display: none

  • Семантика: hidden явно указывает на скрытое состояние
  • Производительность: Браузер может оптимизировать рендеринг
  • Доступность: Лучше обрабатывается скринридерами
  • Специфичность: Не переопределяется CSS (если не !important)
Правильное скрытие с сохранением функциональности:
<!-- Плохо: ссылка видна скринридерам, но не визуально --> <a href="/secret" style="opacity: 0; position: absolute;">Секретная</a> <!-- Правильно: полностью скрытое состояние --> <a href="/admin" hidden aria-hidden="true">Админка</a> <!-- Временное скрытие --> <a href="#" id="temp-link">Исчезнет через 5с</a> <script>setTimeout(() => temp-link.hidden = true, 5000)</script>

Рекомендации по использованию:

  • Используйте для элементов, которые должны быть полностью скрыты
  • Для временного скрытия предпочтительнее CSS-классы
  • Сочетайте с aria-hidden="true" для гарантированного скрытия
  • Не используйте для скрытия контента, который должен быть доступен скринридерам
  • Альтернатива - рендерить ссылку только при необходимости

Важно: Не используйте hidden для скрытия контента, который должен оставаться доступным для SEO или скринридеров. В таких случаях применяйте CSS-техники (например, visually-hidden класс).