aria-readonly (property) is used when certain fields on the page are not editable. User can just find information on the readonly field but cannot edit. By setting aria-readonly property to true screen reader user can identify that the field is readonly.
When aria-readonly (property) is used on any element content authors should allow focusing on to the element including its child elements if any. Content authors should also allow users to perform other actions such as copying the content from these elements. Do not treat readonly elements as disabled elements.
aria-readonly will just indicate the users that these elements are readonly. They don’t add any property that restricts users from editing the field. The native element should take care of the inherited properties of the readonly field.
aria-readonly should be used for the fields such as the total cost of products purchased on an online store during checkout, date fields while booking a flight where users should pick days from the calendar widget but cannot directly type in the field etc.
Aria-readonly has two possible values true and false.
Used in roles
| Value | Description |
|---|---|
| True | The user cannot change the value of the element. |
| False (default) | The user can set the value of the element. |
The aria-readonly example can be found here.