`require-dialog-autofocus`

show-modal コマンドで表示される <dialog> 要素に、autofocus 属性を持つ子孫要素（または自身）が必要です。

showModal() でモーダルダイアログが表示される際、ブラウザはダイアログフォーカスステップを実行します。autofocus がない場合、<dialog> 要素自体にフォーカスがフォールバックします。動作上は問題ありませんが、アクセシビリティ上望ましくありません。スクリーンリーダーのユーザーがダイアログの内容を見落とす可能性があり、キーボードユーザーはインタラクティブな要素に到達するために余分なタブ操作が必要になります。

著者は、ダイアログが開いた後にユーザーがすぐに操作することが期待される子孫要素に、autofocus属性を使用すべきである。

HTML Living Standard: dialog要素より引用

このルールは Invoker Commands API を使用してモーダルダイアログを静的に検出します。command="show-modal" と commandfor で <dialog> 要素を参照する <button> がある場合、そのダイアログがモーダルとして表示されることを示します。

[!WARNING] デフォルトの重大度は warning です。HTML仕様では autofocus の使用は「推奨（should）」であり「必須（must）」ではないためです。autofocus がなくても、ダイアログフォーカスステップのフォールバックによりダイアログ要素またはその最初のフォーカス可能な子孫にフォーカスが移動します。

[!NOTE] このルールは Invoker Commands API（command/commandfor 属性）に依存しています。この API を使用していない場合（例: JavaScript で dialog.showModal() を呼び出してダイアログを開く場合）、このルールは違反を検出しません。Invoker Commands API は2026年初頭に Baseline サポートを達成しました。

ルール詳細

❌ 不正

<button command="show-modal" commandfor="my-dialog">開く</button>
<dialog id="my-dialog">
  <p>このダイアログには autofocus 要素がありません。</p>
  <button command="close" commandfor="my-dialog">閉じる</button>
</dialog>

⭕ 正しい

<!-- 子孫の input に autofocus -->
<button command="show-modal" commandfor="my-dialog">開く</button>
<dialog id="my-dialog">
  <input type="text" autofocus />
  <button command="close" commandfor="my-dialog">閉じる</button>
</dialog>

<!-- 子孫の button に autofocus -->
<button command="show-modal" commandfor="my-dialog">開く</button>
<dialog id="my-dialog">
  <button autofocus command="close" commandfor="my-dialog">閉じる</button>
</dialog>

<!-- dialog 自身に autofocus -->
<button command="show-modal" commandfor="my-dialog">開く</button>
<dialog id="my-dialog" autofocus>
  <p>インタラクティブ要素のないコンテンツ。</p>
</dialog>

スコープ

このルールは command="show-modal" を持つ <button> から参照される <dialog> 要素のみをチェックします。他の command 値（close、toggle-popover など）は対象外です。

JavaScript で showModal() を呼び出してプログラム的に開かれるダイアログや、宣言的なトリガーのないダイアログはチェックされません。Invoker Commands API を使用していないプロジェクトでは、このルールは違反を報告しません。

commandfor で参照される非 dialog 要素もスキップされます。command 値の比較は HTML 仕様に従い大文字小文字を区別しません。

既知の制限事項

JavaScript で開かれるダイアログ: Invoker Commands API を使用せず JavaScript の dialog.showModal() で開かれるダイアログは、静的解析では検出できません。
動的な autofocus: JavaScript で動的に autofocus を追加するケース（例: element.setAttribute('autofocus', '')）は検出できません。
フォーカス配置の適切性: このルールは autofocus が「存在するか」のみをチェックし、「最も適切な要素に配置されているか」はチェックしません。初期フォーカスの配置ガイダンスについては WAI-ARIA APG: モーダルダイアログパターンを参照してください。

Interface

{
  "require-dialog-autofocus": boolean
}

Default Severity

warning

ルール詳細​

❌ 不正​

⭕ 正しい​

スコープ​

既知の制限事項​

関連​

Interface​

Default Severity​