WordPress.org

Make WordPress Core

Opened 6 weeks ago

Closed 13 days ago

Last modified 13 days ago

#48406 closed defect (bug) (fixed)

Dashboard: Some links can be identified as such only by their color

Reported by: afercia Owned by: audrasjb
Milestone: 5.3.1 Priority: normal
Severity: normal Version:
Component: Administration Keywords: has-screenshots has-patch commit
Focuses: ui, accessibility Cc:
PR Number:

Description

In the Dashboard, some links can be identified as such only by their color. Specifically:

  • change your theme completely
  • widgets and menus within the sentence Manage widgets or menus

The color difference with adjacent text is very low. Even with moderate vision impairment or moderate color perception impairment these links are barely distinguishable from normal text.

Quoting from the WordPress accessibility coding standards:

Links: underline or no underline?
https://make.wordpress.org/core/handbook/best-practices/coding-standards/accessibility-coding-standards/#links-underline-or-no-underline

When links can be identified as such by the context, for example because they’re part of a menu, or a set of links clearly identified as user interface controls, they don’t necessarily need to be underlined. In all the other cases, especially for links surrounded by other text (in a line or block of text), links need to be always underlined.

In a few words: most of the links in the Welcome box are OK because the context clarifies they're link. They are in a list that looks like a set of links. They have icons. The whole sentence is a link.

However, the three cases mentioned above are links within a line of text thus need to be underlined.

See the second screenshot below, where I'm using Sim Daltonism (bundled with macOS) to simulate monochromacy.

Attachments (11)

dashboard links.png (141.0 KB) - added by afercia 6 weeks ago.
dashboard links monochromacy example.png (376.7 KB) - added by afercia 6 weeks ago.
at a glance active theme.png (33.0 KB) - added by afercia 6 weeks ago.
48406.diff (2.6 KB) - added by afercia 6 weeks ago.
welcome widgets menus dashicon.png (47.6 KB) - added by afercia 6 weeks ago.
Original dashicons welcome-widgets-menus
dashboard links proposal.png (133.6 KB) - added by afercia 6 weeks ago.
Welcome panel with the patch applied
welcome panel wp 3.7.png (179.6 KB) - added by afercia 6 weeks ago.
welcome panel wp 3.8.png (150.1 KB) - added by afercia 6 weeks ago.
48406-haspatch-desktop.png (64.4 KB) - added by audrasjb 3 weeks ago.
Patch applied on desktop
48406-haspatch-intermediate.png (82.7 KB) - added by audrasjb 3 weeks ago.
Patch applied on intermediate screens
48406-haspatch-mobile.png (43.8 KB) - added by audrasjb 3 weeks ago.
Patch applied on mobile screens

Download all attachments as: .zip

Change History (27)

#1 @afercia
6 weeks ago

Re: Manage widgets or menus I'd like to propose to split it in two items:

  • [link]Manage widgets[/link]
  • [link]Manage menus[/link]

Note: the links output depends on whether the active theme supports widgets / menus.

This way:

  • they wouldn't need to be underlined
  • they would make sense even when read out of context, vs. the previous links that are announced only as "widgets" and "menus"

Instead, change your theme completely needs to be underlined.

Last edited 6 weeks ago by afercia (previous) (diff)

#2 @afercia
6 weeks ago

There's at least one more occurrence of link within a line of text that needs to be underlined: the active theme within the "At a lance" box.

Pending further review from the accessibility team.

@afercia
6 weeks ago

#3 @afercia
6 weeks ago

  • Keywords has-patch added; needs-patch removed

48406.diff is a first pass to split the widgets and menu links and underline a few other links:

  • change your theme completely
  • active theme in the At a glance box
  • View all drafts in the Quick Draft box

Regarding the widgets / menus dashicon, the current one is dashicons-welcome-widgets-menus which represents a list and some boxes. For the new two split items I used dashicons-layout and dashicons-list-view for now. See attached screenshots. Alternatively, two new icons should be created as I couldn't find better matches for widgets and menus.

@afercia
6 weeks ago

Original dashicons welcome-widgets-menus

@afercia
6 weeks ago

Welcome panel with the patch applied

#4 @afercia
6 weeks ago

