Claude Opus 5.5で商品カルーセルのキーボード操作を修正する

カルーセルのDOM、操作コード、明確な状態ルールをClaude Opus 5.5へ渡し、フォーカスと自動回転を一緒に確認させます。矢印にキー監視を足すだけでは、見えないリンクへのフォーカスや、閲覧中の勝手な再開は直りません。

ウィジェットを変える前に観察する

2016年の開発者の質問は、矢印がマウスでしか動かない例です。古いライブラリの具体例であり、現在の推奨修正ではありません。W3Cカルーセルパターンを参考に、通常のTab移動、可能な限りネイティブな操作部品、回転内容より前の開始・停止操作を用います。

ページ全体の矢印キーを横取りしないでください。前へ・次への基本型とタブ選択型では操作規則が異なります。パッチ前に採用パターンを決めます。

停止を維持する

4枚に各2リンクという例では、3枚を画面外にずらすだけで見えない6リンクがTab順に残り得ます。これは架空レイアウトの計算で、実店舗の監査ではありません。視覚的非表示や`aria-hidden`だけでは完全なフォーカス修正になりません。非アクティブ操作をキー移動から外し、現在のスライドを正しく公開する描画・状態処理が必要です。

`activeIndex`と回転中かどうかを定義します。フォーカスが入ると停止し、次へはフォーカスを移さず索引を変更します。外へ出ても自動再開しません。明示的な開始操作で設計に沿って再開でき、後から外部よりフォーカスが入れば再び停止します。ホバー停止も扱います。本例では動きを減らす設定の利用者は自動回転を初期状態で無効にしますが、開始・停止操作の代わりにはなりません。

完全な実装レビュープロンプト

商品のカルーセルDOM、CSS、状態処理を確認してください。現設計が必要としない限りタブ型ではなく基本の前へ/次へ型にします。順序、リンク、商品ID、選択バリエーションを保ってください。
現スライドと非アクティブスライドの全フォーカス可能要素を一覧にしてください。4枚×各2リンクの教材例では、通常Tab順から外す6リンクを特定します。aria-hiddenだけをキー操作の修正と扱わないでください。
前へ、次へ、開始/停止にはネイティブボタンを使い、起動後もフォーカスをそのボタンに残します。フォーカス進入とホバーで停止し、外へ出ても自動再開せず、明示的な開始を要求します。この設計では動きを減らす設定で初期自動回転を無効にします。
最小パッチ、状態遷移表、試験を返してください。正逆Tab、Enter/Space、次への連打、先頭末尾の循環、フォーカス停止、明示再開、動き軽減時の初期状態を試験します。実行したブラウザー検証と提案を分け、全サイトの認証を主張しないでください。

公式プロンプトガイドに沿って限定した仮想Opusタスクです。小さなローカル状態例は遷移を確認できても、実DOM、スクリーンリーダー、タイマーが正しく動く証明にはなりません。

納品コンポーネントを確認する

外側から正逆Tabで入り、見えるフォーカスと意味のあるボタン名を確認します。次へを繰り返してもフォーカスが消えないことを確かめます。長い商品説明で停止し、通常の切替間隔より長く待ち、明示再開は別に試します。動き軽減設定と実際の小画面でも繰り返します。スクリーンショットだけでなく、ブラウザーと観察順序を記録してください。

**すべてのスライドで矢印操作が必要ですか。** いいえ。採用パターンに従い、ネイティブボタンの通常操作を使えます。

**非アクティブリンクに`tabindex=0`を残せますか。** 画面外で利用できないなら不適切です。見える可用性とキーからの露出を一致させます。

画像はPanelly Studioで用意し、実カルーセルは別途試験します。タッチ領域の間隔はボタン形状の話で、キー動作の証明にはなりません。PanellyとOpusの連携は前提にしていません。

情報源と参考文献

• 一次資料 · stackoverflow.com
• 一次資料 · www.w3.org
• 一次資料 · platform.claude.com