Alongside improving disabled state colors towards addressing accessibility issues, a further improvement might be using cursor: not-allowed for disabled UI items like menu options or buttons.
Color should –if possible– not be the only way of conveying information.
Browser compatibility is given. Bootstrap does it since v. 3.2.
This task is meant for having a general discussion, if we find agreement on the usefulness and as reference for linked blocking tasks in various products.
| Status | Subtype | Assigned | Task | ||
|---|---|---|---|---|---|
| Declined | Volker_E | T121960 Use `not-allowed` cursor for disabled elements within WMF products | |||
| Declined | Volker_E | T123183 Use `not-allowed` cursor for disabled elements in OOjs UI |
Complementary information: Another usage of this approach are disabled UI elements in Firefox Preferences (at least v43).
One thing to take into consideration is, that on Windows (at least up to Windows 7) the not-allowed cursor is a full size disallow icon. Unlike Mac OS X, where it's a normal cursor accompanied with a disallow icon. Compare MDN article.
To my knowledge, the full disallow icon is never shown in a disabled menu-item or button context on Windows GUI. Firefox does use it at the Preferences dialogs on buttons.
While the semantics of this seem sensible at first glance, I'm not sure this common practice anywhere. I think not-allowed is only ever used for drag and drop interactions.
...Indeed the rendering of not-allowed on my system is the drag and drop "grab hand" - with a struck circle next to it.
@Esanders To complete the picture, what is your system? And yes, those cursors are predominantly used for drag and drop interactions in operating system GUI, but for Firefox Preferences across platforms (your's as well?) and in Bootstrap. If one finds another prominent example, here's the place to collect them.
Chrome+Ubuntu. I see its used by bootstrap but maybe we should wait for it to become more common rather than trying to be trendsetters.
The Windows 7 'not-allowed' cursor is super scary looking.
I'm with @Esanders, I'm not convinced we should be doing this even if it makes sense semantically. The browser/OS behavior is too inconsistent.
The cursor feels like grabbing too much attention. To indicate disabled items it seems more appropriate to reduce their prominence level, rather than increasing it. I'd explore approaches that involve reducing the prominence of disabled elements (e.g., on hover as suggested at T89271#1930266)
Following @Pginer-WMF argumentation in not giving disabled elements more focus.
Furthermore, Mozilla devs have decided to remove not-allowed cursor from their settings pages in upcoming Firefox 45. Given the various opposing arguments and implications, it's better to close this issue.
@violetto would you please update M101 accordingly and exchange the not-allowed cursor with a default one?