WordPress.org

Make WordPress Core

Opened 4 weeks ago

Last modified 29 hours ago

#48406 accepted defect (bug)

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

Download all attachments as: .zip

Change History (21)

#1 @afercia
4 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 4 weeks ago by afercia (previous) (diff)

#2 @afercia
4 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
4 weeks ago

#3 @afercia
4 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
4 weeks ago

Original dashicons welcome-widgets-menus

@afercia
4 weeks ago

Welcome panel with the patch applied

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


10 days ago

#6 @afercia
10 days ago

  • Milestone changed from Awaiting Review to 5.3.1

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


7 days ago

#8 @karmatosed
7 days 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
6 days 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
29 hours ago

Patch applied on desktop

@audrasjb
29 hours ago

Patch applied on intermediate screens

@audrasjb
29 hours ago

Patch applied on mobile screens

#10 @audrasjb
29 hours 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.

Note: See TracTickets for help on using tickets.