Confirm checkbox

[Robbert]

A variant to the regular checkbox: this checkbox is required before submitting a form. It needs to be clear what exactly the user agrees to. The form submit is blocked until this checkbox is checked, and it should be discoverable what the cause is for the submit button being in disabled state.

Example from Gemeente Utrecht:

[julezrulez]

This is one of the main issues I personally fight against especially in long forms. If I come across a disabled button I start at the beginning of the form to check what I must fill in. In the above example you can see that the checkbox has a low contrast. 9 out of 10 chance that I miss the checkbox and discover after checking the form 3 times that there is a hidden checkbox.

From this user point of view. Don't disable submit buttons. Just let me try out the form and give me an error message, a nice instruction and a suggestion how to solve my mistake.

[Robbert]

@julezrulez You make an excellent point, I had never considered this as requirement before:

• the unchecked checkbox must have enough contrast compared to the background

Recently I read this article: Making Disabled Buttons More Inclusive by CSS Tricks

I wonder how if it could be helpful to provide an error message when a disabled button is clicked, and perhaps with an option to move to the incorrect form field.

[Hilbrand]

Here is another article on against disabling buttons and what to do instead: https://axesslab.com/disabled-buttons-suck/

[Yolijn]

@Robbert Jeffrey and I would like to discuss this component further. Maybe it is just a required checkbox and the pattern of a combined disabled button should not be taken into account? When clicking the button the various form-validations including a required checkbox could then cause an invalid form instead?

Removing this component from the index for now

[Yolijn]

Jeffrey and I also think this is probably more a pattern than a component

[Robbert]

Idee achter naamgeving: "Confirm" komt uit WCAG 3.3.4 over fouten voorkomen in formulieren. "Reversible" en "Checked" zijn de twee andere steekwoorden in dat Successcriterium.

confirm is ook een bekende term in JavaScript, daar heb je de window.confirm() method voor een dialoog om een actie te bevestigen.

[Robbert]

Een jaar later denken we nog steeds: dit is een patroon. De gerelateerde component is de "Form field checkbox". Als mensen speciale styling willen geven zoals gemeente Utrecht, dan staat ze dat vrij.

[Robbert]

Een vraag van Fabian van gemeente Den Haag in Slack: Moet de checkbox getoond worden voordat je het hele formulier gaan invullen of aan het einde? De aanname is dat wanneer je het op voorhand toont mensen het bewuster invullen. Nu ben ik benieuwd of er onderzoeken zijn of best practices.

[julezrulez]

In sommige voorleessoftware zoals NVDA kan je een overzicht van alle velden en knoppen opvragen zodat je een idee hebt wat je moet invullen. Ook kan je hiermee direct naar velden springen. Ik weet niet wat de hulpsoftware doet als er nieuwe velden bijkomen, maar ik betwijfel of het schermpje on-the-fly wordt bijgewerkt als er velden komen en gaan. Ik heb toevallig een voorbeeld van zo'n schermpje (zie ook waarom het belangrijk is een knop een naam te geven).