Safariでのフォーム入力でtabキーを使ってフォーカス移動した時、チェックボックス・ラジオボタン・リンク・ボタンにフォーカスが移動しないようだったので、備忘録としてメモしておきます。
Safariの16.5.1で確認しています。
サンプルコード
例として適当なフォームを用意します。
<form> <div class="form-item"> <label for="name">名前</label> <input type="text" id="name" name="name"> </div> <div class="form-item"> <label for="area">エリア</label> <select id="area" name="area"> <option>東京</option> <option>大阪</option> </select> </div> <div class="form-item"> 連絡 <label for="tel"><input type="checkbox" name="contact[]" value="電話" id="tel"> 電話</label> <label for="mail"><input type="checkbox" name="contact[]" value="メール" id="mail"> メール</label> </div> <div class="form-item"> 時間帯 <label for="hour-1"><input type="radio" name="hour" value="8:00〜12:00" id="hour-1"> 8:00〜12:00</label> <label for="hour-2"><input type="radio" name="hour" value="12:00〜16:00" id="hour-2"> 12:00〜16:00</label> <label for="hour-3"><input type="radio" name="hour" value="16:00〜20:00" id="hour-3"> 16:00〜20:00</label> <label for="hour-4"><input type="radio" name="hour" value="20:00〜24:00" id="hour-4"> 20:00〜24:00</label> </div> <div class="form-item"> <label for="content">内容</label> <textarea id="content" name="content"></textarea> </div> <div class="form-item"> <a href="">リンク</a> </div> <div class="form-item"> <button>ボタン</button> </div> </form>
このフォームをSafariのtabキーで操作した際、1行テキストとセレクトボックス、テキストエリアにはフォーカスが移動しますが、チェックボックス・ラジオボタン・リンク・ボタンにはフォーカスが移動しませんでした。
フォームのデモページ
上記でフォーカスが移動しなかった要素にも移動したい場合、デフォルトだとOption + Tabキーでの移動になるようです。
この設定は Safari > 環境設定 > 詳細 > アクセシビリティ の項目で、「Tabキーを押したときにWebページ上の各項目を強調表示」にチェックを入れると変更できます。
コメントが承認されるまで時間がかかります。