aria-readonly attribute indicates that the element is not editable, but is otherwise operable.
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.
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.
- 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
Note: When using semantic HTML form controls, if you set the
readonly attribute, you don't need to include
Note: The value of
<input type="checkbox"> can not be edited making
readonly not relevant. However, when creating checkboxes with
aria-readonly attribute is supported.
|Accessible Rich Internet Applications (WAI-ARIA) |