aria-labelledby

Как добавить подпись к элементу с помощью ARIA.

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

Кратко

Секция статьи "Кратко"

Свойство связи из WAI-ARIA для одного или нескольких элементов c видимым именем (подписью) для другого.

Пример

Секция статьи "Пример"
        
          
          <figure aria-labelledby="group-label">  <img src="images/chart.png" alt="Прогресс похудения за 9 недель. Сначала ёж весил 11 килограмм, в конце — 4 килограмма.">  <figcaption id="group-label">График похудения ежа.</figcaption></figure>
          <figure aria-labelledby="group-label">
  <img src="images/chart.png" alt="Прогресс похудения за 9 недель. Сначала ёж весил 11 килограмм, в конце — 4 килограмма.">
  <figcaption id="group-label">График похудения ежа.</figcaption>
</figure>

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

Скринридеры прочтут пример так: «График похудения ежа, группа. Прогресс похудения за 9 недель. Сначала ёж весил 11 килограмм, в конце — 4 килограмма, графика».

Как пишется

Секция статьи "Как пишется"

Задайте тегу атрибут aria-labelledby с одним или несколькими ID через пробел и свяжите с ним элемент с подписью при помощи id.

aria-labelledby можно использовать для всех интерактивных и неинтерактивных элементов вроде таблиц и графики, кроме:

  • <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.

Для <input> в первую очередь используйте <label>. У этого HTML-тега есть важная особенность — при клике по тегу фокус перемещается на поле по умолчанию.

Ещё aria-labelledby можно связывать не только с видимыми элементами, но и со скрытыми с помощью hidden, display: none или visibility: hidden.

В примере у переключателя скрыт лейбл «Ночной режим», но он всё равно доступен для вспомогательных технологий.

        
          
          <span id="label" hidden>Ночной режим</span><input type="checkbox" role="switch" aria-labelledby="label">
          <span id="label" hidden>Ночной режим</span>
<input type="checkbox" role="switch" aria-labelledby="label">

        
        
          
        
      

Подпись из aria-labelledby должна быть краткой и чётко описывать цель элемента. При этом лучше не изменять её динамически, это запутает пользователей.

aria-labelledby перезаписывает другие текстовые значения. К примеру, из aria-label или <label>. Так что, используйте атрибут с осторожностью с некоторыми ролями и тегами.

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

Порядок ID в aria-labelledby имеет значение. Скринридер читает лейблы в том порядке, в каком они перечислены в атрибуте. Ещё он не повторяет лейблы, если ID дублируются.

В этом примере при фокусе на первом пункте скринридер прочтёт: «Вес один кг».

        
          
          <label id="label1" for="select">Вес</label><select id="select" aria-labelledby="label1 label1 select label2 label2">  <option value="1">1</option>  <option value="2">2</option></select><span id="label2">кг</span>
          <label id="label1" for="select">Вес</label>
<select id="select" aria-labelledby="label1 label1 select label2 label2">
  <option value="1">1</option>
  <option value="2">2</option>
</select>
<span id="label2">кг</span>

        
        
          
        
      

Как понять

Секция статьи "Как понять"

Подпись, по-другому видимый идентификатор в ARIA — это видимое имя любого элемента, не только поля как в HTML. А имя или доступное имя элемента — краткое название элемента, которое озвучивает скринридер при фокусе или последовательном зачитывании всего контента. Оно не обязательно видно всем пользователям.

Чаще всего достаточно связать подпись с нужным тегом с помощью for. Например, <label>, <caption> или <legend>.

Когда в HTML нельзя задать элементу подпись, на помощь приходит атрибут aria-labelledby.

Подсказки

Секция статьи "Подсказки"

💡 aria-labelledby очень похож на <label>, который можно задавать не только элементам формы.

💡 Если имя элемента должен видеть только скринридер, используйте aria-label.

💡 Следите за поддержкой aria-labelledby в браузерах и у скринридеров, особенно если задаёте атрибут статичному контенту.

На практике

Секция статьи "На практике"

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

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

Полезный случай использования aria-labelledby — лейблы к <section>. Благодаря лейблам пользователи скринридеров могут использовать целые секции как оглавление и быстро перемещаться между ними.

        
          
          <section aria-labelledby="heading">  <h2 id="heading">Котики как вид</h2>  <!-- Текст про котиков --></section>
          <section aria-labelledby="heading">
  <h2 id="heading">Котики как вид</h2>
  <!-- Текст про котиков -->
</section>