キーボードのタブ切り替えの遷移順を任意の順番に設定

[ ID : 992 ]
キーボードのタブ切り替えの遷移順を任意の順番に設定

概要

キーボードのタブ操作でのフォーカス移動をtabindex属性を使って任意の順番にする

要件

  • マウスのカーソル移動だけでなくキーボードのタブ操作でフォーカス移動ができる
  • アクセシビリティ向上に繋がる

検証ブラウザ

  • Microsoft Edge(最新)
  • IE11
  • Google Chrome(最新)
  • Safari(最新)
  • Firefox(最新)

実装方法


HTML

<ul>
    <li>
        <a href="#" tabindex="2">tabindex2</a>
    </li>
    <li>
        <a href="#" tabindex="1">tabindex1</a>
    </li>
    <li>
        <a href="#" tabindex="4">tabindex4</a>
    </li>
    <li>
        <a href="#" tabindex="3">tabindex3</a>
    </li>
    <li>
        <a href="#" tabindex="5">tabindex5</a>
    </li>
</ul>

この記事をシェアする

新着記事

全ての記事を見る

KONOCODEのメリット 無料会員登録