aria-hidden

Атрибут для скрытия элементов от вспомогательных технологий.

Время чтения: меньше 5 мин

Кратко

Секция статьи "Кратко"

Глобальное состояние из WAI-ARIA в котором элемент скрыт от вспомогательных технологий, но виден всем остальным пользователям.

Пример

Секция статьи "Пример"
        
          
          <button class="button button-aqua">  <span class="material-symbols-outlined" aria-hidden="true">logout</span>  <span class="visually-hidden">Выйти из аккаунта</span></button>
          <button class="button button-aqua">
  <span class="material-symbols-outlined" aria-hidden="true">logout</span>
  <span class="visually-hidden">Выйти из аккаунта</span>
</button>

        
        
          
        
      
Открыть демо в новой вкладке

Как пишется

Секция статьи "Как пишется"

Добавьте к тегу aria-hidden с одним из значений:

  • false — элемент виден вспомогательным технологиям.
  • true — элемент скрыт от вспомогательных технологий.
  • undefined (по умолчанию) — браузер сам определяет скрыт элемент или нет в зависимости от его стилей и видимости на странице.

Как это понять

Секция статьи "Как это понять"

Используйте aria-hidden, когда элемент надо скрыть только от пользователей вспомогательных технологий. Типичные ситуации:

  • избыточный или дублирующийся текст;
  • декоративный контент — иконочный шрифт или Unicode-символы в элементах управления;
  • временно скрытые или свёрнутые элементы, например, выпадающее меню.

aria-hidden можно применять ко всем неинтерактивным элементам, которые не скрыты другими способами:

Подсказки

Секция статьи "Подсказки"

💡 Хорошая практика — текстовый эквивалент для скрытого контента. Идеально, если он доступен и для зрячих пользователей. Особенно тексты в контролах полезны для пользователей программ голосового управления.

💡 Если внутри неинтерактивного элемента с aria-hidden="true" есть интерактивные, то они скроются не во всех браузерах и не от всех скринридеров.

💡 Когда используете aria-hidden для скрытия и показа элементов с помощью JavaScript, рекомендуется не прописывать aria-hidden="true" в разметке. Если скрипт не сработает, такие элементы всегда будут скрыты от скринридеров.

На собеседовании

Секция статьи "На собеседовании"

Это партнёрская рубрика, мы выпускаем её совместно с сервисом онлайн-образования Яндекс Практикум. Приносите вопрос, на который не знаете ответа, в задачи, мы разложим всё по полочкам и опубликуем. Если знаете ответ, присылайте пулреквест на GitHub.

Это вопрос без ответа. Вы можете помочь! Почитайте о том, как контрибьютить в Доку.