Privacy Policy Guide: Improve the readability of the suggested text

[birgire]

The suggested text in the Privacy Policy Guide is in italic.

There's some discussion about italics on the web here:

​https://ux.stackexchange.com/questions/62742/are-italics-on-the-web-bad-for-accessibility

where we e.g. have a link to the ​WCAG20 guideline regarding readability:

Avoiding chunks of italic text

I wonder if we can find another format/style to improve readability?

The Privacy Policy Guide is located here:

wp-admin/tools.php?wp-privacy-policy-guide=1

[birgire]

Current "Suggested text" format

[birgire]

v1

[birgire]

v2

[birgire]

v3

[birgire]

I posted some ideas here above (v1, v2, v3) as a starting point, just to see how it compares to the current one.

[jepperask]

Personally I prefer v1 and v2. Combining all of them also works, but it is approaching a kind of blockquoteish styling:

[desrosj]

I like @jepperask's suggestion. I am marking for some ui-feedback to make sure that this get's the proper attention.

[karmatosed]

I would suggest the indent. I am not sure using a quote style or adding a background color helps. Do we have prior examples you are basing this on? I do agree to not have italic, so it's 'what' is the best here.

[afercia]

I'd agree italic shouldn't be used for big blocks of text.

[jameskockelbergh]

Italic readability would improve if the typography size was larger.

[garrett-eclipse]

Suggesting increased font size on the intro copy to give it better distinction from the suggested text

[garrett-eclipse]

I agree with @karmatosed and @afercia about avoiding italics and introducing the indent. And supplied an existing example of increasing the font size of the intro as @jameskockelbergh suggested which I agree gives it a better distinction.

[sabernhardt]

Since we seem to be in agreement about replacing the italicized style with indentation, I submitted a small patch to the stylesheet to achieve the layout shown in v3 (for both left-to-right and right-to-left directions).

[garrett-eclipse]

Thanks for the patch @sabernhardt going to look into this for 5.4.

[sabernhardt]

@garrett-eclipse Thanks for setting the milestone.

The previously submitted patch gives the simplest option. It is likely safe to add that version even in 5.3.1, having the least chance of causing trouble with anyone's current font and color settings. I specifically avoided changing the markup (so we would not also need to edit the JavaScript copy function and/or the wp_get_default_privacy_policy_content filter).

For further consideration, though, I'll add two other options, both with the words "Suggested text" indented along with the suggested text (one option with larger text size and one with a white background).

[sabernhardt]

larger text for informational paragraphs (1.1 em)

[sabernhardt]

suggested text with white background

[garrett-eclipse]

Thanks @sabernhardt for the patch, these are great.

Personally I'm a big fan of 44621-white-background.diff it stands out and even makes it easier for the user to grab the specific text within section they want.

All the patches applied cleanly to trunk and tested with the results (screens) you shared. I'm adding needs-design-feedback to get thoughts from the team there.

@birgire / @karmatosed / @afercia would appreciate your thoughts.

[afercia]

Personally, I'd prefer the white cards because they make very clear the distinction between "informational" text and the suggested text. Not sure the white boxes should be indented. Maybe for consistency they should use the same style of the white card in the wp-admin/tools.php page. Just my 2 cents :)

Related: #47327

[sabernhardt]

Yes, I was a little lazy by leaving the indent like that after trying borders. I'll upload a new patch to align the white edges with the other paragraphs, using 1.5em padding.

Borders, however, seem to require relative positioning and extra rules about when one element follows another. (I did create a patch that gives these sections a card style like on the Tools page, though I want to refrain from uploading any border option unless the other styles are deemed inadequate.)

[sabernhardt]

white background option, aligned to the text container edge

[karmatosed]

My only point about the white is it seems like a pattern we don't use anywhere else. For example, we use quote styles, but this isn't a quote. I would be more inclined to say keep the indent as a result of this. Unless there is a styling can be borrowed from something else?

[afercia]

For an existing style, see the Tools page.

