Safariのtabキーでのフォーカス移動時、チェックボックスやボタンがフォーカスされない

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ページ上の各項目を強調表示」にチェックを入れると変更できます。

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

2024年4月
 123456
78910111213
14151617181920
21222324252627
282930