aria-readonly

Quand l’utiliser

Sur un contrôle de formulaire dont l’utilisateur peut voir et copier la valeur, mais pas la modifier — une ligne de récapitulatif de commande que l’utilisateur ne doit pas éditer, le commentaire d’un relecteur dans une approbation en plusieurs étapes, un identifiant généré automatiquement. L’utilisateur peut toujours accéder au champ par tabulation, sélectionner son texte et le lire ; le formulaire soumettra toujours sa valeur.

Si vous utilisez <input>, <textarea> ou <select>, l’attribut HTML readonly gère tout cela nativement et est à privilégier. Utilisez aria-readonly pour les widgets personnalisés : role="combobox", role="grid", role="listbox", role="slider", role="spinbutton" et role="textbox" (personnalisé).

Comparaison avec les états associés :

• aria-readonly — peut recevoir le focus, valeur visible et copiable, valeur soumise, valeur non modifiable.
• aria-disabled — peut recevoir le focus (reste dans l’ordre de tabulation) mais ne répond pas aux interactions, et n’est conventionnellement pas soumis.
• HTML disabled — retiré de l’ordre de tabulation, ignoré, non soumis.
• aria-hidden — retiré de l’arbre d’accessibilité ; c’est un objectif différent.

Le choix entre lecture seule et désactivé est sémantique : lecture seule signifie « valeur valide que vous pouvez voir », désactivé signifie « ne vous préoccupez pas de cela pour l’instant ».

Comment le maintenir synchronisé

Les valeurs valides sont "true" et "false". Utilisez "false" (ou omettez l’attribut) sur les contrôles éditables ; passez à "true" quand le champ passe en lecture seule.

Quand aria-readonly="true" :

• Le contrôle doit rester focalisable. N’ajoutez pas tabindex="-1".
• Les gestionnaires de clic et de clavier ne doivent pas modifier la valeur. La sélection et la copie du texte doivent continuer à fonctionner.
• Stylisez le champ de façon à distinguer visuellement l’état lecture seule de l’état éditable — généralement un arrière-plan différent, sans curseur clignotant, sans affordance au survol.

Erreurs fréquentes

• Définir aria-readonly sur un <input> natif tout en utilisant également l’attribut HTML readonly. L’attribut natif suffit ; le doublon peut créer des divergences.
• Utiliser aria-readonly sur un élément non-formulaire comme un <p> ou un <div> — l’état n’y a aucun sens.
• Définir aria-readonly="true" et aria-disabled="true" simultanément. Choisissez l’un ou l’autre selon que le champ est « valide mais verrouillé » ou « à ignorer pour l’instant ».
• Rendre un champ en lecture seule non focalisable (avec tabindex="-1") — les utilisateurs de lecteur d’écran ne peuvent plus l’atteindre pour lire la valeur.
• Masquer visuellement le champ en lecture seule tout en le laissant dans l’ordre de tabulation.

Exemple

<label for="order-id">Order ID</label>
<input
  id="order-id"
  type="text"
  value="ORD-83472"
  readonly
>

<!-- Widget personnalisé où l'attribut natif n'est pas disponible -->
<div
  role="textbox"
  tabindex="0"
  aria-readonly="true"
  aria-label="Generated reference"
>
  ORD-83472
</div>