aria-labelledby

Свойство связи из 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 в браузерах и у скринридеров, особенно если задаёте атрибут статичному контенту.

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

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