Wcag: Do user interface control labels count as part of the control for the purposes of Contrast Requirement exemptions for disabled controls?

Created on 18 Dec 2018  Â·  5Comments  Â·  Source: w3c/wcag

We’re implementing a design system at my job, and we’re unsure if dimming the <label> associated with a disabled <input> is a violation or not:

<input id="w" type="checkbox"> <label for="w">Checkbox label</label>
input:disabled,
input:disabled + label {
  opacity: 0.4; /* Or color:gray or whatever */
}

I looked at existing UI guidelines from Apple and Microsoft, but they don’t seem to mention this case.

Our team is unsure if the WCAG Guidelines for SC 1.4.3 are for or against, depending on if a label is considered “part of an inactive user interface component” or not.

Most helpful comment

The following is a proposed response that has not yet been discussed or accepted:

Thank you for submitting this question. It is an important topic.
The exemption for SC 1.4.3 states:
"Text or images of text that are part of an inactive user interface component ... have no contrast requirement."

The definition of component states:
"a part of the content that is perceived by users as a single control for a distinct function Note 1: Multiple user interface components may be implemented as a single programmatic element. Components here is not tied to programming techniques, but rather to what the user perceives as separate controls."

We understand the user need for inactive controls and related text to have sufficient contrast -- this challenge is complicated because sufficient contrast can be confusing for other user groups who might mistake the component for being active. We have previously identified this as an area to consider when working on newer versions of accessibility standards. People have proposed ideas such as an icon or other visual indicator that would be ubiquitous to the current dimming of a control to indicate it's inactive state.

Based on the current exemption for "inactive" content in SC 1.4.3 the label text is part of the user interface component and thus is not required to have a contrast minimum.

All 5 comments

This issues was also raised on slack, we might consider writing a technique / specifically mention in the Understanding doc.

I was the person who asked on Slack. It's publicly archived, my question can be found at https://gitter.im/w3c/a11ySlackers?at=5c3f7f7c32a8370605e0c8b4

I think it's good to be able to read what an input is for, even if it's not currently operable. So I'm in favour of saying labels aren't exempt.

Disabled buttons are an interesting case, because the disabled control and the text label are the _same element_. I'm not sure what to think about that one.

The following is a proposed response that has not yet been discussed or accepted:

Thank you for submitting this question. It is an important topic.
The exemption for SC 1.4.3 states:
"Text or images of text that are part of an inactive user interface component ... have no contrast requirement."

The definition of component states:
"a part of the content that is perceived by users as a single control for a distinct function Note 1: Multiple user interface components may be implemented as a single programmatic element. Components here is not tied to programming techniques, but rather to what the user perceives as separate controls."

We understand the user need for inactive controls and related text to have sufficient contrast -- this challenge is complicated because sufficient contrast can be confusing for other user groups who might mistake the component for being active. We have previously identified this as an area to consider when working on newer versions of accessibility standards. People have proposed ideas such as an icon or other visual indicator that would be ubiquitous to the current dimming of a control to indicate it's inactive state.

Based on the current exemption for "inactive" content in SC 1.4.3 the label text is part of the user interface component and thus is not required to have a contrast minimum.

The proposed response was agreed by the working group, so I'm closing this issue.

Thank you for your time and consideration!

Was this page helpful?
0 / 5 - 0 ratings