3
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

タブオーダーでエンジニアのレベルを測る

Last updated at Posted at 2022-02-19

ということを十数年前はやっていました。
今はデフォルトでいい感じなので、あまり意識されません。

Tabキーによるフォーカスの移動

webアプリでもネイティブアプリでも、TabまたはShift+Tabによりフォーカスを移動する事ができます。

Qiitaのトップでやるとこんな感じでした。
qiitaanimation.gif
この、フォーカスが移動する順番をtab orderといいます。

tab order

tab orderは別名tab indexとも呼ばれます。
言語やフレームワークによって呼び方が違うのかと思いましたが、あまり調べていません。
知っている方はコメントください。
このtab orderがユーザーの直観にマッチしているか否かで、操作が気持ちい物になるか、気持ち悪い物になるかの分かれ目となります。(主観)

ネイティブアプリ

MFCやWPF等ではtab orderはいい感じにはならず、デフォルトではコントロールの追加順に割り振られます。
MFCでは手動でtab orderを調整します。
WPFではxamlの記述順で調整できます。

よって、如何に見た目を整えようとそこに育ちの悪さが出ます。
以下は見た目も悪いですが
mainwindow.gif
フォーカス移動が気持ち悪いですね
今どきのアプリはちゃんとしてるので、いい悪い例を探すのは難しいです。

まとめ

フロントエンド開発ではあまり意識する必要はないでしょう。
古来の日本人よろしく、右上から左下にかけてフォーカス移動したいぜって方は、技術上可能だという事を覚えておいてください。
ランダムに割り振るのも面白い?

古いアプリと出会ったら、タブ移動で遊んでみてください。

ところで

Qiitaのトップページ狭めて検索フォームちっちゃくすると、タブで移動できなかったのはそんなもんですかね。

3
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?