This information is intended to create accessibility constraints and does not attempt to suggest additional user experiences.
Seen by screen reader
Browser defaults to grayed-out color
Requires accessible color contrast
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.
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
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