WordPress.org

Make WordPress Core

Opened 2 years ago

Closed 10 months ago

Last modified 5 months ago

#44621 closed enhancement (fixed)

Privacy Policy Guide: Improve the readability of the suggested text

Reported by: birgire Owned by: garrett-eclipse
Milestone: 5.4 Priority: normal
Severity: normal Version: 4.9.6
Component: Privacy Keywords: has-screenshots has-patch commit
Focuses: ui, accessibility, css, administration Cc:

Description (last modified by 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

Attachments (21)

current-suggested-text-format.jpg (86.3 KB) - added by birgire 2 years ago.
Current "Suggested text" format
suggested-text-format-v1.jpg (91.5 KB) - added by birgire 2 years ago.
v1
suggested-text-format-v2.jpg (88.1 KB) - added by birgire 2 years ago.
v2
suggested-text-format-v3.jpg (87.7 KB) - added by birgire 2 years ago.
v3
Screen Shot 2019-03-21 at 9.43.12 PM.png (243.0 KB) - added by garrett-eclipse 21 months ago.
Suggesting increased font size on the intro copy to give it better distinction from the suggested text
44621.diff (539 bytes) - added by sabernhardt 17 months ago.
44621-larger-text.png (74.6 KB) - added by sabernhardt 13 months ago.
larger text for informational paragraphs (1.1 em)
44621-larger-font.diff (620 bytes) - added by sabernhardt 13 months ago.
44621-white-background.png (74.2 KB) - added by sabernhardt 13 months ago.
suggested text with white background
44621-white-background.diff (717 bytes) - added by sabernhardt 13 months ago.
44621-white-background-aligned.diff (715 bytes) - added by sabernhardt 13 months ago.
white background option, aligned to the text container edge
tools page.png (62.7 KB) - added by afercia 12 months ago.
Tools page.
suggested-text-v4.png (379.0 KB) - added by melchoyce 12 months ago.
44621.2.diff (10.6 KB) - added by xkon 11 months ago.
privacy-divs-copy-paste-classic-editor.png (27.6 KB) - added by sabernhardt 10 months ago.
new div tags remain when copying and pasting into Classic (Visual) Editor
44621.3.diff (10.0 KB) - added by sabernhardt 10 months ago.
44621_context.jpg (75.1 KB) - added by xkon 10 months ago.
44621.4.diff (676 bytes) - added by xkon 10 months ago.
44621.4_preview.jpg (51.3 KB) - added by xkon 10 months ago.
44621.5.diff (972 bytes) - added by garrett-eclipse 10 months ago.
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)
44621.6.diff (1.2 KB) - added by SergeyBiryukov 10 months ago.
Refreshed to account for .wp-policy-help back-compat after [47112] / #49282.

Download all attachments as: .zip

Change History (63)

@birgire
2 years ago

Current "Suggested text" format

#1 @birgire
2 years ago

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

Last edited 2 years ago by birgire (previous) (diff)

#2 @birgire
2 years ago

  • Description modified (diff)

#3 @SergeyBiryukov
2 years ago

  • Version changed from 4.6 to 4.9.6

#4 @jepperask
2 years ago

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

http://i.imgur.com/gEg8ukl.png

#5 @SergeyBiryukov
2 years ago

  • Milestone changed from Awaiting Review to 4.9.9

This ticket was mentioned in Slack in #core-privacy by desrosj. View the logs.


2 years ago

#7 @desrosj
2 years ago

  • Keywords ui-feedback added

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

This ticket was mentioned in Slack in #core-privacy by desrosj. View the logs.


2 years ago

#9 @idea15
2 years ago

  • Owner set to idea15
  • Status changed from new to assigned

#10 @karmatosed
2 years ago

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.

#11 @afercia
2 years ago

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

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


2 years ago

#13 @jameskockelbergh
2 years ago

Italic readability would improve if the typography size was larger.

#14 @pento
2 years ago

  • Milestone changed from 4.9.9 to Future Release

This ticket was mentioned in Slack in #core-privacy by webdevlaw. View the logs.


2 years ago

#16 @garrett-eclipse
22 months ago

  • Keywords needs-patch added

@garrett-eclipse
21 months ago

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

#17 @garrett-eclipse
21 months ago

  • Keywords ui-feedback removed

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
17 months ago

#18 @sabernhardt
17 months ago

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).

#19 @garrett-eclipse
14 months ago

  • Keywords has-patch needs-testing added; needs-patch removed
  • Milestone changed from Future Release to 5.4
  • Owner changed from idea15 to garrett-eclipse

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

#20 @sabernhardt
13 months ago

@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).

Last edited 13 months ago by sabernhardt (previous) (diff)

@sabernhardt
13 months ago

larger text for informational paragraphs (1.1 em)

@sabernhardt
13 months ago

suggested text with white background

#21 @garrett-eclipse
13 months ago

  • Keywords needs-design-feedback added

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.

#22 @afercia
13 months ago

  • Keywords italic-text added

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

#23 @sabernhardt
13 months ago

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
13 months ago

white background option, aligned to the text container edge

#24 @karmatosed
12 months ago

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?

#25 @afercia
12 months ago

For an existing style, see the Tools page.

@afercia
12 months ago

Tools page.

#26 @sabernhardt
12 months ago

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 a special 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.

Version 0, edited 12 months ago by sabernhardt (next)

#27 @karmatosed
12 months ago

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?

#28 @melchoyce
12 months ago

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.

This ticket was mentioned in Slack in #design by karmatosed. View the logs.


12 months ago

#30 @garrett-eclipse
12 months ago

  • Focuses ui css administration added
  • Keywords needs-refresh added; needs-design-feedback italic-text removed

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
11 months ago

#31 @xkon
11 months ago

  • Keywords needs-refresh removed

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
10 months ago

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

#32 @sabernhardt
10 months ago

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

This ticket was mentioned in Slack in #accessibility by audrasjb. View the logs.


10 months ago

#34 @xkon
10 months ago

@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
10 months ago

#35 @xkon
10 months ago

  • Keywords needs-design-feedback added

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 :).

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


10 months ago

@xkon
10 months ago

#37 @xkon
10 months ago

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 😊.

Last edited 10 months ago by xkon (previous) (diff)

@garrett-eclipse
10 months ago

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)

#38 @garrett-eclipse
10 months ago

  • Keywords needs-design-feedback removed
  • Status changed from assigned to accepted

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.

#39 @xkon
10 months ago

  • Keywords commit added; needs-testing removed

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
10 months ago

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

#40 @SergeyBiryukov
10 months ago

  • Resolution set to fixed
  • Status changed from accepted to closed

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.

#42 @SergeyBiryukov
5 months ago

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.

Note: See TracTickets for help on using tickets.