Element : propriété ariaDetailsElements

Valeur

Un tableau de sous-classes de HTMLElement. Le texte interne de ces éléments peut être joint avec des espaces pour obtenir les détails accessibles.

Lorsqu'elle est lue, le tableau retourné est statique et en lecture seule. Lorsqu'elle est écrite, le tableau assigné est copié : les modifications ultérieures du tableau n'affectent pas la valeur de la propriété.

Description

La propriété est une alternative flexible à l'utilisation de l'attribut aria-details pour définir les informations de détails accessibles. Contrairement à aria-details, les éléments assignés à cette propriété n'ont pas besoin d'avoir un attribut id.

La propriété reflète l'attribut aria-details de l'élément lorsqu'il est défini, mais uniquement pour les valeurs de référence id listées qui correspondent à des éléments valides dans la portée. Si la propriété est définie, l'attribut correspondant est alors effacé. Pour plus d'informations sur les références d'éléments réfléchis et la portée, voir Références d'éléments réfléchis dans le guide Réflexion des attributs.

Exemples

Obtenir les détails accessibles

Cet exemple montre comment ariaDetailsElements peut être utilisé pour obtenir les informations définies à l'aide de l'attribut aria-details en HTML.

HTML

Le HTML définit deux éléments HTML <span> et référence leurs identifiants dans l'attribut aria-details d'un <button>.

<button aria-details="details1 details2">Bouton texte</button>
…
<span id="details1">Détails d'information 1 à propos de l'élément.</span>
<span id="details2">Détails d'information 2 à propos de l'élément.</span>

<pre id="journal"></pre>

#journal {
  height: 70px;
  overflow-x: scroll;
  padding: 0.5rem;
  border: 1px solid black;
}

JavaScript

Le code ci-dessous enregistre d'abord la valeur de l'attribut aria-details à partir de Element.getAttribute() (une chaîne de caractères listant les valeurs id des éléments référencés). Il vérifie ensuite si ariaDetailsElements est pris en charge, et si c'est le cas, enregistre sa valeur. Enfin, il retourne la chaîne de caractères accessible, calculée en itérant sur les éléments retournés et en concaténant leur texte interne.

const elementJournal = document.querySelector("#journal");
function journaliser(texte) {
  elementJournal.innerText = `${elementJournal.innerText}${texte}\n`;
  elementJournal.scrollTop = elementJournal.scrollHeight;
}

const elementBouton = document.querySelector("button");
journaliser(`aria-details: ${elementBouton.getAttribute("aria-details")}`);
// Test de fonctionnalité pour ariaDetailsElements
if ("ariaDetailsElements" in Element.prototype) {
  // Obtenir ariaDetailsElements
  const elementsBouton = elementBouton.ariaDetailsElements;
  journaliser(`ariaDetailsElements: ${elementsBouton}`);

  // Détails accessibles à partir de ariaDetailsElements
  const texte = elementsBouton.map((e) => e.textContent.trim()).join(" ");
  journaliser(`Détails accessibles : ${texte.trim()}`);
} else {
  journaliser(
    "element.ariaDetailsElements: n'est pas pris en charge par le navigateur",
  );
}

Résultat

Le journal ci-dessous montre les références d'éléments d'origine, les éléments associés/retournés et les détails accessibles.

Spécifications

Compatibilité des navigateurs

Voir aussi

• L'attribut ARIA aria-details
• La propriété ElementInternals.ariaDetailsElements
• Références d'éléments réfléchis dans le guide Réflexion des attributs.