L’état disabled peut poser des problèmes d’utilisabilité et d’accessibilité.
Il empêche toute interaction, limite le feedback utilisateur, n’est généralement pas lu par les lecteurs d’écran et n’est pas soumis aux règles de contraste. Son usage doit donc être réservé à des cas précis et utilisé avec précaution.
Le choix entre disabled, read-only et hidden relève d’une décision de conception. Il doit être anticipé dès la phase de design et formalisé dans les maquettes, afin de garantir une compréhension claire des comportements attendus et une expérience accessible à tous les utilisateurs.
Les états disabled, read-only et hidden co‑existent actuellement dans le Design System selon les composants. Cette page fournit un cadre de décision commun, pour aider à choisir l’état le plus pertinent en fonction du contexte, tout en assurant des interfaces cohérentes, compréhensibles et accessibles.
Principe fondamental
L’état disabled n’est pas toujours nécessaire.
Son utilisation est parfois précipitée, simplement pour éviter que l’utilisateur fasse une erreur ou pour l’empêcher d’accéder à certains éléments.
Cependant, d’autres méthodes existent et sont souvent plus pertinentes :
- Il peut être utile de laisser l’utilisateur faire une erreur, afin de lui permettre de comprendre et de corriger son action.
- Dans certains cas, il est préférable de cacher totalement un élément plutôt que de le rendre disabled.
- Dans d’autres situations, un état read-only est plus approprié lorsque l’information reste utile à la tâche.
L’objectif est de ne pas bloquer l’utilisateur sans explication, et de toujours privilégier la compréhension et le feedback.
Présentation des états possibles
Désactivé (disabled)
Un composant est rendu disabled lorsque l’utilisateur n’est pas autorisé à interagir avec celui-ci en raison de permissions, de limitations techniques ou de prérequis.
Un état disabled :
- ne peut être ni cliqué, ni sélectionné, ni utilisé
- ne reçoit pas le focus
- n’est pas lu par un lecteur d’écran
- n’est pas soumis aux exigences de contraste
Usage
Un composant disabled est généralement lié à un changement d’état temporaire, le plus souvent déclenché par l’action ou l’inaction de l’utilisateur.
Une fois les prérequis remplis, le composant revient à son état par défaut.
Dans ce cas, il est important d’indiquer clairement à l’utilisateur pourquoi l’élément est désactivé et comment le rendre actif.
Guidelines
Ne pas laisser l'utilisateur deviner ce qu'il doit faire pour rendre un élément interactif
Ajouter un tooltip explicatif sur les éléments désactivés
Ne pas appliquer un état disabled à un bouton de formulaire (qu'il s'agisse d'un champ vide ou d'une erreur de saisie)
Laisser l'utilisateur cliquer sur le bouton et lui envoyer des messages d'erreurs clairs pour l'aider à se corriger
Lecture-seule (read-only)
Un état read-only ne permet pas d’interagir avec un composant, mais :
- son contenu reste lisible
- il est accessible aux lecteurs d’écran
- il peut recevoir le focus
Contrairement à l’état disabled, le read-only respecte les règles d’accessibilité.
Usage
L’état read-only est utilisé lorsque le contenu d’un composant :
- ne peut pas être modifié par l’utilisateur
- mais reste pertinent ou nécessaire à la réalisation de sa tâche
Il permet à l’utilisateur de lire des données, visualiser du contenu ou des documents, sans lui donner la possibilité de les éditer.
Guidelines
Ne pas utiliser d'élément read-only lorsque l'ensemble d'un formulaire est en lecture seule
Utiliser du texte lorsque l'ensemble du formulaire est en lecture seule
Caché (hidden)
Un état hidden est utilisé lorsque l’utilisateur n’a pas la permission de visualiser ou d’interagir avec un élément, ou lorsque cet élément n’est pas pertinent dans le contexte courant.
Le composant est alors totalement effacé de l’interface.
Usage
L’état hidden est pertinent lorsque :
- l’utilisateur n’a pas le droit d’effectuer une action
- l’élément n’est pas nécessaire à sa compréhension
- l’élément dépend d’un contexte ou d’une condition non remplie
Guidelines
Ne pas afficher une action à l’utilisateur si celle-ci ne peut pas lui être rendue accessible
Cacher l’action afin de ne montrer à l’utilisateur que des options réellement pertinentes
Synthèse
- L’état disabled doit rester exceptionnel, temporaire et toujours explicité
- L’état read-only est à privilégier lorsque l’information reste utile
- L’état hidden est adapté lorsque l’élément n’a aucun sens pour l’utilisateur
- Empêcher une action n’est pas toujours aider : le feedback est souvent plus efficace que le blocage