aria-hidden要素にはフォーカス可能な要素が含まれていません

各属性内の値を正しいスペリングにし、有効な値に一致させることで問題を修正します。適切な 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>

• disabled を用いてフォーカス不可能にしたコンテンツ。

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

• 一度先祖で true に設定された aria-hidden は、リセットできません。

  <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">Link</a>
  </div>

• 間違って無効化されたフォーカス可能なフォーム欄。

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

• 一度先祖で true に設定された aria-hidden は、リセットできません。

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

• tabindex でフォーカス可能にしたコンテンツ。

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

• フォーカス可能な summary 要素。

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