WordPress.org

Make WordPress Core

Opened 18 months ago

Last modified 13 hours ago

#44621 assigned enhancement

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 needs-testing needs-design-feedback
Focuses: ui, accessibility, css, administration Cc:
PR Number:

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 (17)

current-suggested-text-format.jpg (86.3 KB) - added by birgire 18 months ago.
Current "Suggested text" format
suggested-text-format-v1.jpg (91.5 KB) - added by birgire 18 months ago.
v1
suggested-text-format-v2.jpg (88.1 KB) - added by birgire 18 months ago.
v2
suggested-text-format-v3.jpg (87.7 KB) - added by birgire 18 months ago.
v3
Screen Shot 2019-03-21 at 9.43.12 PM.png (243.0 KB) - added by garrett-eclipse 10 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 6 months ago.
44621-larger-text.png (74.6 KB) - added by sabernhardt 3 months ago.
larger text for informational paragraphs (1.1 em)
44621-larger-font.diff (620 bytes) - added by sabernhardt 3 months ago.
44621-white-background.png (74.2 KB) - added by sabernhardt 3 months ago.
suggested text with white background
44621-white-background.diff (717 bytes) - added by sabernhardt 3 months ago.
44621-white-background-aligned.diff (715 bytes) - added by sabernhardt 2 months ago.
white background option, aligned to the text container edge
tools page.png (62.7 KB) - added by afercia 2 months ago.
Tools page.
suggested-text-v4.png (379.0 KB) - added by melchoyce 7 weeks ago.
44621.2.diff (10.6 KB) - added by xkon 13 days ago.
privacy-divs-copy-paste-classic-editor.png (27.6 KB) - added by sabernhardt 43 hours ago.
new div tags remain when copying and pasting into Classic (Visual) Editor
44621.3.diff (10.0 KB) - added by sabernhardt 43 hours ago.
44621_context.jpg (75.1 KB) - added by xkon 14 hours ago.

Download all attachments as: .zip

Change History (52)

@birgire
18 months ago

Current "Suggested text" format

#1 @birgire
18 months 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 18 months ago by birgire (previous) (diff)

#2 @birgire
18 months ago

  • Description modified (diff)

#3 @SergeyBiryukov
18 months ago

  • Version changed from 4.6 to 4.9.6

#4 @jepperask
18 months 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
18 months ago

  • Milestone changed from Awaiting Review to 4.9.9

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


18 months ago

#7 @desrosj
18 months 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.


17 months ago

#9 @idea15
17 months ago

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

#10 @karmatosed
17 months 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
16 months 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.


16 months ago

#13 @jameskockelbergh
16 months ago

Italic readability would improve if the typography size was larger.

#14 @pento
16 months ago

  • Milestone changed from 4.9.9 to Future Release

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


16 months ago

#16 @garrett-eclipse
12 months ago

  • Keywords needs-patch added

@garrett-eclipse
10 months ago

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

#17 @garrett-eclipse
10 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
6 months ago

#18 @sabernhardt
6 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
4 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
3 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, I'll add two other options, both with "Suggested text" indented as well (one with larger text size and one with a white background).

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

@sabernhardt
3 months ago

larger text for informational paragraphs (1.1 em)

@sabernhardt
3 months ago

suggested text with white background

#21 @garrett-eclipse
2 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
2 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
2 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
2 months ago

white background option, aligned to the text container edge

#24 @karmatosed
2 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
2 months ago

For an existing style, see the Tools page.

@afercia
2 months ago

Tools page.

#26 @sabernhardt
2 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 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.

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

#27 @karmatosed
8 weeks 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
7 weeks 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.


5 weeks ago

#30 @garrett-eclipse
5 weeks 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
13 days ago

#31 @xkon
13 days 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
43 hours ago

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

@sabernhardt
43 hours ago

#32 @sabernhardt
43 hours 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.


15 hours ago

#34 @xkon
14 hours 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
14 hours ago

#35 @xkon
13 hours 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 :).

Note: See TracTickets for help on using tickets.