WordPress.org

Make WordPress Core

Opened 5 months ago

Last modified 4 months ago

#47327 new defect (bug)

Avoid italic text for better accessibility and readability

Reported by: afercia Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version:
Component: General Keywords:
Focuses: 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 (5)

italic.jpg (336.5 KB) - added by afercia 5 months ago.
Random examples of Italic text in the WordPress admin pages.
02 italic.png (199.2 KB) - added by afercia 5 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 4 months ago.
plugin-editor-italic.jpg (18.1 KB) - added by birgire 4 months ago.
export-filtering.jpg (16.0 KB) - added by birgire 4 months ago.

Download all attachments as: .zip

Change History (15)

@afercia
5 months ago

Random examples of Italic text in the WordPress admin pages.

#1 @birgire
5 months ago

+1

Related #44621 (Privacy Policy guide)

#2 @afercia
5 months ago

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

#3 @afercia
5 months ago

Related: #42651

#4 in reply to: ↑ description ; follow-up: @SergeyBiryukov
5 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
5 months ago

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

#5 in reply to: ↑ 4 @melchoyce
4 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
4 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.


4 months ago

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


4 months ago

#9 @afercia
4 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
4 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.

Note: See TracTickets for help on using tickets.