disabled and obscured

The WCAG success criterion 1.4.3: Contrast (Minimum)  requires that:

The visual presentation of text and images of text has a contrast ratio of at least 4.5:1

There are several exceptions to this rule, including:

Text or images of text that are part of an inactive user interface component

Which means in HTML that interactive elements with a disabled attribute are exempt.

So, for example, the text label for a button with a disabled attribute is not required to be legible.

<button disabled>help I'm a rock</button>

My personal take on this is it sucks as while the control is disabled for all, only for a subset of users (low vision) the text label for the disabled control is illegible.

The other property of disabled controls that causes consternation are that they are not included in the focus order. Explicit addition of tabindex="0" makes no difference.

Be that as they may, these properties (poor contrast and not being focusable) were built into the default characteristics of disabled controls on the web as rendered in browsers. So it is understandable that they are exempt from the relevent WCAG success criteria.

Not so fast with the exemption

The reason given for the exemption to contrast requirements has traditionally been “well that’s how browsers implement it by defult”

Recently there has been a suggestion to update the related WCAG informative documentation to clarify that any label text for disabled elements are also included in the exemption:

Does the SC 1.4.3 Contrast minium exception apply to text outside a disabled control?

Therefore, an input field along with its label is considered a single user interface component. As a result, the label itself is not required to meet minimum contrast ratio requirements.

Example code: the update to the informative documentation suggests that the text in the label should also be exempt from color contrast requirements:

<label for="text0">type="text"</label>

<input type="text" id="text0" disabled>

I don’t agree with this:

• No browsers (I tested) change the default contrast of text in label elements. So why would we open a door to designers/developers to reduce the default text contrast?

Upon investigation of the way browsers implement the display of controls and their associated text labels and other text UI, the following were observed:

• All browsers (I tested) implement disabled controls as non focusable.
  Note: adding tabindex="0" does not make them focusable
• Some browsers dim the text labels that are children of, or the value of an attibute (e.g. value="submit") for elements that have a disabled attribute.
  • Chrome dims the text leading to poor contrast
  • Firefox does not dim the text, leading to better contrast
  • placeholder text is not dimmed in Chrome leading to better contrast, but is in Firefox leading to poor contrast
  • Safari on iOS does not dim disabled controls text labels, and neither do other browsers on iOS.
• Default input masks on things like type="date" are not dimmed on disabled controls are not dimmed on any browser (I tested), leading to better contrast in Firefox and Chrome.
  
• No browsers (I tested) implement default changes in the visual styling of text in a <label> associated with a disabled element.

Disabled HTML controls: Try it for yourself:

See the Pen
html disabled controls by steve faulkner (@stevef)
on CodePen.

Bring on WCAG III

The current normative exceptions in WCAG 2.2 cannot be removed, but there is no way we should be extending the informative documentation to include UI that has up until now not been considered as exempt.

Zappa – Help I’m a Rock

Help I'm a rock, help I'm a rock, help I'm a rock!
Ahahahahahahaaa
Help I'm a rock, help I'm a rock, help I'm a rock!
Somebody, please, please!
Help I'm a rock, help I'm a rock...
Wow man, it's a drag being a rock
Help I'm a rock...
I wish I was anything but a rock
Heck, I'd even like to be a policeman
Hey, you know what, you know maybe if I practised, you know
Maybe if I passed my driving test
I could get a gig drivin' that bus and pick some freaks up
In front of Ben Franks, right!
Help I'm a cop, help I'm a cop, help I'm a cop!
, help I'm a cop, help I'm a cop!
It's a drag being a cop, I think I'd rather be the mayor
Always wondered what I was gonna be when I grew up, you know
Always wondered whether or not, whether or not I could make it,
You know, in society, because,
You know, it's a drag when you're rejected
So I tore the cover off a book of matches and I sent in
And I got this letter back that said, UHU, AHA
It can't happen here
It can't happen here
I'm telling you, my dear
That it can't happen here
Because I been checkin' it out, baby
I checked it out a couple a times, hmmmmmmmm
And I'm telling you
It can't happen here
Oh darling, it's important that you believe me
That it can't happen here
Who could imagine that they would freak out somewhere in Kansas...
Kansas Kansas tototototodo
Kansas Kansas tototototodo
Kansas Kansas
Who could imagine that they would freak out in Minnesota...
Mimimimimimimi Minnesota, Minnesota, Minnesota
Who could imagine...
Who could imagine
That they would freak out in Washington, D.C.
D.C. D.C. D.C. D.C. D.C.
It can't happen here
Ba ba ba ba ba ba ba ba
It can't happen here
It can't happen here
Everybody's safe and it can't happen here
No freaks for us
It can't happen here
Everybody's clean and it can't happen here
No, no, it won't happen here
I'm telling you it can't
It won't happen here
Plastic folks, you know
It won't happen here
You're safe, mama
You're safe, baby
You just cook a TV dinner
And you make it
No no no no
Oh, we're gonna get a TV dinner and cook it up
Go get a TV dinner and cook it up
Cook it up
Oh, and it won't happen here
(No no no no no no no no no no no
Man you guys are really safe
Everything's cool).
Who could imagine
Who could imagine
That they would freak out in the suburbs!
I remember (tu-tu)
I remember (tu-tu)
I remember (tu-tu)
They had a swimming pool
I remember (tu-tu)
I remember (tu-tu)
They had a swimming pool
I remember (tu-tu)
I remember (tu-tu)
They had a swimming pool.
And they thought it couldn't happen here
They knew it couldn't happen here
They were so sure it couldn't happen here
But...
Suzie...
Yes yes yes--I've always felt that
Yes I agree man, it really makes it...yeah...
It's a real THING, man
And it really makes it
Suzie, you just got to town,
And we've been, we've been very interested
In your development.
Forget it!
Hmmmmmmmmm