[A11Y] [UX] The disabled text color in table UIs is not accessible

[jenlampton]

Description of the bug

There are several interfaces in backdrop core (especially in tables with even/odd striping) where we indicate that an item is disabled by changing the text color from black-on-gray when it's enabled to to gray-on-gray when it's not. When the text is gray-on-gray it cannot be read by all people. Below are a few examples of these interfaces.

Views UI

Layouts UI

Steps To Reproduce

To reproduce the behavior:

1. Visit a UI where something can be disabled
2. Disable the thing
3. Check the text color of the disabled item with Inspector in Firefox
   Click on the color circle representing the color
   Check the contrast (it should be at least 4.5)

Actual behavior

Contrast too low

Expected behavior

Contrast at least 4.5

Possible solutions

• Move all disabled rows to the bottom of the table, under a Disabled heading
• Add the word Disabled somewhere into each disabled row
• Change the disabled text color to #717171
• Change the background color for disabled rows

[olafgrabienski]

That's really an interesting issue! When I change the text color of tr.disabled td from #999999 (contrast of 2.66 in light gray rows) to #717171, it's readable (contrast: 4.56). But containing quite dark text, such a row doesn't seem to indicate a disabled status anymore, at least not in a very clear way.

I'm not an expert, so only guessing: With a simple color fix people with difficulties to see contrast differences would recognize the content of a disabled row (good) but they wouldn't see the difference between an enabled and a disabled row (bad).

No idea if there are newer approaches to indicate 'disabled' things, maybe we can ask accessibility experts.

[jenlampton]

It might be worth looking into how this problem was solved in Drupal 8, since they also included views. One thing I can think of would be to add the word Disabled somewhere, so that we're not using color as the only differentiator.

In some places (like views), we could put all the disabled items at the bottom of the page, below a Disabled heading. But in places where the order is important (draggable tables, text filters, layout UI) we'll need to find a way to differentiate without moving the items.

I'd also like to advocate for adopting a system-wide pattern that contrib can use in their own UIs, so that they don't have to set their own disabled colors. See backdrop-contrib/feeds#68 for reference.

[albanycomputers]

Just had a very little play with CSS and would something like this be of any use...

/admin/structure/views/list
.disabled .views-ui-view-name::after {
color: red;
content: "(Item Disabled)";
margin-left: 5px;
font-size: 0.8em;
}

/admin/structure/layouts
.disabled .layout-title::after {
color: red;
content: "(Item Disabled)";
margin-left: 5px;
font-size: 0.8em;
}

Again, only had a quick play... and only looked at those two instances.

[albanycomputers]

Also, should the title have "[UX]" - User Experience?

[olafgrabienski]

Just had a very little play with CSS ...

Could be a start! Can you also provide a screenshot?

[jenlampton]

It looks like css-generated content isn't always accessable in Internet Explorer. If we are going to add text to indicate that something is disabled, it should be in the DOM (and not added via CSS)

It looks like we have 4 possible solutions:

Move all disabled rows to the bottom of the table, under a Disabled heading

This won't work where the item order is important, but could be used everywhere else.

Add the word Disabled somewhere into each disabled row

The only downside to this is that it may clutter the page with lots of repeated Disabled text, it might make sense to use this only where the item order is important and we can't group disabled items together safely.

Change the disabled text color to #717171

Though the text becomes readable, it won't look very different from enabled items.

Change the background color for disabled rows

We could standardize on a background color for disabled rows (yellow? blue?) but by only using color to differentiate enabled and disabled items, we still face accessibility issues for those who are color deficient.

I'm going to add the design and needs more feedback labels and remove good first issue