WordPress.org

Make WordPress Core

Opened 7 months ago

Last modified 6 hours ago

#47327 assigned defect (bug)

Avoid italic text for better accessibility and readability

Reported by: afercia Owned by: audrasjb
Milestone: 5.3.1 Priority: normal
Severity: normal Version:
Component: Administration Keywords: has-screenshots needs-design-feedback italic-text has-patch 2nd-opinion
Focuses: ui, accessibility Cc:
PR Number:

Description

Follow up to an ongoing discussion on the Gutenberg GitHub repository, see https://github.com/WordPress/gutenberg/issues/15683.

There are many different forms of dyslexia and different people are affected to varying degrees. When it comes to forms of dyslexia related to visual processing, not all the reading disorders are triggered by the same causes.

This is really a field where there are no "truths" about what is good or bad. Even specialized studies disagree, but there's general consensus that the font used and its metrics have an impact on some reading disorders.

While the ideal solution would be allowing a complete customization of the font, a simple step to help users is to avoid italic text.

Does this means italics needs to be banned?

No, it doesn't. Italics needs to be avoided on whole sentences or large blocks of text. A judicious use of italics, bold, and other font variants to highlight important parts of a sentence can even help dyslexic users.

Better readability for all users

Use of italic text in WordPress has some historical reasons. Years ago, there was no great awareness of accessibility issues related to font styles. Also, computer screens were 14 or 15 inches: the rendered text was bigger and more readable. On modern displays, the average rendered text size is smaller than in the past. Smaller size and italic style makes text difficult to read for many users.

Besides users with dyslexia, avoiding italic helps also users with low vision, even the ones with moderate low vision or reading issues related to ageing. A bigger default font size in the admin pages would also definitely help. This should be evaluated holistically because of the global changes it would introduce and deserves to be discussed separately.

Proposal

In the WordPress admin, italic text is typically used for descriptions and help text. Sometimes also for other elements, for example:

  • labels in the Quick Edit and Bulk Edit forms: this is also inconsistent with labels styling across the admin
  • error details text in the new Recover Mode functionality

For all these cases, I'd like to propose to remove the italic style.

Future

As noted on https://github.com/WordPress/gutenberg/issues/15683 and https://github.com/WordPress/gutenberg/pull/15469, a better typographic system should establish clear hierarchy by other means: spacing, font size, font weight, etc.

Discussion is ongoing, and any contribution is very welcome.

References:

