Кратко
СкопированоСостояние виджета из WAI-ARIA. Указывает на то, что элемент нельзя изменять и взаимодействовать с ним как-то ещё.
Так же работает HTML-атрибут disabled
.
Пример
Скопировано<div role="button" aria-disabled="true" tabindex="-1">Редактировать</div>
<div role="button" aria-disabled="true" tabindex="-1">Редактировать</div>
Как пишется
СкопированоДобавьте к тегу атрибут aria
с одним из значений:
true
— элемент неактивен.false
(по умолчанию) — элемент активен, с ним можно взаимодействовать.
aria
можно задавать только некоторым тегам и ролям:
<button>
,<summary>
,<input>
c типамиbutton
,image
,reset
,submit
или для ролиbutton
.<a>
илиlink
.<details>
,<fieldset>
,<optgroup>
илиgroup
.<hr>
илиseparator
.<div>
,<span>
илиgeneric
.tab
.scrollbar
.application
.gridcell
.menuitem
.
Для HTML-тегов лучше использовать атрибут disabled
вместо aria
там, где он поддерживается.
Если задаёте aria
родительскому элементу, его дети становятся тоже неактивными.
Чтобы элемент с aria
был по-настоящему неактивен, нужны CSS и JavaScript.
Как понять
СкопированоНа элементе с aria
пользователи не могут сделать фокус, узнать о его роли и состоянии, а также скопировать из него данные.
Такое поведение может быть у временно неактивных элементов. К примеру, когда в форме заполнены не все поля или какое-то действие в процессе выполнения.