0

I'm evaluating some code for a client and have come across spots in their HTML where they are rendering input fields that have the readonly attribute and a static value. The data in these fields will never be editable on the page in question, so my thought is that they should not be input fields in the first place because it seems semantically incorrect, but more importantly, could cause issues for people that use screen readers. I know that with an input, even a read only one, you get the ability for the element to get the focus, but that usability is not relevant here.

I have found this question that asks the same thing, but it was from 2013, only one person responded, and it didn't seem like an authoritative answer.

Are there definitive standards or best-practices for how to render data that may have originally come from user input, but is now being rendered read-only that relate to accessibility?

TylerH
  • 20,799
  • 66
  • 75
  • 101
Scott Marcus
  • 64,069
  • 6
  • 49
  • 71

2 Answers2

3

There's nothing wrong with using disabled inputs on a text or textarea type of input. It's part of the HTML5 specification, and most major browser/screen-reader combinations will handle it reasonably well.

There are a few reasons why one would want to use a read-only input instead of static text:

  • Read-only inputs can receive keyboard focus, static text does not by default.
  • Read-only inputs are included in the tab order of a form, static text will be skipped.
  • Read-only inputs will submit data as part of the form, static text will not.

Although, it's an older page, this article has some screen-reader tests using the readonly attribute, and the results were generally favorable with some small caveats. I would suspect that support may have improved since then.

Additionally, the caniuse website shows pretty extensive browser support for this element.

I would not hesitate to use this attribute, if it were appropriate to the use-case.

Josh
  • 3,872
  • 1
  • 12
  • 13
  • I appreciate your answer. I am aware of what constitutes `valid` HTML and am aware of the functional differences between input elements vs. non-input elements. My question is specifically about the accessibility standards or best-practices relating to the use of a read-only input on pages where the data is not ever going to change. – Scott Marcus Nov 04 '19 at 19:25
  • There's nothing in WCAG specifically about the `readonly` attribute. The biggest difference is that that static text won't be read aloud when a user is tabbing through a form. – Josh Nov 04 '19 at 21:46
1

The answer here is it depends on your form.

When an input is encountered a screen reader will enter forms mode.

In forms mode the screen reader is designed to skip between fields in the form.

This means that if you have any plain text scattered between the inputs it will be skipped.

That is obviously an accessibility issue.

Assuming your form is properly structured there is no issue with displaying the information in a readonly input.

In fact for forms the user has filled out previously it may be beneficial to leave the form as is, because the familiar layout will indicate this is information they entered previously and give context to your form and the information within it.

If this was not user input then I would recommend changing it away from a form as it adds unnecessary complexity to the page.

GrahamTheDev
  • 22,724
  • 2
  • 32
  • 64