aria-hidden

Глобальное состояние из 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 можно применять ко всем неинтерактивным элементам, которые не скрыты другими способами:

• HTML-атрибутом hidden;
• CSS-свойствами display: none или visibility: hidden.

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

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

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

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

Скопировать ссылку на секцию "На собеседовании" Скопировано

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

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