WordPress.org

Make WordPress Core

Opened 13 days ago

Last modified 7 hours ago

#48501 new enhancement

Enhancement: improve tertiary button styles

Reported by: drw158 Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version:
Component: General Keywords: needs-design-feedback
Focuses: ui, accessibility Cc:
PR Number:

Description

In WordPress, there are primary, secondary, and tertiary button styles, as shown below.

http://cldup.com/L3baQu0gZK.png

I think there is an opportunity to improve tertiary button styles, and document the rationale. Please forgive me, but I've seen discussions about "link" buttons or "plain text" buttons before, but I can't find them. Otherwise, I'd link them here. The only one I could find is an issue in Gutenberg, where a button was styled to look like a link. I'd like to prevent these issues in the future.

I did a bit of research to see how other design systems implement a tertiary button style:

http://cldup.com/6OIfWseUGN.png

A note I'd like clarification on, regarding accessibility and WCAG:

I've read that buttons need another visual indicator other that color to appear active/interactive. This is why sometimes you see tertiary buttons with ALL CAPS or an underline.

I've read the success criterion for non-text contrast recently, and it seems that this might not be the case:

This success criteria does not require that controls have a visual boundary indicating the hit area, but if the visual indicator of the control is the only way to identify the control, then that indicator must have sufficient contrast. If text (or an icon) within a button [...] is visible and there is no visual indication of the hit area then the Success Criterion is passed.

But it does seem like a recommendation:

Note that for people with cognitive disabilities it is recommended to delineate the boundary of controls to aid in the recognition of controls and therefore the completion of activities.

Here is the image they provide. Apparently both are ok:

http://cldup.com/gvHYXQXz3O.png

Does this mean that we don't need a visual boundary for buttons?


With this information, I have a proposal for buttons

Here are the options that I see for tertiary buttons:

  • Plain text: This is what we currently do, but I believe we could make it look a tad more like a button.
  • ALL CAPS: This seems like great solution — it provides another visual indication in addition to color. But there is some debate on whether or not all caps text is ideal. Some studies say it’s generally more readable. For some, it can be harder to read. It has been recommended that we don't use all caps in WordPress.
  • Underlined: This makes the button look like a link, which we don't want to do.
  • Bold text: This seems like a good solution too. It might be subtle, but I believe it's an improvement.

I propose that we go with the last option. Here's what that look like:

Semibold:

http://cldup.com/8YaRMfZ74t.png

Bold:

http://cldup.com/nRwzpiTX8T.png

In addition, I've found this on the use of italic, bold, and ALL CAPS from webaim:

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.

Please let me know what you think.

Change History (5)

#1 @drw158
13 days ago

Related:

Proposal: improve distinction between buttons and other controls: #48452

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


3 days ago

#3 @afercia
3 days ago

Also related: #48641 Discussion: links that look like buttons (and vice versa) (maybe consider to close this ticket in favor of #48641)

#4 @drw158
3 days ago

Thanks for the cross reference. This ticket focuses solely on on the tertiary button style, whereas the ticket you linked to focuses on a bit of semantics and the relationship between links and buttons.

#5 @afercia
7 hours ago

Note about terminology: historically, in core there's no such a thing like a "tertiary" button style. That's a Gutenberg terminology. In core there are only primary and secondary buttons, with size variants.

Note: See TracTickets for help on using tickets.