2

To my knowledge, read-only fields are used primarily by keyboard-only users so they can focus on the input and copy/paste containing value. But what about fields with no value? Should those be treated as disabled since they don't carry any information to the user and from that point of view, it's same like having a disabled button.

Edit: Those fields are metadata from various sources and if they are empty, most likely it's not even important what they represent because it doesn't add any value to the context, if they can't be updated.

enter image description here

Improve this question
2
  • Why would you have an empty read-only field? Please elaborate so we can maybe help you. Commented Jul 1, 2021 at 7:42
  • Because those fields are metadata from various sources and sometimes there just aren't any info for the specific field. And depending if you have some permission you are able to edit them or just view the info. And this fields aren't visible only during some form submission but rather all the time. Commented Jul 2, 2021 at 8:53

1 Answer 1

Reset to default
1

Short Answer

No they should be left as readonly.

Long Answer

You need to think about when to use each one:

readonly

readonly fields are to display information back to people.

If that field happens to be blank it should still be returned as people can see that the field exists and contains no information.

This is the same for people who use a screen reader, they get to the field, see it is readonly, get the field announced and that it is currently empty. All useful information.

This information will automatically be read out when the form is being read back as well which is useful.

disabled

disabled, however, implies that the field cannot be modified at this moment.

Some screen readers do not read these out by default unless you specifically focus the field with JS etc.

VoiceOver will skip disabled fields - this is not useful if you need the information to be accessible (for example if this is confirmation of previously entered information, skipping an entire field could cause confusion and cause people to go back to check they hadn't missed something on the form).

So which should you use for an empty field?

readonly if this is relaying information back to a user. They can still focus the field, hear the field label and that it is empty.

disabled if this control currently serves no purpose on the page (and is not likely to!) as it will be skipped entirely.

disabled should be used with caution due to the point I mentioned earlier that some screen readers (VoiceOver) will skip disabled fields..

Generally the rule is - does the user need to know that the field was left / is blank - use a readonly. Is this field not going to be used / not relevant while inputting information, use disabled.

If in doubt use readonly, it will cause less harm than an erroneous disabled attribute.

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

Thanks for the response @graham, I updated my question with a bit more context. I am familiar with readonly and disabled states. Since this is not simple page with standard process where you have a form in input mode and then at later stage you just get the preview of what you entered, it's a bit more harder to reason about. It probably comes down to whether this info is important to the user or not. So for example, if this was some checkout process and in the final preview there were empty fields, I would definitely leave them as readonly so user can check what was left unfilled.
If they are actually <input> elements within the HTML then readonly is 100% the way to go, as I said the key behaviour is that disabled fields will not get read by some screen readers so your form above would essentially not exist if you used disabled on them. It is useful to know that the Metadata is not present I presume? lack of information is still information that is useful (if you know what I mean). Your alternative is to simply remove those fields for everybody if they are not needed. The main aim of accessibility is to provide as similar an experience as possible to everyone.
Yes, those fields are <input> elements, and metadata is not present for this specific person. The main aim of accessibility is to provide as similar an experience as possible to everyone With this in mind, I would say, it's better approach to remove those fields completely, as you suggested. Because if they are blank (in this specific use case), they don't provide any value, and sighted users would just skip them anyway. Will mark your answer as the correct one, as in general, it's the most accurate one, although it really depends on the context.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.