ども、コンニチワ。Mac を使い始めてもう何年にもなるのに未だに Windows でのキー操作をして「おうっ！？」ってなっちゃう いぢま。（@ezm_t ）です。にゃー (f・Д・)f
さて、先日、Mac 版 Safari で Tab キーで移動してフォーカスした際のウェブフォームの動作テストってな事をしていたんですが、ラジオボタンやサブミットボタンにフォーカスが移動しなかったんですね。
オイラ普段は Chrome 使ってるし、Safari で Tab キーでの移動の動作確認なんてのも久しぶりだったので、始めは 「"tabindex(*1)" の指定がおかしいんじゃないの？」なんて思ってソースコードを舐め回したりしたんですが問題はなく...。
で、実はこれ、原因はシステム側ではなく Mac 側の設定にあったんです。
って事で、もしかしたら同じように Tab キーでの移動でお困りの方がいらっしゃるかもしれませんので、どこの設定をどうすればいいのかご紹介しておきます。
入力フォームでは一気に入力したいからキーボードから手を離したくないぜ！ってな貴方のお役に立てればコレ幸いにございます。
*1 【tabindex】Tab キーを押した際の移動順を指定する HTML タグの属性（attribute）
デフォルトではテキストボックスとセレクトメニューのみ
▲ 試しにこんな入力フォームを作ってみました。
このフォームでは "tabindex" の指定をしていないので、本来なら上から順番にフォーカスが移動するはずです。
では、これを Safari を使って Tab キーでフォーカスの移動をしてみます。
▲ 性別のラジオボタンと「送信する」ボタン「キャンセル」ボタンにフォーカスが移りません。
※ GIF アニメーションにしてありますので対応しているブラウザでご覧ください。
はい、こうなっていたら貴方の Safari も同じようになっているという事なので、Safari の設定を確認してみてください。
まずは Safari のメニューから「Safari」→「環境設定...」を選択して設定画面を開きます。
▲ 環境設定の画面が開いたら、歯車アイコンの「詳細」をクリックします。
ここに「アクセシビリティ」ってな項目があって、「Tab キーを押したときに Web ページ上の各項目を強調表示」というチェック項目があるはずです。
はい、そうです。ここにチェックを入れるんです。
▲ チェックを入れるとすぐ下の注意書きの内容が変わります。
注意書きには「Option + Tab キーを押すと、テキストフィールドとポップアップメニューだけが強調表示されます。」と書かれています。
そうなんです。
ここにチェックを入れていない状態で Tab キーだけで移動しようとすると、テキストフィールドとポップアップメニュー（セレクトメニュー）にしかフォーカスが行かないんです。
で、チェックを入れると逆になって「Option + Tab キー」でテキストフィールドとポップアップメニュー（セレクトメニュー）だけにフォーカスが移動するという訳です。
▲ 設定変更後は全ての要素にフォーカスが移動するようになります。
これでキーボードから手を離す事なく効率よく入力出来るようになりましたね。
勿論、前述した動作確認も無事完了しております。(*｀･ω･)ゞﾃﾞｼ
※ GIF アニメーションにしてありますので対応しているブラウザでご覧ください。
ウィンドウやダイアログも Tab キーで移動したい場合
前述した Safari の設定はあくまでブラウザ上に表示された入力フォームでのフォーカス移動の設定になります。
ブラウザの操作ボタンやその他のウィンドウ、ダイアログでも Tab キーを使ってフォーカスの移動をしたい場合は Mac の「システム環境設定」から行います。
▲ システム環境設定の「キーボード」を選択します。
▲ キーボード設定画面の「ショートカット」タブを選択すると、画面下部に「フルキーボードアクセス」という項目があります。
ここで「すべてのコントロール」を選択するとブラウザの操作ボタンやダイアログのボタンなどへのフォーカスも Tab キーで移動出来るようになります。
因みに、前述した Safari の設定を変更しなくても、ここで設定すれば入力フォームのフォーカス移動も全ての要素が対象になります。
ただ、そうすると入力フォーム以外の場所にフォーカスが移って入力作業がチョットだけ面倒になったりもします。
入力フォームだけでウィンドウやダイアログは Tab キーで移動したくないという場合はここで設定せずに Safari の方を設定してください。
ま、実際に両方試してみて、自分に合った設定をするのが一番ですね。
Tab キーによるフォーカス移動の設定は以上です。
もし、貴方も Tab キーで移動出来ないぞってな場合には上記の設定を確認してみてください。
さてさて、今回の記事は貴方のお役に立てましたでしょうか...。
関連リンク
[スポンサードリンク]
