Book a Demo!
CoCalc Logo Icon
StoreFeaturesDocsShareSupportNewsAboutPoliciesSign UpSign In
mohamedkhallouq
GitHub Repository: mohamedkhallouq/content
Path: blob/main/files/en-us/web/accessibility/aria/attributes/aria-readonly/index.md
6581 views
---
title: aria-readonly slug: Web/Accessibility/ARIA/Attributes/aria-readonly spec-urls: https://w3c.github.io/aria/#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.

ARIAMixin API

  • {{domxref("Element.ariaReadOnly")}}

    • : The ariaReadOnly property, part of the {{domxref("Element")}} interface, reflects the value of the aria-readonly attribute.

  • {{domxref("ElementInternals.ariaReadOnly")}}

    • : The ariaReadOnly property, part of the {{domxref("ElementInternals")}} interface, reflects the value of the aria-readonly attribute.

Associated roles

Used in roles:

Inherited into roles:

Specifications

{{Specifications}}

See Also

WAI-ARIA states and properties {{ListSubpagesForSidebar("/en-US/docs/Web/Accessibility/aria/Attributes")}}