Element: ariaFlowToElements プロパティ

Baseline 2025

Newly available

Since ⁨April 2025⁩, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

ariaFlowToElements は Element インターフェイスのプロパティであり、コンテンツの読む代替順序のある要素（単数または複数）を配列で保持します。これにより、ユーザーの判断で一般的な既定の読む順序を上書きできます。要素が1つだけ提供されている場合、この要素は読み順における次の要素となります。複数の要素が提供されている場合、それぞれの要素はユーザーに選択を提示すべき可能な経路を表します。

aria-flowto のトピックには、この属性とプロパティの使用方法に関する詳しい情報が含まれています。

値

HTMLElement のサブクラスの配列です。

読み取り時には、返される配列は静的で読み取り専用です。書き込み時には、代入された配列はコピーされます。その後配列に変更を加えても、プロパティの値には影響しません。

解説

このプロパティは、読む代替順序を設定するために aria-flowto 属性を使用することの柔軟な代替手段です。 aria-flowto とは異なり、このプロパティに割り当てる要素は id 属性を持つ必要がありません。

このプロパティは、定義されている場合に要素の aria-flowto 属性を反映しますが、有効なスコープ内要素と一致する参照先の id 値に対してのみ反映されます。このプロパティを設定すると、対応する属性がクリアされます。反映される要素への参照とスコープに関するより詳細な情報については、「属性の反映」ガイドの要素の参照の反映を参照してください。

例

flow-to 要素を取得

この例は、3つの要素section1、section2、section3を順にたどる通常フローと、section1からsection3へ飛び、再び戻る代替順序を示しています。アクセシビリティツールを実行していない限り、この例は説明用であることに注意してください：実際にはこの代替順序をたどりません。

HTML

この HTML には、セクションを定義する 3 つの <div> 要素があり、 "section" クラスが付いています。 id の値はそれぞれ section1、section2、section3 です。それぞれのセクションには順序によって定義される通常フローがあり、 section1 で始まり section3 で終わります。代替フローは、 aria-flowto 属性を使用してセクション 1 および 3 で定義しています。

<pre id="log"></pre>

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

html

<div id="section1" class="section" aria-flowto="section3">
  <h2>セクション 1</h2>
  <p>通常フローの最初のセクション。セクション 3 は代替フローです。</p>
  <a href="#section2">セクション 2 へジャンプ（通常フロー）</a>
</div>

<div id="section2" class="section">
  <h2>セクション 2</h2>
  <p>通常フローの 2 番目のセクション。</p>
  <a href="#section3">セクション 3 へジャンプ（通常フロー）</a>
</div>

<div id="section3" class="section" aria-flowto="section1">
  <h2>セクション 3</h2>
  <p>
    通常フローの 3 番目のセクション。セクション 1 は代替フローです。
  </p>
</div>

JavaScript

コードはまず ariaFlowToElements に対応しているかどうかを調べ、対応している場合はその値をログに記録します。その後、セクションを順に反復処理し、セクションの id、aria-flowto 属性の値、および ariaFlowToElements プロパティの値をログに記録します。

const logElement = document.querySelector("#log");
function log(text) {
  logElement.innerText = `${logElement.innerText}${text}\n`;
  logElement.scrollTop = logElement.scrollHeight;
}

// ariaFlowToElements の機能検出
if ("ariaFlowToElements" in Element.prototype) {
  const sections = document.querySelectorAll(".section");
  sections.forEach((sectionDivElement) => {
    log(`${sectionDivElement.id}`);
    log(` aria-flowto: ${sectionDivElement.getAttribute("aria-flowto")}`);
    log(" ariaFlowToElements:");
    // 配列のそれぞれの要素の ID を取得
    sectionDivElement.ariaFlowToElements?.forEach((elem) => {
      log(`  id: ${elem.id}`);
    });
  });
} else {
  log("element.ariaFlowToElements: ブラウザーが対応していません");
}

結果

下記のログ出力するものは、それぞれのセクション（id で識別）と、アクセシビリティツールによって選択される可能性のある対応するフロー先要素IDを表示させています。ここで注意すべき点は、属性とプロパティが同一のフロー先要素を識別していることです。

仕様書

Specification
Accessible Rich Internet Applications (WAI-ARIA) # dom-ariamixin-ariaflowtoelements

ブラウザーの互換性

Help improve MDN

Learn how to contribute

This page was last modified on ⁨2025年9月25日⁩ by MDN contributors.

View this page on GitHub • Report a problem with this content