aria-label

Свойство виджета из 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:

• <caption> и роль caption.
• <code> и роль code.
• <dd> и роль definition.
• <dt>, <dfn> и роль term.
• <del> и роль deletion.
• <em> и роль emphasis.
• <ins> и роль insertion.
• <mark> и роль mark.
• <p> и роль paragraph.
• <strong> и роль strong.
• <sub> и роль subscript.
• <sup> и роль superscript.
• <time> и роль time.
• <span>, <div> и роль generic.
• роли presentation/none и suggestion.

Имя в 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.

        
          
          <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;
}

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