チュートリアル
Claude Opus 5.5で商品ダイアログのフォーカスを修正する
Claude Opus 5.5には、商品ダイアログを「開く・移動する・閉じる・戻る」というキーボード状態の連続として確認させます。中央にきれいに表示されても、フォーカスが背面に残ったり、閉じた後にページ先頭へ戻ったりする場合があります。コンポーネントと実測したフォーカスの経路を渡すと、提案を検証できます。
Claude Opus 5.5には、商品ダイアログを「開く・移動する・閉じる・戻る」というキーボード状態の連続として確認させます。中央にきれいに表示されても、フォーカスが背面に残ったり、閉じた後にページ先頭へ戻ったりする場合があります。コンポーネントと実測したフォーカスの経路を渡すと、提案を検証できます。
各操作の結果を定義する
| 操作 | 期待する結果 | 記録する証拠 |
|---|---|---|
| 商品仕様を開く | 有用なダイアログ内容にフォーカス | 開いた直後のアクティブ要素 |
| TabとShift+Tab | モーダル内にフォーカスが留まる | 最初と最後の到達可能な操作要素 |
| Escapeか表示された閉じるボタン | ダイアログが閉じる | 閉じた後の表示状態とフォーカス |
| 呼び出し元が消えた後に閉じる | 合理的な次の位置に移る | 代替先と選択理由 |
W3Cのモーダルダイアログパターンは、キーボード移動の範囲とフォーカス復帰を説明しています。通常は呼び出し元へ戻し、その要素が消えた場合は作業の流れに合う位置を選びます。これは動作上の要件であり、通常のオーバーレイに`aria-modal`を付ければ済む話ではありません。
商品仕様のフォーカス経路
仮に、マグカップのページに「仕様」ボタン、長い仕様ダイアログ、外側に「カートに追加」があるとします。開いた際は、下方の最初のリンクへ飛ぶより、`tabindex="-1"`を付けた静的な見出しにフォーカスする方が適切な場合があります。この見出しはプログラムからの対象であり、通常のTab順序に余分な停止位置を追加しません。短い確認なら、関連する操作要素が適切なこともあります。
経路は「仕様 → ダイアログ見出し → 閉じる → お手入れリンク → Tabの循環で閉じる → Escape後に仕様」と記録します。実際の順序は文書次第です。商品切り替えで元のボタンが消えるなら、新商品の見出しや次の関連操作を代替先として記録します。テストを通すためだけに無関係なボタンを選ばないでください。これは仮想的な試験例であり、Opusの実行記録ではありません。
見える閉じるボタンを残します。背景クリックだけでは明示的な終了やキーボード操作を代替できません。新規実装ではネイティブのdialog要素と`showModal()`を確認します。既存ライブラリがある場合は、そのライフサイクルとフォーカスAPIを優先し、競合する独自の制御を重ねないようにします。
修正用の完全なプロンプト
この商品ダイアログのキーボード操作を確認してください。コンポーネント、使用していればダイアログライブラリのバージョン、呼び出し元コード、関連CSS、開く・順方向Tab・逆方向Tab・Escape・閉じるボタンのフォーカス経路を渡します。実行証拠の欠落は不明としてください。
操作、期待フォーカス、観測フォーカスの表を作ってください。初期フォーカス、範囲の制限、終了、復帰を分けて診断します。初期対象が長い静的内容か短い操作ダイアログに適しているか説明します。既存のアクセシブルな名前、見える閉じるボタン、コンポーネントAPIを維持してください。aria-modalだけで背景が操作不能になると仮定しないでください。
現在のライブラリかネイティブdialogを使った最小修正を提案します。呼び出し元が削除された場合の合理的な代替先を明示します。パッチと、通常の終了・呼び出し元削除の両方のキーボード確認手順を返してください。実際のログなしに支援技術で検証済みと言わず、必要性の証拠なしに画面全体を置き換えないでください。Opus公式ガイドは、文脈と明確な要求を渡す際の参照資料です。ここで示すのはレビュー手順であり、モデルが検証に合格したという主張ではありません。
開いた状態だけでなく戻り道も検証する
実際のアプリでキーボードを使い、経路をたどります。繰り返しの開閉、逆方向Tab、最長の内容、呼び出し元を消す状態更新も含めます。各段階でフォーカスが見えるか確認してください。DOMにダイアログがあるだけでは、背景操作の抑止や正しい復帰を証明できません。実施した支援技術の検証にはブラウザと支援技術のバージョンを記録します。
よくある質問
**必ず最初のボタンに移すべきですか？** いいえ。長い構造化内容には静的な開始位置、破壊的な確認には影響の小さい操作が適する場合があります。
**背景クリックで閉じられれば十分ですか？** いいえ。明示的な閉じる操作と、そのダイアログに適した検証済みのキーボード終了経路を残します。
**自動フォーカス検査だけでアクセシビリティを保証できますか？** 特定の回帰は検出できますが、名前、読み順、実際の支援技術の確認を代替できません。
操作修正と広告制作を分ける
ページが使える状態になったら、承認した商品画像とメッセージでPanelly Studioの広告案を作ります。ダイアログ移動ではなく送信失敗なら、別のフォームエラー回復手順を参照してください。ここでPanellyは制作ワークスペースであり、Opus統合を主張していません。