[afercia]

Tools page.

[sabernhardt]

Before we go further with a background color and/or border, could we determine whether either of the first two options is not good enough? (see 44621.diff and 44621-larger-font.diff)

A background color can require an additional CSS rule in a plugin that supports dark mode or something similar, and borders here have even more potential to disrupt plugins. So I'd prefer a simpler fix, if possible.

[karmatosed]

Ah, thanks for that @afercia. For me that's slightly different use as a card style for an entire section, not using it as a callout. Is there a callout style in other text we can reuse?

[melchoyce]

Closest we have is probably an info notice.

I'm fine using card styles here, for what it's worth. I think it's a good use of existing styles to call out something that isn't a notice, and it does a good job of separating the suggested text from the explanatory text.

The HTML feels a little hectic on this page; I think we should, at the very least, group all suggested text within the same section into a div, and then style that div to match card styles. So, something like:

<div class="privacy-policy-suggested-text">
    <p><strong class="privacy-policy-tutorial">Suggested text:</strong> If you leave a comment on our site you may opt-in to saving your name, email address and website in cookies. These are for your convenience so that you do not have to fill in your details again when you leave another comment. These cookies will last for one year.</p>
    <p>If you visit our login page, we will set a temporary cookie to determine if your browser accepts cookies. This cookie contains no personal data and is discarded when you close your browser.</p>
    <p>When you log in, we will also set up several cookies to save your login information and your screen display choices. Login cookies last for two days, and screen options cookies last for a year. If you select "Remember Me", your login will persist for two weeks. If you log out of your account, the login cookies will be removed.</p>
    <p>If you edit or publish an article, an additional cookie will be saved in your browser. This cookie includes no personal data and simply indicates the post ID of the article you just edited. It expires after 1 day.</p>
</div>

And:

.privacy-policy-suggested-text {
    padding: 0 .75em;
    border: 1px solid #ccd0d4;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
    background: #fff;
}

Attaching a screenshot of what that looks like.

[garrett-eclipse]

Thanks @melchoyce I definitely like that card approach and from discussions in #design triage on Slack seems this direction works nicely. Marking for a refresh.

P.S. Bonus this approach should make it simple to flag which sections updated when we address #44538

[xkon]

44621.2.diff​ adds the styling that @melchoyce proposed.

Unfortunately, since there was no wrapper until this point and any plugin author was simply adding suggested texts as is (I've seen plugins using additional customized classes also), so we will have to communicate this change in case they would like to update their code as well to include the <div class="privacy-policy-suggested-text"></div> wrapper around the incoming suggestions for a unified style on the whole page.

[sabernhardt]

new div tags remain when copying and pasting into Classic (Visual) Editor

[sabernhardt]

Do we mind if those new div tags in 44621.2.diff end up in the website's privacy policy final markup? The Block Editor can remove those additional tags from the page, but Classic blocks and pages created with Classic Editor still would include them.

If each div tag (open and close tags) is wrapped in the if(description) conditional, then clicking the Create New Page button in Privacy settings would not insert them into the new page. The Copy to Clipboard button at the bottom of the guide would still carry the div tags to the other page, unless the JavaScript function is edited. (Then again, the policy-text and hide-privacy-policy-tutorial divs have been copied and pasted into the classic Visual editor since version 4.9.)

I uploaded 44621.3.diff for consideration, which includes the conditionals and a slightly larger padding, and it treats the strong tags like headings again. I don't like this patch as it is, but feel free to use any part of it you want.

About Plugins:

A directory search found 13 plugins using the wp_get_default_privacy_policy_content filter to append headings and content to the end of the guide:
​https://wpdirectory.net/search/01DY9JHYSYAS8AWFG7KDA81W79
Spreadsheet breakdown:
​https://docs.google.com/spreadsheets/d/18tq9Z-tjA-7WyG-iIRzyW2thgTiqUAGTtSCISUtARjE/edit?usp=sharing

And at least 233 plugins mention the wp_add_privacy_policy_content function:
​https://wpdirectory.net/search/01DYBKN83SRWGA6QHR83SA6C13

[xkon]

@sabernhardt is correct ( thanks for pointing this out! ), I missed that, copying into editors that understand HTML tags produce a <div> so this isn't optimal I'm guessing.

I'll take another look here.

[xkon]

Allow me to make a recap here as I've gone through everything and checked patches from the start and I'm also adding a needs-design-feedback for a quick look again as well from the design team :).

