search

nl-design-system / backlog

Central product backlog of the NL Design System.
European Union Public License 1.2
7 stars 1 forks source link

Button #38

Open usethetics opened 3 years ago

usethetics commented 3 years ago

Naam

Button

Link naar GitHub Discussion

Notities

Description

Button component with variations, states and behaviour.

Variations

States

Use cases

Use when

Don’t use when

macedvisioned commented 3 years ago

Forms conventions are mentioned here https://github.com/nl-design-system/backlog/issues/112

Design tips https://webaim.org/techniques/forms/controls#button

Use when: use buttons only form functions as submit, get, print, save, execute

Pattern: -

Don't use: for linking use to other website

Note:

Buttons language formatting according to WCAG guidelines Standard we have the following button types like 'Submit', 'Reset', 'Save', 'Print' and 'Search' buttons
For accessibility-use please use a button which is at least 44 px high. 

<!--Buttons in forms-->
<span style="display: inline;">
<input type="reset" role="reset" name="reset" aria-label="cancel"> value="Reset"> 
<input type="submit" role="submit" name="submit" aria-label="submit"> value="Submit Search">
<button>Submit</button>
</span>

<input type="text" name="search" aria-label="Search">
<button type="submit">Search</button>
<!--End Buttons in forms-->
Robbert commented 3 years ago

I read this article regarding making disabled buttons more accessible by making them focusable: Making Disabled Buttons More Inclusive, by CSS Tricks.

I am looking for more opinions on making buttons focusable but disabled using aria-disabled="true". Personally I have always considered disabled buttons very annoying. It don't feel it is fair that some users can read the low contrast text on what functionality they are missing, some cannot read the low contrast text and screen reader users might not find out there is a button at all.

In the Buttons page of the Rijkshuisstijl style guide they concur with allowing low contrast for disabled buttons:

Een button kan ook tijdelijk inactief zijn. Een inactieve button hoeft niet aan de contrasteisen te voldoen. Deze heeft als achtergrondkleur grijs2 #e6e6e6 en als tekstkleur grijs3 #cccccc.

This results in a terrible 1.28 contrast ratio.

Why not make the disabled button grey but with plenty of contrast? Perhaps add some other visual indicator that it is disabled, such as the disabled cursor.

usethetics commented 3 years ago

I agree that disabled buttons might convey valuable information to a user.

Even though WCAG does not consider a too low contrast on disabled buttons to be an issue, from a general a11y/usability POV I tend to see it as one.

Having enough contrast could possibly pose potential other risks such as buttons with sufficient contrast being perceived as actionable buttons or not having enough (contrasting) colors available in a brand’s palette.

On a higher level this also ties in with the question whether disabled buttons are actually wanted or needed at all in an interface and should therefor its use should be discouraged as much as possible. It would be worth investigating and documenting valuable alternatives.

usethetics commented 2 years ago

The Figma component has been updated and currently contains the following:

States

Variant

Icon start/end can be mutually exclusive or displayed at the same time (in any other configuration).

https://www.figma.com/file/gqQhMe3gj4YlC6JrZOWiCv/?node-id=151%3A92