aria-label и aria-labelledby

Когда нативной подписи недостаточно, у вас есть два инструмента ARIA: aria-label для встроенной строки и aria-labelledby для ссылки на существующий текст.

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

Используйте aria-labelledby, когда видимый текст на странице может служить именем. Его значение — это ID данного элемента, а не строка.

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

Укажите в aria-labelledby несколько ID, разделённых пробелами, и браузер объединит их текст в одно имя в заданном порядке.

Если заданы оба атрибута, aria-labelledby имеет приоритет. Браузер полностью игнорирует aria-label, поэтому не рассчитывайте на их объединение.

С помощью aria-labelledby элемент может ссылаться на собственный ID. Это удобно, чтобы назвать область текстом её видимого заголовка.

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

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

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

Определите, где находится имя. Если оно уже отображается на экране, используйте aria-labelledby; если оно существует только для вспомогательной технологии, используйте aria-label.

Вы узнали, что aria-labelledby используют для существующего видимого текста, а aria-label — для невидимых встроенных имён, не ожидая их объединения. 🎯