enum Valeurs : true,false

aria-readonly

Indique qu'un élément de saisie est en lecture seule — sa valeur est visible et copiable, mais ne peut pas être modifiée.

Description

aria-readonly="true" annonce aux technologies d’assistance qu’un champ ne peut pas être édité, tout en permettant à l’utilisateur de le lire et d’en copier la valeur. L’élément reste dans l’ordre de tabulation.

Pour les champs natifs, l’attribut HTML readonly est préférable car il gère aussi le comportement navigateur.

Syntaxe

<input type="text" value="Valeur pré-remplie" aria-readonly="true" />

Exemples

Champ de confirmation en lecture seule :

<label for="ref-commande">Référence de commande</label>
<input type="text"
       id="ref-commande"
       value="CMD-2024-00142"
       aria-readonly="true"
       aria-describedby="ref-info" />
<p id="ref-info">Cette référence est générée automatiquement.</p>

Widget personnalisé (éditeur riche en lecture seule) :

<div role="textbox"
     contenteditable="false"
     aria-readonly="true"
     aria-multiline="true"
     aria-label="Aperçu du document">
  Contenu en lecture seule…
</div>

Notes

Différence avec disabled / aria-disabled : un champ readonly reste soumis avec le formulaire et peut recevoir le focus ; un champ disabled est exclu de la soumission et généralement retiré du focus.

Indicateur visuel : accompagner d’un style visuel (fond légèrement différent) pour que les utilisateurs voyants perçoivent aussi l’état lecture seule.

Support navigateurs