Accessibility of Disabled and Read-only Form Fields

This information is intended to create accessibility constraints and does not attempt to suggest additional user experiences.

	Read-only	Disabled
Seen by screen reader	x
Receives focus	x
Browser defaults to grayed-out color		x
Requires accessible color contrast	x

Use disabled when:

• The information in the field is not meaningful to the users but must be shown anyway, mainly for structure
• Fields are hidden visibly and will be exposed through a user action or by "progressive disclosure"
• Read-only will not work on the element

Use read-only when:

• The information in the field is meaningful to the user but it must not be changed

Q: Won’t my design suffer from having to comply with contrast requirements if I use read-only fields?

A: Not necessarily:

In the example below, the read-only input box is styled to have a border and font color of #5D5D5D which complies with AA color contrast requirements (4.5:1) and is similar to the standard, default disabled field. 

Default Input
Disabled
Read-only

	<label for="1">Default Input</label><input type="text" id="1" value="text field"></br>
	<label for="2">Disabled</label><input type="text" id="2" value="text field" disabled></br>
	<label for="3">Read-only</label><input type="text" id="3" value="text field" readonly="readonly" style="color:#5D5D5D">

view raw disabled-vs-read-only hosted with ❤ by GitHub

Fiddle with the code

Q: Read-only is not working on my form element. Is this a bug?

A: No, unfortunately there is a limit to the read-only attribute:

    

• Read-only WILL work for
  • Type: text, search, url, tel, email, number, password, date/time input types, and <textarea>
• Read-only WILL NOT work for
  • Type: hidden, range, color, checkbox, radio, file, button, submit and image

References:

W3C Recommendation 17.12.2 Read-only Controls. http://www.w3.org/TR/html401/interact/forms.html#h-17.12.2

Q: Does a disabled label have to meet color contrast levels?

A: No, there is no accessibility requirement for disabled labels to meet color contrast requirements allowing for the lightening of the label to signify the disabled state. However, both read-only labels and fields must meet color contrast requirements