{"id":1412,"date":"2024-11-04T15:59:00","date_gmt":"2024-11-04T15:59:00","guid":{"rendered":"https:\/\/html5accessibility.com\/stuff\/?p=1412"},"modified":"2024-11-04T15:59:00","modified_gmt":"2024-11-04T15:59:00","slug":"disabled-and-obscured","status":"publish","type":"post","link":"https:\/\/html5accessibility.com\/stuff\/2024\/11\/04\/disabled-and-obscured\/","title":{"rendered":"disabled and obscured"},"content":{"rendered":"

\"sectionThe WCAG success criterion 1.4.3: Contrast (Minimum)<\/a>\u00a0 requires that:<\/p>\n

The visual presentation of text and images of text has a contrast ratio of at least 4.5:1<\/p><\/blockquote>\n

There are several exceptions to this rule, including:<\/p>\n

Text or images of text that are part of an inactive\u00a0user interface component<\/a><\/p><\/blockquote>\n

Which means in HTML that interactive elements with a disabled<\/code><\/a> attribute are exempt.<\/p>\n

So, for example, the text label for a button<\/code> with a disabled<\/code> attribute is not required to be legible.<\/p>\n

\"display<\/p>\n

<button disabled<\/strong><\/mark>>help I'm a rock<\/button><\/pre>\n
My personal take on this is it sucks<\/strong> 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.<\/p>\n
The other property of disabled<\/code> controls that causes consternation are that they are not included in the focus order. Explicit addition of tabindex=\"0\"<\/code> makes no difference.<\/p>\n
Be that as they may, these properties (poor contrast and not being focusable) were built into the default characteristics of disabled<\/code> controls on the web as rendered in browsers. So it is understandable that they are exempt from the relevent WCAG success criteria.<\/p>\n
Not so fast with the exemption<\/h2>\n
The reason given for the exemption to contrast requirements has traditionally been “well that’s how browsers implement it by defult”<\/p>\n
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:<\/p>\n
Does the SC 1.4.3 Contrast minium exception apply to text outside a disabled control?<\/bdi><\/a><\/p>\n
\n
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.<\/p>\n<\/blockquote>\n
Example code: the update to the informative documentation suggests that the text in the label should also be exempt from color contrast requirements:<\/p>\n
<label for=\"text0\">type=\"text\"<\/mark><\/label>\r\n\r\n<input type=\"text\" id=\"text0\" disabled>\r\n\r\n<\/pre>\n
I don’t agree with this:<\/p>\n