aria-readonly

ARIA-атрибут для неизменяемых интерактивных элементов, с которыми можно как-то взаимодействовать.

Время чтения: меньше 5 мин

Это незавершённая статья. Вы можете помочь её закончить! Почитайте о том, как контрибьютить в Доку.

Кратко

Секция статьи "Кратко"

Свойство виджета из 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-readonly с одним из значений:

  • true — в элемент нельзя ничего ввести или изменить его.
  • false (по умолчанию) — в элемент можно ввести или изменить в нём данные.

aria-readonly можно задавать только некоторым тегам и ролям:

Для <input> лучше использовать атрибут readonly, если он поддерживается в нужном типе поля.

Как понять

Секция статьи "Как понять"

На элементе с aria-readonly пользователи могут сделать фокус, узнать о его роли и состоянии, а также скопировать из него данные.

Такое поведение может быть у элементов формы с неизменяемыми, автоматически подгружаемыми данными, автоматические рассчитанной ценой как в корзине с товарами, а ещё у заголовков сеток.