Problem/Motivation
"Unpublished" style of rendered entities is not accessible (pink too hard to notice for some) (and looks bad)
blocks
#2290101: UI telling you a field is shared across languages is way too subtle →
Bug because there is an accessibility violation. Even for sighted people with good vision, the light pink background is difficult to see. For someone with low vision, there is no distinction. For someone using a mobile device outside, they won't be able to distinguish between published and unpublished content. For a blind user, there is no indication that a node is unpublished.
Major because this is a basic part of Drupal Core's workflow and it isn't accessible. This doesn't meet WCAG 2.0 AA, but also presents usability challenges.
Proposed resolution
Add a marker to nodes & comments to ensure that the published/unpublished state is semantically defined.
Enhance the visual representation of the unpublished content so that it is more distinct.
Remaining tasks
-
Update the patch so the marker is properly output for both nodes and comments that are unpublished in the Bartik, Stark, and Claro themes following the approach taken in patch #275 (
https://www.drupal.org/project/drupal/issues/867830#comment-13839909
🐛
"Unpublished" style of rendered entities is not accessible (and looks bad)
Needs work
)
Currently, the markers are being output only for unpublished nodes in Bartik articles and comments in Stark. The marker should be output for all unpublished nodes and comments on all frontend themes. That is, all the no's in the table below should become all yes'.
Output should include hidden text to give screen reader users context to for the status marker:
<span class="marker marker--warning">
<span class="visually-hidden">This node is</span>
Unpublished
</span>
Note: Current output in the stark theme with patch #275 uses the <mark> element. This should be changed to the spans with visually hidden context above. The <mark> element was moved to
https://www.drupal.org/project/drupal/issues/1311372
📌
Use element for 'mark' theme hook
Needs work
.
- Update patch to get tests passing
- To be discussed: The colors for marker warnings used in the latest patch (#275) do not pass WCAG guidelines for color contrast. (Success marker has ratio of 2.53:1 and warning marker has ratio of 2.46:1. Ratio should be at least 4.5:1.) Maybe this is part of a design already approved elsewhere and is out of scope of this issue? Otherwise, if these colors are being newly introduced with this issue, they should be revised for accessibility.
User interface changes
CSS changes.
before
This example has an unpublished node, with an unpublished comment.
after
Unpublished comments:
Unpublished nodes:
Screenshot needed once it's working in patch.
API changes
None.
Original report by
@joshk →
I really like this change:
#394736: Unpublished node's pink background unclear →
As the pink background is just too hard too see. This is the same issue as for unpublished comments as well!
Why this change should be committed during RC
A color based signifier for content state is not accessible or intuitive for any users.