Path: blob/main/files/en-us/web/accessibility/aria/attributes/aria-readonly/index.md
6581 views
------The aria-readonly attribute indicates that the element is not editable, but is otherwise operable.
Description
When you want to indicate that an interactive element works but is not editable, set aria-readonly="true". This indicates to the user that an interactive element that would normally be focusable and copyable has been placed in a read-only (not disabled) state.
When aria-readonly is set to true, it means the user can read but not set the value of the widget. Read-only elements are still relevant to the user, so you should not prevent the user from navigating to the element or its focusable descendants or copying the value.
Examples include:
Form elements which should not be changed.
Row and column headers in a spreadsheet.
The total value in a shopping cart.
If the non-changeable value shouldn't be able to receive focus, use aria-disabled instead.
Note: When using semantic HTML form controls, if you set the
readonlyattribute, you don't need to includearia-readonly="true".
Note: The value of
<input type="checkbox">can not be edited makingreadonlynot relevant. However, when creating checkboxes withrole="checkbox"thearia-readonlyattribute is supported.
Values
true: The element is readonly.
false(default): The element is not readonly.
ARIAMixin API
{{domxref("Element.ariaReadOnly")}}
: The
ariaReadOnlyproperty, part of the {{domxref("Element")}} interface, reflects the value of thearia-readonlyattribute.
{{domxref("ElementInternals.ariaReadOnly")}}
: The
ariaReadOnlyproperty, part of the {{domxref("ElementInternals")}} interface, reflects the value of thearia-readonlyattribute.
Associated roles
Used in roles:
Inherited into roles:
Specifications
{{Specifications}}