Checkbox

[usethetics]

Naam

Checkbox

• Link naar GitHub Discussion
• Link naar Figma Schetsboek

---

Notities

Development

CSS

• [ ] min-width and min-height are configurable
• [ ] sane defaults for minimum target size

HTML

• [ ] checkbox role is used
• [ ] ideally <input type="checkbox">

Documentation

Design

• [ ] Recognisable as checkbox (square shape)
• [ ] Minimum target size (WCAG 2.5.5)

Developer

• [ ] Use role="checkbox"
• [ ] Use <input type="checkbox"> and avoid custom ARIA implementation

[macedvisioned]

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

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

Use when: when you have just one choice to make Don't use: with multiple choice and don't use default aria-checked="true", this will conflict when the field is required after you change the input. Or when you use conditions in a related fields.

Radiobutton code snippet

<!--checkbox field-->   
<h2>Checkbox fields formatting according to WCAG guidelines</h2>    
<div id="uniquecontrolID" class="question-required-field" data-active="True" data-isfirstcontrol="False" data-type="question"> 
                                <!--field data specifications here above--> 
                                <div class="label-">
                                    <label for="uniqueLabelName" id="uniqueLabelID" class="question-label"><!--labelDescription--></label>
                                </div>
                                <div class="control-">
                                <fieldset>
                                        <legend>
                                            Maak uw keuze uit de volgende opties (meerdere optie mogelijk)
                                        </legend><div>
                                            <span id="UniqueElementID_cbKeuzeOpties" id="ariadescID" class="ariadesc"><!--alt description--><title="titleDescription" class="checkbox-input question-control" aria-label="Maak uw keuze uit de volgende opties (meerdere optie mogelijk)" value="" count="0" aria-describedby="ariadescID" aria-required="true" placeholder="<!--only when pattern is required-->">
                                            <input id="cbKeuzeOpties_0" type="checkbox" name="cbKeuzeOpties$0" value="1">
                                            <label for="cbKeuzeOpties_0">Keuze A</label>
                                            <input id="cbKeuzeOpties_1" type="checkbox" name="cbKeuzeOpties$1" value="2">
                                            <label for="cbKeuzeOpties_1">Keuze B</label>
                                            <input id="cbKeuzeOpties_2" type="checkbox" name="cbKeuzeOpties$2" value="3">
                                            <label for="cbKeuzeOpties_2">Keuze C</label>
                                            <input id="cbKeuzeOpties_3" type="checkbox" name="cbKeuzeOpties$3" value="4">
                                            <label for="cbKeuzeOpties_3">Keuze D</label>
                                            <input id="cbKeuzeOpties_4" type="checkbox" name="cbKeuzeOpties$4" value="5">
                                            <label for="cbKeuzeOpties_4">Keuze E</label>
                                            <input id="cbKeuzeOpties_5" type="checkbox" name="cbKeuzeOpties$5" value="6">
                                            <label for="cbKeuzeOpties_5">Keuze F</label></span>
                                        </div>
                                </fieldset>
                                <div>
                                        <!--If field is required-->
                                        <span id="UniqueErrorMessageID" class="errormessage" style="display: inline;"></span>
                                        <!--validating code, in some cases you will use an external source like in Visual Studio for validating form fields-->                                      
                                        <div class="validate-callout" aria-live="assertive" role="alert" style="top: 60px; left: 1.00001px; display: none;"><strong aria-hidden="true"><!--understandable value--></strong><br><!--required description--><br>
                                        <div class="validate-callout-co-up2" style="left: 0px;"></div><div class="validate-callout-co-up" style="left: 0px;"></div></div><img id="uniqueElementID_callout-validator_0" class="callout-validator" src="/external webresource that validates, like a js or external css file" alt="alt description here" style="inline css code">
                                </div>
                                </div>
</div>
<!--end checkbox field-->

[usethetics]

What do we do with checkboxes (this also applies to radio buttons) with multi-line text labels that wrap?

Currently when the next line(s) wrap, subsequent lines are positioned below the checkbox as displayed here:

Since I am trying to mimic the HTML scaffolding as close as possible in Figma and we would possibly need a container element around the label in HTML I would also like to introduce this in Figma.

This will also benefit our Figma component, since this is what happens in Figma

(Note the subsequent line(s) make the checkbox center in the overall container rather than be vertically centred to the first line.

Adding an extra container element to both HTML and Figma will fix both.

[macedvisioned]

@usethetics @Robbert 

I checked this issue. I have had this also with e.g. an acceptance checkbox. I received an error in Axe devtools that multiline labels are not accepted in assertive technologies. My opinion is that a label needs to be as short as possible. Any explanation needs to have a aria-live="polite" attribute with the description text. I attached two screenshot in a form I just made.
 

Do you have a solution for that in the front-end. 

Regards, Ed

[usethetics]

@macedvisioned Is the issue in Axe regarding multiline or multiple labels?

I agree that label should be as concise yet informative as possible but at the same time from a design system POV we do need the flexibility to gather for use-cases where a label is too long to fit on a single line.

[usethetics]

Gov.uk on why it sometimes is better to let users explicitly answer ‘none’ rather than leaving all checkboxes empty: https://designnotes.blog.gov.uk/2021/11/15/letting-users-tick-a-none-checkbox/

[usethetics]

The Figma component has been updated to contain the following.

States

• Default
• Hover
• Focus
• Disabled

Variants

• Checked
• Unchecked

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