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.

Seen by screen reader

Receives focus

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.

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