aria-readonly

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 readonly attribute, you don't need to include aria-readonly="true".

Note: The value of <input type="checkbox"> can not be edited making readonly not relevant. However, when creating checkboxes with role="checkbox" the aria-readonly attribute is supported.

Values

true

The element is readonly.

false (default)

The element is not readonly.

Associated interfaces

Element.ariaReadOnly

The ariaReadOnly property, part of the Element interface, reflects the value of the aria-readonly attribute.

ElementInternals.ariaReadOnly

The ariaReadOnly property, part of the ElementInternals interface, reflects the value of the aria-readonly attribute.

Associated roles

Used in roles:

Inherited into roles:

Specifications

Specification
Accessible Rich Internet Applications (WAI-ARIA)
# aria-readonly

See also