aria-owns-valid

aria-ownsは各要素に所有者を1つだけ与える必要があり、所有者の祖先を所有させてはいけません

automaticWCAG 1.3.1, 4.1.2 (A)確度:high重大度:seriousrobust

どの要素も複数のaria-ownsで示されていないこと、そしてどのaria-ownsも要素自身やその祖先を示していないことを確認します。

適用範囲:ページが表示している、同じツリー内の要素を少なくとも1つ示すaria-ownsを持つ要素です。

期待される結果:WAI-ARIA:要素の所有者は1つだけなので、そのidが含まれるaria-ownsは1つまでであり、要素は自身を含む要素を所有できません。

  • 2つ以上のaria-ownsで示されている要素:fail(ARIA_OWNS_DUPLICATE)。所有される要素に対して報告します。ブラウザーは順序に従ってそれを1つの所有者に与えるため、ほかの所有者が示す構造は失われます。
  • 要素自身またはその祖先を示すaria-owns:fail(ARIA_OWNS_ANCESTOR)。所有者に対して報告します。循環になるため、ブラウザーはその所有関係を無視します。
  • それ以外:pass。

検出結果が報告する内容:

  • ownerCount:ARIA_OWNS_DUPLICATEの場合、所有される要素をaria-ownsで示している要素の数です。
  • ownedId:示されたidです。

これらのdata.detailsのフィールドは、検出結果を読み解き、再現するのに役立ちます。reasonCodeと、出力スキーマで安定と明記された一部のフィールドを除き、安定した契約ではありません。マイナーリリースで名前が変わったり、なくなったりすることがあるため、これらに依存した実装はしないでください。

例

pass
<ul role="list" aria-label="Steps" aria-owns="step-2"><li>Choose a size</li></ul>
<div role="listitem" id="step-2">Pay</div>

リストは、ほかのどのaria-ownsも示していない要素を1つ所有しています。

fail
<div role="list" aria-label="Today" aria-owns="task"></div>
<div role="list" aria-label="Tomorrow" aria-owns="task"></div>
<div role="listitem" id="task">Call the bank</div>

2つのリストが同じ項目を所有しようとしています。ブラウザーはそれを一方にしか与えないため、もう一方のリストの構造は失われます。

ソースコードを見る