Bug 196834 – [iOS] Using opacity to indicate disabled form controls is not good for accessibility

• Status: NEW
• Component: Forms

[Simon Fraser (smfr)]

https://mobile.twitter.com/SeanMaisch/status/1116147818983333888
https://codepen.io/seanmaisch/pen/oOWNEY

[Radar WebKit Bug Importer]

<rdar://problem/49830794>

[Brad]

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.

[Sean Maisch]

(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.