`neighbor-popovers`

ポップオーバートリガーと対応するターゲットが隣接していない場合に警告します。

可能な限りいつでも、ポップオーバー要素がDOM内のトリガー要素の直後に配置されるようにする。そうすることで、ポップオーバーが、スクリーンリーダーなどの支援技術のユーザーに対して、プログラム上の論理的な読み上げ順序で公開されるようになる。

HTML Living Standard 6.12.1 The popover target attributesより引用

このルールは以下の両方を使用してポップオーバートリガーを検出します：

popovertarget属性
Invoker Commands API（ポップオーバー関連のcommand値（toggle-popover、show-popover、hide-popover）を持つcommandfor属性）

❌ 間違ったコード例

<button popovertarget="foo">トリガー</button>
<p>知覚要素がトリガーとそのターゲットの間に存在しています。</p>
<div id="foo" popover>ポップオーバー</div>

<button command="toggle-popover" commandfor="foo">トリガー</button>
<p>知覚要素がトリガーとそのターゲットの間に存在しています。</p>
<div id="foo" popover>ポップオーバー</div>

<div>
  <button popovertarget="foo">トリガー</button>
  <input type="text" /><!-- フォーカス可能要素は知覚要素と見做します。 -->
</div>

<div>
  <div>
    <div id="foo" popover>ポップオーバー</div>
  </div>
</div>

✅ 正しいコード例

<button popovertarget="foo">トリガー</button>
<div id="foo" popover>ポップオーバー</div>

<button command="toggle-popover" commandfor="foo">トリガー</button>
<div id="foo" popover>ポップオーバー</div>

<div>
  <button popovertarget="foo">トリガー</button>
</div>

<div>
  <div>
    <div id="foo" popover>ポップオーバー</div>
  </div>
</div>

<div>
  <button popovertarget="foo">トリガー</button>
</div>

<div>
  <div>
    <img src="image.png" alt="" /><!-- 画像にアクセシブルな名前がない場合は非知覚要素と見做します。 -->
    <div id="foo" popover>ポップオーバー</div>
  </div>
</div>

Interface

{
  "neighbor-popovers": boolean
}

Default Severity

error

Interface​

Default Severity​

Interface

Default Severity