2022/6/24blog_admin|2022年06月24日フロントエンド41Twitter0Facebook1B!Bookmark0Pocketこんにちは、フロントエンドチームの谷(@high_g_engineer)です。今週のフロントエンド定例の内容を記載します。フロントエンド定例について、以前の記事(ランサーズのフロントエンドチームが取り組んでいること)でお伝えしたのですが、毎週金曜日に開催しており、実際の業務で取り組んでいることや気になった技術情報等をシェアしあう会になっています。以下、今週の内容です。tabキー周辺のUI/UXについて今週、フォーム系のUIを実装していて、tabキーの挙動について色々と考えることがあったのでまとめました。この記事の内容tabキーの基本tabindexについてUIライブラリのtabキー対応tabキーのcsstabキーの基本UIを操作する際に、マウス以外の操作手段として、tabキーでの操作があります。tabキーで出来ることは、主に以下になります。矢印キーやSpaceキー)tabキーでの操作は、マウスと比較とすると補助的なものになりますが、正しく設定できているとアクセシビリティを高める効果があります。ちなみに、テキストボックス以外のフォームUIのtabキーでの操作は少し癖があり、これはそもそも古から引き継いでいるブラウザのバグなんじゃないか?と思える程でした。Enterキーで統一してくれればよいのに・・・。実装に大きく関係するのは、tabindex属性です。4.0以降各種ブラウザでサポートされており、タブフォーカスを行うかどうかやフォーカスする順序などを設定することが可能です。tabindexの使い方に関しては、大きく3つあります。等の正の数を指定タブフォーカスが適用されます値が大きい順にタブオーダーが割り当てられますinputタグやselectタグ等のフォーム要素は、特にtabindexを指定しなくてもデフォルトでタブフォーカスが適用されています。tabindexを利用する場合のベストプラクティスは以下です。0もしくは負の数のみを利用1以上の正の数は利用しないtabindexに正の数が適用されだすと、管理が複雑になり、カオスになる為、出来る限り使用しない方が良いです。今回、弊社のデザインシステムのフォーム系UIでタブフォーカスが考慮出来ていないものがいくつかあったので、タブフォーカスの実装を組み込むにあたって、BootstrapとMUIを参考にしてみました。buttonやはり有名所のUIライブラリは、しっかりとタブフォーカスの実装が行われています。buttonに対して、フォーカスした際によく見ないと分からないマイクロアニメーションが適用されており、流石だなと感じました。tabキーのcssタブキーの場合のみのフォーカスを実装したい場合、:focus-visibleという疑似要素があります。:focusと併用して利用することにより、マウスによるフォーカス時とキーボードによるフォーカス時の挙動を変更することが可能です。Safariでは未サポートのプロパティになります。MUIに関しては、高度なUIを実装しているので、:focus-visibleの実装ではなく、tabキーによるフォーカスをjsで切り替えている様でした。参考記事Tabキーによる移動順序を指定するhttps://www.tagindex.com/html5/attribute/tabindex.htmltabindexで消耗していた話https://kiririmode.hatenablog.jp/entry/20170317/1489704147ReactのContextを使ったtabindex制御https://log.pocka.io/ja/posts/react-context-api-tabindex/:focus-visibleについてhttps://evoworx.dev/blog/focus-visible/2021年1月〜3月に各ブラウザでfocus-visible周りの動きがあったのでまとめたhttps://zenn.dev/sakito/articles/c5034684f2266c次回の更新予定は、7/1(金)になります!前回の定例内容はこちらから確認可能ですのでご興味いただければ下記のリンクから閲覧いただければと思います。©Lancers,inc.。