aria-owns

全ての要素は、別の要素の親、兄弟、または子です。 HTML 要素とテキストノードで構成されるドキュメントオブジェクトは、DOM ツリーの基礎となります。アクセシビリティオブジェクトモデル（AOM）は適切に構築された DOM に依存して、支援技術がドキュメントの内容に関する意味のある情報をユーザーに伝えられるようにします。

JavaScript ではコンテンツを変更でき、CSS ではレイアウトを変更できるため、画面に表示されるレイアウトが、基になる DOM 構造と異なる場合があります。このような場合、aria-owns 属性を使用して、DOM を使用する支援技術にとって意味のある関係を再構成できます。

要素が視覚的に関連しているように見えても DOM では関連付けられていない場合、aria-owns 属性を使用すると、支援技術で使用するためにアクセシビリティレイヤーで画面に表示される関係を作成できます。aria-owns を含める唯一の理由は、DOM 構造で親/子の文脈関係を提供できない場合に、支援技術に親/子の文脈関係を公開することです。

「所有している要素」とは、要素の DOM 祖先です。要素が視覚的、機能的、または文脈的に要素を「所有している」（祖先である）ように見えても、DOM では実際には要素の祖先ではない場合は、その関係を作成するために aria-owns を含めます。子ではない所有されている要素を参照して所有している要素に aria-owns 属性を追加し、要素を子として扱う必要があることを支援技術に伝えます。

aria-owns を用いて 1 つ以上の要素の ID を参照することで、任意の要素が他の要素を「所有」できるようになります。aria-owns 属性の値は、ドキュメント内の 1 つ以上の要素の ID を参照する、スペースで区切られた ID 参照リストです。

aria-owns を DOM 階層の代わりに使用しないでください。関係が DOM で表現される場合は、aria-owns を使用しないでください。

子要素は、デフォルトではその親 DOM によって所有されます。この場合、aria-owns は使用しないでください。aria-owns 属性を使用して、既存の子要素を異なる順序に並べ替えることは避けてください。

aria-owns を使用する場合は、フォーカス順序を管理 してください。視覚的なフォーカス順序がこの支援技術の読み取り順序と一致していることを確認してください。

aria-owns の使用例として、視覚的には親メニューの近くに配置されているが、視覚的な表示に影響するため親メニュー内の DOM にネストできないポップアップサブメニューが挙げられます。この場合、サブメニューを親メニューの子としてスクリーンリーダーに提示するために aria-owns を使用します。

要素に aria-owns と DOM の子要素の両方がある場合、子要素の順序は次のようになります:

1. 最初に実際の DOM の子要素
2. 次に、aria-owns で参照される要素

この順序は、aria-owns の値に実際の子の DOM への ID 参照を含めることによって変更できます。

フレックスレイアウトまたはグリッドレイアウトの一部である order プロパティを使用すると、フレックスアイテムとグリッドアイテムの順序を変更して、ソースドキュメントの順序とは異なる順序で表示し、要素の論理的な順序に相違が生じる可能性があります。アクセシビリティレイヤーを CSS の order プロパティで作成された順序変更に合わせて順序付けしたくなるかもしれませんが、order プロパティと aria-owns 属性の両方を避けるのが最善の選択肢です。

所有されている要素の所有者が 1 つだけであることを確認してください。1 つの要素の id を他の複数の要素の aria-owns 属性に指定しないでください。要素の所有者は 1 つだけです。

id list

現在の要素が所有する要素を参照する 1 つ以上の ID 値のスペース区切りリスト

すべてのロールで使用されます。

• aria-controls
• aria-owns browser support