Some historical background: all these links were underlined in WordPress 3.7. They changed with the WordPress 3.8 redesign. See screenshots below.

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


4 weeks ago

#6 @afercia
4 weeks ago

  • Milestone changed from Awaiting Review to 5.3.1

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


4 weeks ago

#8 @karmatosed
4 weeks ago

Underlining seems fine but I would recommend we use skip-ink to avoid having things be very difficult to read for some. https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-skip-ink.

#9 @afercia
4 weeks ago

Sure. text-decoration-skip-ink: auto is the default since Chrome 64 (January 2018) and Firefox 70 (October 2019) so basically there's nothing we have to do in this regard. Still not supported by Safari, Edge, IE and various mobile browser though.

There are now other interesting CSS properties related to underline. At the time of writing they're only supported by Firefox and Safari though:

  • text-decoration-thickness: sets the thickness of lines added via text-decoration.
  • text-underline-offset: sets the distance between a text decoration and the text it is set on. Bear in mind that this only works on underlines.

Exploring these properties could be an interesting idea but I think it should happen in a separate ticket.

@audrasjb
3 weeks ago

Patch applied on desktop

@audrasjb
3 weeks ago

Patch applied on intermediate screens

@audrasjb
3 weeks ago

Patch applied on mobile screens

#10 @audrasjb
3 weeks ago

  • Keywords commit added; needs-design-feedback removed
  • Owner set to audrasjb
  • Status changed from new to accepted

I tested 48406.diff: the patch applies cleanly and fixes the issue.
Removing needs-design-feedback as @karmatosed already provided a feedback on this patch.
Adding commit keyword.

#11 @afercia
3 weeks ago

  • Keywords needs-design-feedback added; commit removed

I'd like to have a final confirmation the icons for Manage widgets and Manage menus are OK. /Cc @karmatosed

#12 @karmatosed
2 weeks ago

Looks good to me. At some point, we need to think about unifying what we use to mean widgets/menus. This, for now, works though.

#13 @audrasjb
2 weeks ago

  • Keywords commit added; needs-design-feedback removed

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


2 weeks ago

#15 @SergeyBiryukov
13 days ago

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

In 46770:

Accessibility: Administration: Underline links on Dashboard that are located within a line of text and thus need to be underlined:

  • "change your theme completely"
  • Active theme in the "At a Glance" box
  • "View all drafts" in the Quick Draft box

Split "Manage widgets or menus" into separate items for consistency with other links.

For better accessibility, links that are a part of other text should be underlined and not rely on color alone to be distinguished.

Per accessibility coding standards:

When links can be identified as such by the context, for example because they’re part of a menu, or a set of links clearly identified as user interface controls, they don’t necessarily need to be underlined. In all the other cases, especially for links surrounded by other text (in a line or block of text), links need to be always underlined.

https://make.wordpress.org/core/handbook/best-practices/coding-standards/accessibility-coding-standards/#links-underline-or-no-underline
https://make.wordpress.org/accessibility/handbook/design/use-of-color/#not-by-color-alone

Props afercia, audrasjb, karmatosed.
Fixes #48406.

#16 @SergeyBiryukov
13 days ago

In 46771:

Accessibility: Administration: Underline links on Dashboard that are located within a line of text and thus need to be underlined:

  • "change your theme completely"
  • Active theme in the "At a Glance" box
  • "View all drafts" in the Quick Draft box

Split "Manage widgets or menus" into separate items for consistency with other links.

For better accessibility, links that are a part of other text should be underlined and not rely on color alone to be distinguished.

Per accessibility coding standards:

When links can be identified as such by the context, for example because they’re part of a menu, or a set of links clearly identified as user interface controls, they don’t necessarily need to be underlined. In all the other cases, especially for links surrounded by other text (in a line or block of text), links need to be always underlined.

https://make.wordpress.org/core/handbook/best-practices/coding-standards/accessibility-coding-standards/#links-underline-or-no-underline
https://make.wordpress.org/accessibility/handbook/design/use-of-color/#not-by-color-alone

Props afercia, audrasjb, karmatosed.
Merges [46770] to the 5.3 branch.
Fixes #48406.

Note: See TracTickets for help on using tickets.