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

Перейти к:
  1. Примеры

Атрибут  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 техники

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

TBD: Add support information for common UA and AT product combinations

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

Метки документа и участники

Метки: 
Внесли вклад в эту страницу: andreyshedko, kesha.ohrimenko
Обновлялась последний раз: andreyshedko,