Désactivé vs lecture seule
Guide de référence pour choisir entre disabled et readonly sur un champ de formulaire, avec une comparaison visuelle de chaque composant dans ses trois états.
Comprendre disabled et readonly
Les attributs disabled et readonly semblent similaires — les deux empêchent la modification d'un champ — mais ils communiquent des intentions très différentes à l'utilisateur et aux technologies d'assistance. Bien choisir entre les deux améliore la clarté et l'accessibilité de vos formulaires.
disabled signifie « ce champ ne s'applique pas, ou pas encore ». Le champ est visuellement estompé, retiré de l'ordre de tabulation, ignoré lors de la soumission du formulaire, et généralement sauté par les lecteurs d'écran — comme s'il n'existait pas.
readonly signifie « ce champ est visible et pertinent, mais non modifiable pour l'instant ». Le champ conserve son apparence normale, reste focusable au clavier, son contenu demeure sélectionnable et copiable, et sa valeur est tout de même soumise avec le formulaire.
Cette distinction compte particulièrement pour l'accessibilité : un champ disabled disparaît de la navigation au clavier, ce qui peut cacher de l'information à une personne utilisant un lecteur d'écran. Un champ readonly, lui, reste découvrable et son état est explicitement annoncé.
Tableau comparatif des comportements
| Comportement | Normal | Lecture seule | Désactivé |
|---|---|---|---|
| Soumis avec le formulaire | Oui | Oui | Non |
| Focusable / dans l'ordre de tabulation | Oui | Oui | Non |
| Sélectionnable et copiable | Oui | Oui | Non (souvent non sélectionnable) |
| Annoncé par un lecteur d'écran | Normalement | Oui, comme « lecture seule » | Souvent ignoré (hors de l'ordre de tabulation) |
| Message communiqué à l'utilisateur | Modifiable maintenant | Visible, mais non modifiable | Non applicable actuellement |
Quand utiliser lequel
Utiliser disabled quand…
- Le champ ne s'applique pas dans le contexte actuel (ex. une option dépendante d'un choix précédent non encore fait)
- Une action est temporairement bloquée (ex. bouton désactivé pendant un chargement)
- Le champ deviendra disponible plus tard et n'a pas besoin d'être découvert maintenant
Utiliser readonly quand…
- La valeur est calculée ou pré-remplie et ne doit pas être modifiée par l'utilisateur
- Le champ doit rester visible, sélectionnable et copiable (ex. un numéro de confirmation)
- La valeur doit être verrouillée après une étape (ex. relecture avant soumission finale)
- Le champ doit continuer à être soumis avec le formulaire
Comparaison visuelle par composant
Chaque composant ci-dessous supporte à la fois disabled et readonly. Comparez leur rendu côte à côte.
merisia-checkboxes
Normal
Lecture seule
Désactivé
merisia-combobox
Normal
Lecture seule
Désactivé
merisia-date-input
Normal
Lecture seule
Désactivé
merisia-file-upload
Normal
Lecture seule
Désactivé
merisia-input
Normal
Lecture seule
Désactivé
merisia-input-email
Normal
Lecture seule
Désactivé
merisia-input-number
Normal
Lecture seule
Désactivé
merisia-password
Normal
Lecture seule
Désactivé
merisia-radios
Normal
Lecture seule
Désactivé
merisia-select
Normal
Lecture seule
Désactivé
merisia-textarea
Normal
Lecture seule
Désactivé
merisia-toggle
Normal
Lecture seule
Désactivé
merisia-button
Normal
Désactivé
Composants non couverts
Ces composants ne représentent pas une valeur modifiable par l'utilisateur et n'ont donc pas de distinction disabled vs readonly pertinente :
- merisia-link — représente une navigation, pas une valeur soumise.
- merisia-table — affiche des données, ne collecte pas de saisie utilisateur.
- merisia-stepper — indique une progression, n'est pas un champ interactif.
- merisia-error-message et merisia-error-summary — affichent des messages de validation, sans contenu modifiable ou verrouillable.