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

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

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

Задать вопрос в рубрику

🤚 Я знаю ответ

Матвей Романов  отвечает

Скопировать ссылку "Матвей Романов  отвечает" Скопировано

1. hidden — это HTML-атрибут, который предназначен для скрытия элемента на странице. Это означает, что элемент не будет отображаться в пользовательском интерфейсе и скроется от вспомогательных технологий, но он все ещё существует в DOM.
2. aria-hidden="true" — это атрибут ARIA (Accessible Rich Internet Applications), который используется для указания, что элемент должен быть скрыт от вспомогательных технологий, таких как скринридеры. Это означает, что элемент не будет доступен для слушателей событий или считывания содержимого вспомогательными технологиями, но он все ещё виден в пользовательском интерфейсе.
3. role="presentation" — это ARIA-атрибут, который указывает, что элемент является частью представления или дизайна и не имеет никакой роли в вспомогательных технологиях. Это означает, что роль элемента будет игнорироваться такими технологиями.
4. role="none" — это синоним role="presentation", который тоже указывает, что элемент не имеет роли для вспомогательных технологий. Это означает, что роль элемента не будет доступна для слушателей событий или механизмов навигации вспомогательными технологиями.

+ Развернуть