Использование атрибута aria-label

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

Этот атрибут может быть использован для любого стандартного HTML элемента; не ограничивается элементами с ARIA role.

Значение

строка

Возможные эффекты на клиентские приложения и вспомогательные технологии

Edit section

Примечание: Мнения могут отличаться от того, как вспомогательные технологии должны справляться с этой техникой. Информация, представленная выше, является одним из таких мнений и поэтому не является нормативной.

Примеры

Пример 1: Множественные лейблы

В примере ниже, кнопка стилизована под типичную кнопку "закрыть" с X посередине. Поскольку нет ничего обозначающего значение того, что кнопка закрывает диалог, то aria-label атрибут используется чтобы обеспечить метку для любой вспомогающей технологии.

<button aria-label="Close" onclick="myDialog.close()">X</button>

Рабочие примеры:

Примечания

  • Чаще всего API доступности для лейбла привязывается к свойству accessible name.

  • Атрибуты, включая aria-label, игнорируются большинством автоматических сервисов перевода.

Использование ARIA ролями

Все элементы базовой разметки

Связанные ARIA техники

Совместимость

Будет определено позднее: Добавить информацию о поддержке для общих комбинаций продуктов UA и AT

Дополнительные ресурсы