The WCAG 2.0 used to explicitly recommend avoiding italic text (couldn't find this specific point in WCAG 2.1)

Understanding Guideline 3.1: Make text content readable and understandable
https://www.w3.org/TR/UNDERSTANDING-WCAG20/meaning.html

Avoiding chunks of italic text

Webaim recommendations for cognitive impairments and readability
https://webaim.org/articles/evaluatingcognitive/#readability

Use stylistic differences to highlight important content, but do so conservatively
Use various stylistic elements (italics, bold, color, brief animation, or differently-styled content) to highlight important content. Overuse can result in the loss of differentiation. Do not use italics or bold on long sections of text. Avoid ALL CAPS.

Attachments (8)

italic.jpg (336.5 KB) - added by afercia 7 months ago.
Random examples of Italic text in the WordPress admin pages.
02 italic.png (199.2 KB) - added by afercia 6 months ago.
More examples of large blocks of italic text (from the Media Editor page)
font-size 11 px.png (68.7 KB) - added by afercia 6 months ago.
plugin-editor-italic.jpg (18.1 KB) - added by birgire 6 months ago.
export-filtering.jpg (16.0 KB) - added by birgire 6 months ago.
47327.diff (1.2 KB) - added by audrasjb 3 weeks ago.
Removing obviously useless italics as a first pass on 47327
Capture d’écran 2019-11-17 à 14.53.00.png (61.5 KB) - added by audrasjb 3 weeks ago.
Italics removed from quick edit labels
Capture d’écran 2019-11-17 à 14.52.29.png (395.7 KB) - added by audrasjb 3 weeks ago.
Italics removed from edit media screen

Download all attachments as: .zip

Change History (31)

@afercia
7 months ago

Random examples of Italic text in the WordPress admin pages.

#1 @birgire
7 months ago

+1

Related #44621 (Privacy Policy guide)

#2 @afercia
7 months ago

Thanks @birgire. The Privacy Policy guide page is really a wall of hardly readable text 😞

#3 @afercia
7 months ago

Related: #42651

#4 in reply to: ↑ description ; follow-up: @SergeyBiryukov
7 months ago

Replying to afercia:

In the WordPress admin, italic text is typically used for descriptions and help text. Sometimes also for other elements, for example:

  • labels in the Quick Edit and Bulk Edit forms: this is also inconsistent with labels styling across the admin
  • error details text in the new Recover Mode functionality

For all these cases, I'd like to propose to remove the italic style.

I agree. The italic style on file paths under "This plugin failed to load" message on the last screenshot looks especially weird to me.

@afercia
6 months ago

More examples of large blocks of italic text (from the Media Editor page)

#5 in reply to: ↑ 4 @melchoyce
6 months ago

Replying to SergeyBiryukov:

Replying to afercia:

In the WordPress admin, italic text is typically used for descriptions and help text. Sometimes also for other elements, for example:

  • labels in the Quick Edit and Bulk Edit forms: this is also inconsistent with labels styling across the admin
  • error details text in the new Recover Mode functionality

For all these cases, I'd like to propose to remove the italic style.

I agree. The italic style on file paths under "This plugin failed to load" message on the last screenshot looks especially weird to me.

+1, these are super weird — I feel like we can go ahead and make these changes immediately.

re: the descriptions, I think in many cases italics are there for hierarchy. We'll want to explore alternate ways of establishing hierarchy in these cases. Going to discuss this in tomorrow's design meeting in Slack.

#6 @afercia
6 months ago

Thanks @melchoyce 👋 For what is worth, I do realize the importance of hierarchy and would love to see it better implemented holistically with a (finally) well established typographic system.

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


6 months ago

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


6 months ago

#9 @afercia
6 months ago

One ore screenshot: there are a few places where italic text is used together with a very small font size. Though the font-size in core is being discussed separately, very small font size values combined with italic make readability even worse. See for example the screenshot below: the actual font size is 11 pixels.

#10 @birgire
6 months ago

Here are two more examples:

The screenshot plugin-editor-italic.jpg shows the italic text when the file is not writable in the Plugin Editor or the Theme Editor.

I wonder though if this should be a notice instead.

It also shows the footer text.

The screenshot export-filtering.jpg shows the italic text under the Export filtering.

#11 @afercia
6 weeks ago

  • Component changed from General to Administration
  • Focuses ui accessibility added
  • Keywords has-screenshots added

#12 @afercia
6 weeks ago

  • Keywords needs-design-feedback added

I think in many cases italics are there for hierarchy. We'll want to explore alternate ways of establishing hierarchy in these cases.

I do realize the importance of hierarchy and would love to see it better implemented holistically with a (finally) well established typographic system.

Noting there's now an official proposal to introduce better typographic hierarchy in core, see the related post on Make WordPress Design:

Proposal: a consistent type scale for WordPress
https://make.wordpress.org/design/2019/10/11/proposal-a-consistent-type-scale-for-wordpress/

It would be great for the new type scale to explore new patterns for the descriptions so that italics can be removed.

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


6 weeks ago

#14 @afercia
6 weeks ago

  • Milestone changed from Awaiting Review to 5.3.1

Discussed during today's accessibility bug-scrub and agreed this ticket could be a work in progress with multiple commits that span over more than one release. Also, good ticket for a contributor day!

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


6 weeks ago

#16 @estelaris
6 weeks ago

At #design triage today we agreed on following up on this ticket and including it in @davewhitley’s Proposal: a consistent type scale for WordPress
https://make.wordpress.org/design/2019/10/11/proposal-a-consistent-type-scale-for-wordpress/.

This is good work and like @afercia said, perhaps something that could be in small updates and extended to several releases.

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


5 weeks ago

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


4 weeks ago

#19 @afercia
3 weeks ago

  • Keywords italic-text added

@audrasjb
3 weeks ago

Removing obviously useless italics as a first pass on 47327

@audrasjb
3 weeks ago

Italics removed from quick edit labels

@audrasjb
3 weeks ago

Italics removed from edit media screen

#20 @audrasjb
3 weeks ago

  • Keywords has-patch 2nd-opinion added
  • Owner set to audrasjb
  • Status changed from new to assigned

Hi,

In 47327.diff I removed useless italics from quick edit and media edit screens.

In my opinion, .description texts should be addressed in 5.4 instead of a point release. We could commit those changes in 47327.diff first in a point release as there is a consensus on how italics doesn't much sense in those places, then take time for .description design :-)

Cheers,
Jb

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


2 weeks ago

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


6 days ago

#23 @sabernhardt
6 hours ago

@audrasjb When I applied the patch, it rejected the plugin error hunk (perhaps because I applied it to my 5.4 trunk installation).

I also checked on the #commentsdiv .comments-box thead td, because I didn't see a thead element in the Post editor's Comments meta box (Classic Editor) to verify the change there. The td cell(s) within the header probably contained a bulk edit checkbox and/or the number of selected comments at first. I can't find a current use of that, but I did locate a screenshot of how the Bulk Edit Mode has looked on WordPress.com:
https://en.support.wordpress.com/manage-comments/#bulk-edit-mode
(There probably is no need to italicize that text anyway.)

If we choose to delay editing the table cell style, I still would like to prioritize removing italics from:

  1. the plugin errors,
  2. the quick edit labels, and
  3. the image editor help content.
Last edited 6 hours ago by sabernhardt (previous) (diff)
Note: See TracTickets for help on using tickets.