What is a read-only state in UX design?
A read-only state is the condition of a form field, document, or interface section that can be viewed and its content selected but not edited or modified. Read-only differs from disabled in important ways: disabled fields are often visually de-emphasized to signal unavailability, while read-only fields should still be clearly readable and their content should be accessible. Read-only states appear in form confirmations before submission, in document viewers where editing requires explicit permission, in fields that display system-generated values that users should see but cannot change, and in shared documents where the current user has view but not edit access.
How should read-only states be visually designed?
Read-only form fields should look clearly different from both editable fields and disabled fields. A common approach is to remove the border and background that signal an editable input, presenting the content as plain text with clear label-value pairing. This approach communicates that the content is information to be read rather than a field to be filled. If the read-only state is temporary or contextual, a lock icon or a "Read-only" label can communicate the status explicitly. The critical requirement is that the content must remain readable and not be styled so similarly to a disabled field that users cannot distinguish between content that cannot be edited and content that cannot be accessed at all.
What are the accessibility considerations for read-only states?
Read-only form fields in HTML use the readonly attribute rather than the disabled attribute. Unlike disabled fields, readonly fields are still focusable and their values are still submitted with the form. Screen readers announce readonly fields differently from disabled fields: a readonly field is announced as "read-only" while a disabled field is announced as "dimmed" or "unavailable." This distinction matters for screen reader users who need to understand whether a field's content is relevant to them. Readonly content should never be made inaccessible through methods like removing it from the accessibility tree, since users need to be able to read and copy its value.