Improve the visual difference between revisions - not only color based

[birgire]

The visual difference between revisions is only based on the background colors light green and light red.

It might not be visually suited for everyone to depend on only colors. Devices and environment can also be a factor.

I think adding some text aids could help here: wp-admin/revision.php?revision=123.

Maybe From/To headers and/or plus(+)/minus(-) in each line.

We have a From/To when the "Compare any two revisions" is checked, but it might not be obvious what column is From and what column is To.

I'm not sure what the future is for the wp-admin/revision.php screen is with Gutenberg, but I decided to post this anyway.

[birgire]

The Restore This Revision button in revision-before.jpg​ and revision-compare-before.jpg​ are not in the most eye-pleasing positions. Maybe there's a ticket for that?

The revision-compare-after.jpg​ is a sketch where it's more clear what is the From and what is To. I understand that this kind of approach would need an adjustment for smaller mobile devices. The position of the Restore This Revision button here might also need adjustments. Here we also have an example of plus (+) and minus (-) text aids.

[afercia]

Discussed during today's a11y but-scrub, seems a sensible and simple improvement. /cc @adamsilverstein

[adamsilverstein]

Hi @birgire - thanks for the ticket. I completely agree the UI can be improved here. Note however I think that the two columns represent what was added and what was removed in a specific revision so the column titles should maybe be “added” and “removed”?

[audrasjb]

43532.diff: improves difference between twho revisions

[audrasjb]

43532.diff: improves difference between twho revisions

[audrasjb]

Hello and thanks for the ticket @birgire I think this is really relevant.

As a first step, 43532.diff improves the visual difference between two revisions and avoid "color only" distinction.

I also added screen-reader-text in td cells to add information about the status of each cell:

• Deleted line
• Added line
• Unchanged line

Cheers,
Jb

[birgire]

@adamsilverstein that's a good suggestion having the column titles “added” and “removed”, they explain it better than just "from" and "to".

@audrasjb thanks for the patch, I just tested it. I also like that with it one can copy the diff text without the pluses or minuses (just personal preference). But should the pluses and minuses also be read by screen readers? This comment by @afercia here, comes to mind regarding CSS generated content.

[audrasjb]

Hello @birgire , thanks for your feedback.

That's why I added some screen reader texts :) On the top of each cell, screen reader users will read "Added", "Deleted" or "Unchanged" label. Indeed, I added this because CSS generated content are not readable by AT users.

[birgire]

ps: sorry I didn't explain my self better here ;-) What I had in mind was that in addition to the "Added", "Deleted" or "Unchanged" screen readers text, if the we should avoid the pluses or minuses for the screen readers, because it's already covered with the more descriptive screen readers labels. As in the comment I linked to, @afercia wrote: In a few words: some screen readers already read out CSS generated content and more will do in the next future..

[audrasjb]

Thanks @birgire for your explanations, I'd say you're totally alright.
43532.2.diff should fix it :)

[audrasjb]

Fixes dashicons use

[audrasjb]

43532.2.diff: Fixes dashicons use

[audrasjb]

As seen during accessibility team meeting, let's move some tickets to 4.9.9 milestone to see if it can land in the next minor.

[pento]

Closing this, as the entire revisions interface will need to be redone to fit in with the block editor.

[johnbillion]

It seems that wontfixing this because of an unplanned future change based on the block editor is a bit premature. This enhancement is valuable for usability and accessibility regardless of whether the block editor is in use.

[afercia]

Discussed during today's accessibility bug-scrub and agreed this seems a relatively small and self-contained improvement. Worth trying it for 5.3.

[kjellr]

The Design team discussed this briefly in our triage today:
​https://wordpress.slack.com/archives/C02S78ZAL/p1564417984166900
(A WordPress.org slack account is required to view that link)

Both of these updates seem like solid improvements, and the screenshots look good. We're going to remove ux-feedback for now.

Thanks, all!

[adamsilverstein]

@afercia does this test well from an accessibility standpoint? I'm going to test out - looks ready for commit to me.

[afercia]

@adamsilverstein @audrasjb: looks good to me and complements nicely with the improvements proposed in #25473.

Seems to work well also when show_split_view is false (see screenshot below).

[birgire]

Great, it seems to work well.

I always had some problem (maybe as a mildly red/green colorblind) with these green/red colors on some of my screens and in some light conditions, so hopefully this will help others too.

Regarding the second part mentioned in the ticket's description:

We have a From/To when the "Compare any two revisions" is checked, but it might not be obvious what column is From and what column is To.

should we move it to another ticket, so it will not block the first part regarding the plus/minus part?

[adamsilverstein]

should we move it to another ticket, so it will not block the first part regarding the plus/minus part?

Yes, lets get what we have merged for this ticket, then work on clarifying From/To which for the record indicate which revisions are being compared - the removed/added columns don't change.

[afercia]

To visually illustrate color alone is not sufficient, see the screenshot below. Quickly emulating deuteranopia (the most common form of color perception impairment) with Sim Daltonism (included in macOS). The "green" lines on the right are barely visible.

[afercia]

43532.3.diff​ refreshes the patch:

• slightly improves the plus and minus icons centering
• ​CSS coding standards: Use a leading zero for decimal values, including in rgba().

[afercia]

In 45729:

Accessibility: Improve the differences between revisions.

Color alone is not sufficient to visually communicate differences.

• adds plus and minus icons to the changed lines
• adds visually hidden text: Added, Deleted, and Unchanged to clarify the differences to assistive technologies users

Props birgire, audrasjb, kjellr, adamsilverstein.
Fixes #43532.