Element : propriété ariaReadOnly

Baseline Large disponibilité

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis octobre 2023.

En savoir plus
Voir la compatibilité complète

La propriété ariaReadOnly de l'interface Element reflète la valeur de l'attribut aria-readonly, qui indique que l'élément n'est pas modifiable, mais reste autrement opérationnel.

Note : Dans la mesure du possible, utilisez un élément HTML <input> avec type="text" ou un <textarea>, car ils ont une sémantique intégrée et ne nécessitent pas d'attributs ARIA.

Valeur

Une chaîne de caractères avec l'une des valeurs suivantes :

"true": L'utilisateur·ice ne peut pas modifier la valeur de l'élément.
"false": L'utilisateur·ice peut définir la valeur de l'élément.

Dans cet exemple, l'attribut aria-readonly sur l'élément avec un ID de boiteSaisieTexte est défini sur "true", indiquant que cette entrée est actuellement en lecture seule. En utilisant ariaReadOnly, nous mettons à jour la valeur à "false".

html

<div id="etiquetteBoiteTexteMultiligne">
  Entrez les étiquettes pour l'article
</div>
<div
  role="textbox"
  id="boiteSaisieTexte"
  contenteditable="true"
  aria-multiline="true"
  aria-labelledby="etiquetteBoiteTexteMultiligne"
  aria-readonly="true"></div>

let el = document.getElementById("boiteSaisieTexte");
console.log(el.ariaReadOnly); // "true"
el.ariaReadOnly = "false";
console.log(el.ariaReadOnly); // "false"