aria-labelledby

Кога да се използва

Когато видим текст на страницата вече описва елемента — заглавие над диалог, заглавие на колона над клетка, параграф, въвеждащ дадена област. aria-labelledby сочи към този текст, за да го обяви екранният четец като достъпното наименование на елемента. Потребителят чува точно това, което чете зрящият потребител.

Нативният HTML еквивалент е <label for="…"> за формуляри. aria-labelledby разширява същата идея към всяка роля, поддържаща наименование.

Как работи

Стойността е разделен с интервали списък от идентификатори на елементи. Помощната технология събира текстовото съдържание на всеки посочен елемент, по ред, обединява ги с интервали и използва резултата като достъпно наименование. Препратките към скрити елементи (display: none, hidden) също допринасят с текста си — елементът трябва само да присъства в DOM.

aria-labelledby има приоритет пред aria-label, а aria-label — пред видимия вътрешен текст. Ако сочите към видимото заглавие, не е нужно да добавяте и aria-label.

За да остане връзката валидна: посочените идентификатори трябва да съществуват на страницата, да са уникални и текстът в тях да остава смислен. При повторно изобразяване на панел с раздели с повторно използвани идентификатори проверете дали новото съдържание все още описва наименувания елемент.

Чести грешки

• Препратка към несъществуващ идентификатор (правописна грешка, изтрит елемент, демонтиран компонент). Връзката тихо се проваля и елементът остава без наименование.
• Повторно използване на един и същ идентификатор два пъти на страницата — отчита се само първото съответствие.
• Препратка към елемент с празен текст или само с интервали.
• Конкатенация в грешен ред: aria-labelledby="surname firstname" дава „Smith John” вместо „John Smith”.
• Препратка към обикновен <div>, съдържащ дълъг параграф — целият параграф се превръща в наименование. Наименованията трябва да са кратки; дългият контекст се поставя в aria-describedby.
• Забравяне да се актуализира посоченият текст при локализация — наименованията излизат от синхрон с видимия потребителски интерфейс.

Пример

<h2 id="billing-heading">Billing address</h2>
<div role="group" aria-labelledby="billing-heading">
  <label>
    Street
    <input type="text" autocomplete="street-address">
  </label>
  <!-- … -->
</div>

<!-- Two IDs concatenated for a "first + last name" pattern -->
<span id="first">First name</span>
<span id="last">(required)</span>
<input type="text" aria-labelledby="first last">