Chers développeurs, arrêtez de casser les checkboxes !

Chers développeurs,

Je souhaiterais attirer votre attention sur un détail crucial pour l’expérience utilisateur : l’accessibilité des checkboxes.

Lorsque vous implémentez une checkbox dans une application, il est essentiel de faire en sorte que l’utilisateur puisse l’actionner en cliquant sur son label.

Aucun effort particulier n’est nécessaire pour y parvenir. Il suffit de maintenir le lien entre la checkbox et son label pour ne pas casser l’accessibilité. Vos utilisateurs vous le revaudront.

Si vous utilisez Angular Material, veillez à placer le label à l’intérieur des balises <mat-checkbox> et jamais à l’extérieur.

Voici un exemple de code correct :

1<mat-checkbox>
2	Chers développeurs, arrêtez de casser les checkboxes !
3</mat-checkbox>

Et voici un exemple de code incorrect à éviter :

1<mat-checkbox></mat-checkbox>
2Chers développeurs, arrêtez de casser les checkboxes !

Cette règle s’applique également aux “boutons radio” et aux slide toggles.

Cordialement,
Amadou