[wp-trac] [WordPress Trac] #48501: Enhancement: improve tertiary button styles

[WordPress Trac]

#48501: Enhancement: improve tertiary button styles
-------------------------------+-----------------------------------
 Reporter:  drw158             |      Owner:  (none)
     Type:  enhancement        |     Status:  new
 Priority:  normal             |  Milestone:  Awaiting Review
Component:  General            |    Version:
 Severity:  normal             |   Keywords:  needs-design-feedback
  Focuses:  ui, accessibility  |
-------------------------------+-----------------------------------
 In WordPress, there are primary, secondary, and tertiary button styles, as
 shown below.

 [[Image(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
 [https://github.com/WordPress/gutenberg/issues/15358 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:

 [[Image(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 [https://www.w3.org/WAI/WCAG21/Understanding/non-text-
 contrast.html 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:

 [[Image(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:

 [[Image(http://cldup.com/8YaRMfZ74t.png)]]

 Bold:

 [[Image(http://cldup.com/nRwzpiTX8T.png)]]

 In addition, I've found this on the use of italic, bold, and ALL CAPS from
 [https://webaim.org/articles/evaluatingcognitive/ 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.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/48501>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform