Safariでのみ、Tabキーによるフォーカス移動の挙動がおかしい

最終更新：2025年3月25日

タグ：キーボード操作

質問/問題

SafariでWebページを表示して、TabキーやShift+Tabキーでフォーカスを移動すると、本来フォーカスされるべきなのにスキップされる要素がある。Google Chromeや他のブラウザーでは適切にフォーカス移動できているが、コンテンツ側で何らかの対応が必要か。

回答/結論

デフォルト設定でSafariを使用している場合の挙動なので対処は不要。option+TabとShift+option+Tabキーを使用すると他のブラウザーと同様の挙動になる。

解説

デフォルト設定でSafariを使用している場合、リンクやボタンなど、本来TabキーやShift+Tabキーでフォーカスを移動できるはずの要素の一部に、フォーカスが移動できません。代わりに、option+TabキーやShift+option+Tabキーを使用すると、他のブラウザーと同様にフォーカスを移動できます。

フォーカス順序のチェックをする場合、通常は他のブラウザーで確認して問題なければ問題はありません。もしSafariでチェックを実施する必要がある場合は、option+TabキーとShift+option+Tabキーを使用して確認します。

なお、macOS上のSafariを使用している場合は、以下のいずれかの設定をすることで、TabキーとShift+Tabキーの挙動が他のブラウザーと同様になります。

  • Safariの設定 ‣ 詳細で、「Tabキーを押したときにWebページ上の各項目を強調表示」にチェックを入れる

  • macOSの環境設定 ‣ アクセシビリティ ‣ キーボードで「フルキーボードアクセス」を有効にする

関連ガイドライン項目

関連チェック内容

チェックID：0171

Tab/Shift+Tabキーによるフォーカス移動時の挙動は以下のすべてを満たしている：

  • フォーカス・インジケーターまたはそれを代替する表示がある

  • 自動的に次のような挙動が発生しない：

    • フォームの送信

    • レイアウトの変更

    • ページの遷移

    • モーダル・ダイアログの表示

    • 表示内容の大幅な変更

チェックID：0172

フォーカスの移動時、文脈、レイアウト、操作手順に即した自然な順序で、以下のコンポーネント間をフォーカスが移動する。

  • リンクとボタン

  • フォーム・コントロール（エディット・ボックス、チェックボックス、ラジオボタンなど）

  • その他、マウスやキーボード、タッチによる操作を受け付けるすべてのもの

関連する参考情報