Element : propriété ariaFlowToElements

Valeur

Un tableau de sous-classes de HTMLElement.

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-flowto pour définir un ordre de lecture alternatif. Contrairement à aria-flowto, 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-flowto de l'élément lorsqu'il est défini, mais uniquement pour les valeurs de référence id répertorié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 le flux vers l'élément

Cet exemple montre le flux normal à travers trois éléments section1, section2, section3 dans l'ordre, et un ordre alternatif qui saute de section1 à section3, puis revient. Notez que l'exemple est illustratif sauf si vous utilisez des outils d'accessibilité : nous ne suivons pas réellement ce chemin alternatif.

HTML

Le HTML définit trois éléments <div> qui définissent des sections, avec une classe "section", et des valeurs id : section1, section2 et section3. Chaque section a un flux normal défini par son ordre, commençant par section1 et se terminant par section3. Un flux alternatif est défini dans les sections 1 et 3 en utilisant l'attribut aria-flowto.

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

#journal {
  height: 200px;
  overflow: scroll;
  padding: 0.5rem;
  margin: 5px;
  border: 1px solid black;
}

<div id="section1" class="section" aria-flowto="section3">
  <h2>Section 1</h2>
  <p>
    Première section dans le flux normal. La section 3 est un flux alternatif.
  </p>
  <a href="#section2">Aller à la section 2 (flux normal)</a>
</div>

<div id="section2" class="section">
  <h2>Section 2</h2>
  <p>Deuxième section dans le flux normal.</p>
  <a href="#section3">Aller à la section 3 (flux normal)</a>
</div>

<div id="section3" class="section" aria-flowto="section1">
  <h2>Section 3</h2>
  <p>
    Troisième section dans le flux normal (fin du flux). La section 1 est un
    flux alternatif.
  </p>
</div>

JavaScript

Le code vérifie d'abord si ariaFlowToElements est pris en charge, et si c'est le cas, il enregistre sa valeur. Il parcourt ensuite les sections, en enregistrant un id de la section, la valeur de l'attribut aria-flowto et la valeur de la propriété ariaFlowToElements.

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

// Test de fonctionnalité pour ariaFlowToElements
if ("ariaFlowToElements" in Element.prototype) {
  const sections = document.querySelectorAll(".section");
  sections.forEach((elementDivSection) => {
    journaliser(`${elementDivSection.id}`);
    journaliser(
      ` aria-flowto: ${elementDivSection.getAttribute("aria-flowto")}`,
    );
    journaliser(" ariaFlowToElements:");
    // Obtenir les ids de chacun des éléments dans le tableau
    elementDivSection.ariaFlowToElements?.forEach((elem) => {
      journaliser(`  id: ${elem.id}`);
    });
  });
} else {
  journaliser(
    "element.ariaFlowToElements: n'est pas pris en charge par le navigateur",
  );
}

Résultat

Le journal ci-dessous montre chacune des sections (identifiées par id) et les identifiants des éléments de flux vers lesquels elles peuvent pointer, tels que sélectionnés par les outils d'accessibilité. Nous notons ici que l'attribut et la propriété identifient les mêmes éléments de flux vers.

Spécifications

Compatibilité des navigateurs

Voir aussi

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