The current text (as well as the incoming from any plugin) is just divided by <p> elements. As seen on 44621_context.jpg​ the suggested text might have 3-4 paragraphs which means that visually they are divided if we start adding backgrounds, borders etc "as they are".

The <div> wrapping proposal is definitely solving this, but

1. we have to take under account & inform all plugin authors to change their output if they want a nice looking suggestion text.
2. we will result on copying yet another <div> on the front-end of the websites as @sabernhardt mentions.

--

I personally feel like the best approach here ( and more likely the one that we can safely take ) would be using an earlier patch on this ticket with a result as seen at 44621-white-background.png​.

44621-white-background.diff​ cleverly removes the margin between the suggested text <p> elements so they look to be like 1 unified body by not using any borders also.

With this approach, there won't be any difference in the HTML output and plugins can continue to use their existing code.

There's no change at all here from a Privacy point of view, so the final decision to be made is from an accessibility & design point of view.

--

I'll also be opening another ticket now as I feel it's somewhat relative, I was going to wait for after 5.4 but I guess the sooner the better the way this discussion here goes :).

[xkon]

44621.4.diff​ is making similar changes as an earlier patch of @sabernhardt with a small adjustment to margins.

For reasons explained on comment 35 & after a brief discussion in today's #accessibility bug-scrubs, I don't think it would be wise to change the HTML elements at this point.

@garrett-eclipse take a look as well please and feel free to mark for a commit 😊.

[garrett-eclipse]

Updated patch to address the regression of the styled copied content and improve the pasted content for classic editor Text tab and external rich text editors (Word/TextEdit/etc)

[garrett-eclipse]

Thanks @xkon and @sabernhardt for moving this forward.

I definitely agree let's avoid changing the dom if we can and just use CSS.

Testing 44621.4.diff it displayed really nicely but I did find it changed the contents of the clipboard when pasting to external rich-text editors. Looking at the copy command I made a few more CSS additions to remove the excess white space that's added and undesireable background. With 44621.5.diff the display doesn't change just the clipboard contents and that's to make things much cleaner for those rich text editors, as well as it cleans up the white space on pasting to the Text tab of a classic editor.

I'm happy with moving this forward but don't want to mark my own patch for commit, can either of you (@xkon or @sabernhardt) do some final testing and mark for commit please.

[xkon]

44621.5.diff​ works fine for me, thanks for taking care of the breaks @garrett-eclipse :) I always forget about that Copy action 😅.

Marking this for commit.

[SergeyBiryukov]

Refreshed to account for .wp-policy-help back-compat after [47112] / #49282.

[SergeyBiryukov]

In 47147:

Accessibility: Privacy: Improve the readability of the suggested text in Privacy Policy Guide.

Per WCAG 2.0 guidelines, big chunks of italic text should be avoided for better accessibility.

Props birgire, sabernhardt, xkon, garrett-eclipse, melchoyce, karmatosed, afercia, jepperask, SergeyBiryukov.
Fixes #44621. See #47327.

[garrett-eclipse]

Related: #49282

[SergeyBiryukov]

In 48145:

Accessibility: Privacy: Improve the readability of the removed text in Privacy Policy Guide.

Per WCAG 2.0 guidelines, big chunks of italic text should be avoided for better accessibility.

Additionally, replace the legacy .error class for "You deactivated this plugin and may no longer need this policy" message with .notice-info.

Follow-up to [47147], [48116].

Props afercia, audrasjb.
See #47327, #44621.