tabキー周辺のUI/UXについて

前段

今週、フォーム系のUIを実装していて、tabキーの挙動について色々と考えることがあったのでまとめました。

この記事の内容

• tabキーの基本
• tabindexについて
• UIライブラリのtabキー対応
• tabキーのcss

tabキーの基本

UIを操作する際に、マウス以外の操作手段として、tabキーでの操作があります。

tabキーで出来ることは、主に以下になります。

• UIに対してフォーカスを当てる

• フォーム系UIの操作を行う（tabキー + 矢印キーやSpaceキー）

tabキーでの操作は、マウスと比較とすると補助的なものになりますが、正しく設定できているとアクセシビリティを高める効果があります。
ちなみに、テキストボックス以外のフォームUIのtabキーでの操作は少し癖があり、これはそもそも古から引き継いでいるブラウザのバグなんじゃないか？と思える程でした。
すべて tabキー + Enterキーで統一してくれればよいのに・・・。
実装に大きく関係するのは、tabindex属性です。

tabindexについて

tabindexは、HTML 4.0以降各種ブラウザでサポートされており、タブフォーカスを行うかどうかやフォーカスする順序などを設定することが可能です。

tabindexの使い方に関しては、大きく3つあります。

• tabindex="0" を指定
  • タブフォーカスが適用されます
  • タブオーダーに関しては、ブラウザが決定します
  • 通常だと、DOMの出現順にタブオーダーが割り当てられます
• tabindex="-1" 等の負の数を指定
  • タブフォーカスが適用されません
  • タブオーダーにも関与しません
• tabindex="1" 等の負の数を指定
  • タブフォーカスが適用されます
  • 値が大きい順にタブオーダーが割り当てられます

inputタグやselectタグ等のフォーム要素は、特にtabindexを指定しなくてもデフォルトでタブフォーカスが適用されています。

tabindexを利用する場合のベストプラクティスは以下です。

• 0もしくは負の数のみを利用
• 1以上の正の数は利用しない

tabindexに正の数が適用されだすと、管理が複雑になり、カオスになる為、出来る限り使用しない方が良いです。

UIライブラリのtabキー対応

今回、弊社のデザインシステムのフォーム系UIでタブフォーカスが考慮出来ていないものがいくつかあったので、タブフォーカスの実装を組み込むにあたって、BootstrapとMUIを参考にしてみました。

Bootstrap

input

select

checkbox

radio button

MUI

input

select

checkbox

radio button

やはり有名所のUIライブラリは、しっかりとタブフォーカスの実装が行われています。
MUIに関しては、checkboxやradio buttonに対して、フォーカスした際によく見ないと分からないマイクロアニメーションが適用されており、流石だなと感じました。

tabキーのcss

タブキーの場合のみのフォーカスを実装したい場合、:focus-visibleという疑似要素があります。
:focusと併用して利用することにより、マウスによるフォーカス時とキーボードによるフォーカス時の挙動を変更することが可能です。

MUIに関しては、高度なUIを実装しているので、:focus-visibleの実装ではなく、tabキーによるフォーカスをjsで切り替えている様でした。

まとめ

tabindexは基礎的なものですが、向き合ってみると意外と奥が深く、考慮出来ているサイト、サービスと出来ていないそれとではUI/UXの品質の差がある様に感じられました。
フォーム系のみならず、なにかしらUIを組む際には、意識できると良いですね！
良きtabindexライフを〜！