ARIAの非表示要素は、フォーカス可能であるべきではなく、またフォーカス可能な要素を含むべきではありません

各属性内の値が正しく入力され、有効な値に対応していることを確認して、問題を修正してください。適切なARIAロール、状態、プロパティを使用します。

次の例は、要素にフォーカス可能な要素が含まれていないというルールに準拠しています： aria-hidden="true"

• デフォルトではコンテンツにフォーカスできません。

  <p aria-hidden="true">Some text</p>

• CSSによって非表示になっているコンテンツ。

  <div aria-hidden="true">
  	 <a href="/" style="display:none">Link</a>
  	 </div>

• tabindexによってフォーカスできなくなったコンテンツ。

  <div aria-hidden="true"> 
  	<button tabindex="-1">Some button</button>
  	</div>

• 無効によりフォーカスできなくなったコンテンツ。

  <input disabled aria-hidden="true" />

• aria-hidden 祖先でtrueに設定するとリセットできません。

  <div aria-hidden="true"> 
  	<div aria-hidden="false"> 
  	<button tabindex="-1">Some button</button>
  	 </div>
  	 </div>

次の例は、 aria-hidden="true" 要素にフォーカス可能な要素が含まれていないというルールに違反しています。

• フォーカス可能なオフスクリーンリンク。

  <div aria-hidden="true"> 
  	<a href="/" style="position:absolute; top:-999em">リンク</a></div>

• フォーカス可能なフォーム フィールドが誤って無効になっています。

  <div aria-hidden="true"> 
  	<input aria-disabled="true" />
  	</div>

• aria-hidden 祖先でtrueに設定するとリセットできません。

  <div aria-hidden="true"> 
  	<div aria-hidden="false"> 
  	<button>Some button</button> 
  	</div>
  	</div>

• tabindexを通じてフォーカス可能なコンテンツ。

  <p tabindex="0" aria-hidden="true">Some text</p>

• フォーカス可能なサマリー要素。

  <details aria-hidden="true">
  	 <summary>Some button</summary>
  	  <p>Some details</p>
  	  </details>