Wednesday, December 2, 2015

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. 






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


No comments:

Post a Comment