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" в разметке. Если скрипт не сработает, такие элементы всегда будут скрыты от скринридеров.

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

Скопировано
Задать вопрос в рубрику
🤚 Я знаю ответ

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