WordPress.org

Make WordPress Core

Opened 17 months ago

Last modified 5 days 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 italic-text
Focuses: accessibility 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 (13)

current-suggested-text-format.jpg (86.3 KB) - added by birgire 17 months ago.
Current "Suggested text" format
suggested-text-format-v1.jpg (91.5 KB) - added by birgire 17 months ago.
v1
suggested-text-format-v2.jpg (88.1 KB) - added by birgire 17 months ago.
v2
suggested-text-format-v3.jpg (87.7 KB) - added by birgire 17 months ago.
v3
Screen Shot 2019-03-21 at 9.43.12 PM.png (243.0 KB) - added by garrett-eclipse 9 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 5 months ago.
44621-larger-text.png (74.6 KB) - added by sabernhardt 5 weeks ago.
larger text for informational paragraphs (1.1 em)
44621-larger-font.diff (620 bytes) - added by sabernhardt 5 weeks ago.
44621-white-background.png (74.2 KB) - added by sabernhardt 5 weeks ago.
suggested text with white background
44621-white-background.diff (717 bytes) - added by sabernhardt 5 weeks ago.
44621-white-background-aligned.diff (715 bytes) - added by sabernhardt 4 weeks ago.
white background option, aligned to the text container edge
tools page.png (62.7 KB) - added by afercia 2 weeks ago.
Tools page.
suggested-text-v4.png (379.0 KB) - added by melchoyce 5 days ago.

Download all attachments as: .zip

Change History (41)

@birgire
17 months ago

Current "Suggested text" format

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

#2 @birgire
17 months ago

  • Description modified (diff)

#3 @SergeyBiryukov
17 months ago

  • Version changed from 4.6 to 4.9.6

#4 @jepperask
17 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
17 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.


16 months ago

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


16 months ago

#9 @idea15
15 months ago

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

#10 @karmatosed
15 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
15 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.


15 months ago

#13 @jameskockelbergh
14 months ago

Italic readability would improve if the typography size was larger.

#14 @pento
14 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.


14 months ago

#16 @garrett-eclipse
11 months ago

  • Keywords needs-patch added

@garrett-eclipse
9 months ago

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

#17 @garrett-eclipse
9 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
5 months ago

#18 @sabernhardt
5 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
2 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
5 weeks 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 4 weeks ago by sabernhardt (previous) (diff)

@sabernhardt
5 weeks ago

larger text for informational paragraphs (1.1 em)

@sabernhardt
5 weeks ago

suggested text with white background

#21 @garrett-eclipse
4 weeks 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
4 weeks 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
4 weeks 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
4 weeks ago

white background option, aligned to the text container edge

#24 @karmatosed
3 weeks 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 weeks ago

For an existing style, see the Tools page.

@afercia
2 weeks ago

Tools page.

#26 @sabernhardt
2 weeks 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 weeks ago by sabernhardt (previous) (diff)

#27 @karmatosed
11 days 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
5 days 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.

Note: See TracTickets for help on using tickets.