送信ボタンの上にリンクがあればtabindex=-1に – 2009年 1月2日

入力フォーム間の移動はマウスで行いますか?tabで移動しますか?

例えばtabでログインフォームを移動していて、IDとパスワードを入力して、送信ボタンを押そうとする時に、送信ボタンの上にリンクがあって、間違ってリンクを押してしまい、とてもストレスを感じたことはありませんか?

年始に興味がわくような話題ではないかもしれませんが、ちょっとしたTIPSに。。


ライブドアさんを例に出して申し訳ないのですが、ライブドアさんのログイン画面には「ID・パスワードを忘れた方」というリンクがあります。

パスワードを入力した後にtabを押すと、このリンクにカーソルが当たります。フォーム間の移動をtabで行い、最終フォームに来ると「tab + Enter」が癖になっている人に取って、このリンクを間違って押してしまうことが結構あります。リンク後に戻ってくると、パスワード内容は消えてしまっていて、小さなストレスを感じます。。

これを防ぐ方法としておすすめなのが、このリンクにtabindex=-1を指定してあげる方法です。tabindexはタブ順序を明示的に指定するオプションですが、「-1」を指定すると、リンク機能は残したまま、フォーカスが移動しなくなります。

<a href=”https://www.web-20.net/” tabindex=”-1″>web2.0ナビ</a>

さきほどのリンクにtabindex=-1を指定すると、「1→2→3→5」とtabで移動できるようになります。ちょっとしたことですが、離脱率がほんの僅かでも上がるかも?

カテゴリー:技術・開発