aria-label

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

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

Кратко

Скопировано

Свойство виджета из WAI-ARIA, которое задаёт доступное имя элементу.

Имя из атрибута aria-label видно только вспомогательным технологиям и скрыто от других пользователей.

Пример

Скопировано
        
          
          <button aria-label="Пауза">  <svg    viewBox="0 0 35 42"    width="35"    height="42"    xmlns="http://www.w3.org/2000/svg"  >    <!-- Описание фигуры -->  </svg></button>
          <button aria-label="Пауза">
  <svg
    viewBox="0 0 35 42"
    width="35"
    height="42"
    xmlns="http://www.w3.org/2000/svg"
  >
    <!-- Описание фигуры -->
  </svg>
</button>

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

Как пишется

Скопировано

Задайте тегу атрибут aria-label с нужным текстом.

aria-label можно задавать всем интерактивным элементам, с которыми можно взаимодействовать. Также атрибут можно использовать и для некоторых неинтерактивных элементов — таблиц, модальных окон, ориентиров или групп элементов. Только учитывайте, что браузеры и скринридеры плохо поддерживают aria-label у статичного контента.

Есть теги и роли, для которых точно нельзя использовать aria-label:

Имя в aria-label должно быть кратким и не повторять роль элемента. Например, если это главная навигация, назовите её «Главная» вместо «Главная навигация». Во втором случае скринридер скажет «Главная навигация, навигация». Слишком много навигаций! Также старайтесь задавать уникальные имена ориентирам — частям страницы, к которым могут быстро переместиться пользователи скринридеров.

Имена из aria-label можно изменять динамически, но это потенциальная проблема для пользователей голосового управления. Таким пользователям сложно угадать, как изменилось название элемента в aria-label, от которого зависят голосовые команды. Это же касается и ситуаций, когда используете непредсказуемые имена. Например, кнопка с иконкой с домом называется не «Главная», а «Непрочитанные сообщения».

Учитывайте, что aria-label перезаписывает текстовое содержимое некоторых тегов и элементов с ARIA-ролями, а ещё из ARIA-атрибутов. Исключение — другой атрибут aria-labelledby. Он всегда перезаписывает aria-label, поэтому не стоит задавать их для одного элемента.

Если у элемента уже есть видимое имя, то лучше не перезаписывать его в aria-label. Это избыточно и может запутать зрячих пользователей скринридеров. Например, у кнопки может быть название «Согласен», а скринридер озвучит совершенно другой текст из aria-label «Принимаю условия соглашения».

        
          
          <!-- ⛔ Так лучше не делать --><button aria-label="Принимаю условия соглашения">Согласен</button>
          <!-- ⛔ Так лучше не делать -->
<button aria-label="Принимаю условия соглашения">Согласен</button>

        
        
          
        
      

Когда у <table> есть одновременно <caption> и aria-label, таблица получит имя из атрибута, а содержимое <caption> станет её описанием.

Как понять

Скопировано

Доступное имя или просто имя элемента — это краткое название элемента, которое озвучивает скринридер при фокусе или когда он зачитывает всё подряд.

Чаще всего достаточно добавить в элемент текст, например, в <button> или <a>. В случае с картинкой источник имени — alt. Другие элементы могут получить имя из title как <iframe>.

Если нельзя использовать ни один из этих способов, атрибут aria-label — один из дополнительных способов задать имя элементу. Он пригодится в следующих случаях:

  • Несколько ориентиров на странице. К примеру, <header> или <footer>.
  • Группа элементов, о которой надо рассказать вспомогательным технологиям.
  • Интерактивные элементы без текстового содержимого. Например, кнопка с иконкой.

Подсказки

Скопировано

💡 Не забывайте переводить содержимое атрибута, когда поддерживаете несколько языков.

💡 Содержимое aria-label иногда не дружит с автоматическим переводом, а раньше вообще не переводилось ни одним из сервисов.

💡 Когда у элемента должно быть видимое для всех имя, используйте aria-labelledby.

На практике

Скопировано

Татьяна Фокина советует

Скопировано

🛠 Старайтесь использовать для кнопок с иконками видимые текстовые лейблы. Это поможет зрячим пользователям, так как смысл иконок не всегда понятен. Особенно трудно разобраться с иконками пользователям голосового управления и людям с когнитивными особенностями.

🛠 Хорошая альтернатива aria-label — визуально скрытый контент с классом .visually-hidden или .vh. Так избежите проблем с автоматическим переводом, а ещё его точно прочтёт скринридер в любом режиме навигации.

        
          
          <button>  <svg    viewBox="0 0 35 42"    width="35"    height="42"    xmlns="http://www.w3.org/2000/svg"  >    <!-- Описание фигуры -->  </svg>  <span class="visually-hidden">Пауза</span></button>
          <button>
  <svg
    viewBox="0 0 35 42"
    width="35"
    height="42"
    xmlns="http://www.w3.org/2000/svg"
  >
    <!-- Описание фигуры -->
  </svg>
  <span class="visually-hidden">Пауза</span>
</button>

        
        
          
        
      
        
          
          .visually-hidden {  position: absolute;  width: 1px;  height: 1px;  clip: rect(0 0 0 0);  clip-path: inset(50%);  overflow: hidden;  white-space: nowrap;}
          .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

        
        
          
        
      

Если поддерживаете только новые браузеры, можно не использовать уже устаревшее свойство clip.