Bug 196834 - [iOS] Using opacity to indicate disabled form controls is not good for accessibility
Summary: [iOS] Using opacity to indicate disabled form controls is not good for access...
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Forms (show other bugs)
Version: WebKit Nightly Build
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2019-04-11 15:35 PDT by Simon Fraser (smfr)
Modified: 2019-04-12 11:03 PDT (History)
9 users (show)

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Comment 1 Radar WebKit Bug Importer 2019-04-11 15:36:24 PDT
<rdar://problem/49830794>
Comment 2 Brad 2019-04-12 08:12:04 PDT
Sorry, but I disagree. The purpose of having a disabled control is to show that something is there, but it can’t be used. An alternative is to have opacity:0, would be more reasonable than opacity:1. Or to have the text so blurred that no perfect-vision people can read it either. But doing that doesn’t make it better for anyone; it would be more symbolic than anything. Making a disabled field look like a regular field would be a disservice to everyone. It is **supposed** to be less readable, so that the enabled controls are more readable in comparison.
Comment 3 Sean Maisch 2019-04-12 09:24:45 PDT
(In reply to Brad from comment #2)
> Sorry, but I disagree. The purpose of having a disabled control is to show
> that something is there, but it can’t be used. An alternative is to have
> opacity:0, would be more reasonable than opacity:1. Or to have the text so
> blurred that no perfect-vision people can read it either. But doing that
> doesn’t make it better for anyone; it would be more symbolic than anything.
> Making a disabled field look like a regular field would be a disservice to
> everyone. It is **supposed** to be less readable, so that the enabled
> controls are more readable in comparison.

Thanks for your reply Brad. I agree it is important for accessibility to visually indicate the input is disabled, but I disagree that this approach is an acceptable solution.

I believe there are more effective solutions than rendering the disabled input lower in transparency. Let me show you a button we are using that was causing visual rendering issues on Mobile Safari due to a disabled state. The designer directed that a very specific shadow needed to be added to input submit buttons, which was achieved by rendering a pseudo-element underneath the button. This button is occasionally is rendered in a disabled state.

https://codepen.io/seanmaisch/pen/XQarXR

As you can see, the disabled input has the pseudo-element shadow bleeding through on Mobile Safari.

This also begs the question, why was the choice made to use transparency on the whole element on Mobile Safari, but not desktop Safari? Clearly there is a disagreement on the correct approach internally.