Кратко
СкопированоСвойство виджета из WAI-ARIA. Указывает на то, что элемент нельзя изменять, но с ним всё равно можно взаимодействовать.
Так же работает HTML-атрибут readonly.
Пример
Скопировано
<span role="checkbox" aria-labelledby="label" aria-checked="true" aria-readonly="true"></span><span id="label">Не против обработки моих данных</span>
<span role="checkbox" aria-labelledby="label" aria-checked="true" aria-readonly="true"></span>
<span id="label">Не против обработки моих данных</span>
Как пишется
СкопированоДобавьте к тегу атрибут aria с одним из значений:
true— в элемент нельзя ничего ввести или изменить его.false(по умолчанию) — в элемент можно ввести или изменить в нём данные.
aria можно задавать только некоторым тегам и ролям:
<textarea>,<input>с типамиtext,email,tel,urlили для ролиtextbox.<input typeили= "checkbox"> checkbox.<input typeили= "number"> spinbutton.<select>илиcombobox,listbox.<input typeили= "range"> slider.<div>,<span>илиgeneric.radiogroup.grid.gridcell.
Для <input> лучше использовать атрибут readonly, если он поддерживается в нужном типе поля.
Как понять
СкопированоНа элементе с aria пользователи могут сделать фокус, узнать о его роли и состоянии, а также скопировать из него данные.
Такое поведение может быть у элементов формы с неизменяемыми, автоматически подгружаемыми данными, автоматические рассчитанной ценой как в корзине с товарами, а ещё у заголовков сеток.