When I should use readonly instead of disabled

I would like to know when I should use readonly instead of disabled because disabled in my opinion is much better: it is immediately recognizable which readonly is not.

I specify that the question refers only to usability, I am not interested in the effects of submitting values or event bubbling or anything else from javascript or others languages.

I don't understand why anyone would want a field that is not usable but still looks the same as a perfectly usable one. Wouldn't this behavior lead to confusion for the user using the form?

For example:

<label for="firstName">First Name:</label>
<input name="firstName" type="text" value="Adam" />

<label for="age">Age (disabled):</label>
<input name="age" type="number" value="42" disabled />

<label for="hobbies">Hobbies (readonly):</label>
<textarea name="hobbies" readonly>Baseball</textarea>

Plus, a user with screen reader would have to go through a readonly field but would completely skip a disabled field? What if he would copy a value in the disabled input?

You already know it: the main difference between a read only and a disabled field is that the former stays focusable and is included in tab navigation, while the later is completely skipped in tab navigation.

If a field can't be reached only with the keyboard, it implies that keyboard only users won't be able to select and copy its contents. Screen reader users can still copy the contents of the field by using some workarounds, like copying from virtual buffer, or from speech history, but it's of course much less user-friendly than if the field was naturally focusable. Regular users can still select and copy contents (unless you prevent it totally with specific non-standard CSS), but in any case it's again much less practical.

As a consequence, if the user could have some usefulness in copying the field's contents, then you should make it read only rather than disabled. This will just simplify user's life.

If you are wondering about visual aspect, you can of course adapt it easily with CSS. Visual aspect shouldn't dictate your decision to make read only or disabled.

More generally, you can consider that:

• Disabled means that the content isn't relevant at the moment
• Read only means that the content can't be modified by the user at the moment, but doesn't mean at all that it isn't relevant

Depending on the situation, it may be beneficial to make fields read only to allow going through them, so that the user can know what's expected and/or what kind of data is known or computed, even if the user can't modify them directly. IN other situations, it's just irrelevant and there, disabled is better.

In any case, keep in mind that disabled fields can be skipped completely and that the user may not at all discover their presence. So you should only disable fields which are really irrelevant in the current situation.

Let's take a few examples to show the nuance:

1. A currency converter with two number fields, where user enters an amount in euros, and can see how many dollars it makes
2. A checkbox with a text field allowing to enter a different delivery address
3. A field with your phone number associated to your account, which you can't modify directly because changing it is part of a complicated process (you must add a new one and validate it)

In example #1, the amount in dollars is the result of a computation. The user can't modify it directly, but he/she does it indirectly, and of course it stays relevant! So that second field should be read only rather than disabled.

In example #2, if the checkbox isn't checked, it means that the billing and delivery address are the same. The value is totally irrelevant, so the field is certinly better disabled rather than read only, in order to avoid going in a field which would just repeat twice the same information.

In example #3, you may not be able to change your phone number right now or directly on the current screen, but you still might want to copy it, and it's important to show that it's present in your account so you can't forget about it. So the field is much better read only than disabled.