タブ型 UI について考える

タブをクリック/タップすると、JavaScript によって、そのタブに紐づいた情報 (タブパネル) が切り替わり表示されるユーザーインターフェース (UI) があります。限られたスペースで複数のコンテンツを併存させることができ、メタファとしてもわかりやすいと言えます。

タブ型 UI の例

タブ型 UI の例

今回は、このタブ型 UI について、ユーザビリティおよびアクセシビリティの観点から配慮したいことを考えてみたいと思います。

ユーザビリティの観点から配慮したいこと

タブっぽく見えること

言わずもがなですが、タブ型 UI はユーザーにとって「タブっぽく」見えなければなりません。タブなのかボタンなのか微妙な UI を見かけることもありますが、仮にユーザーがそれをタブではなくボタンと認識してしまった場合、クリック/タップしたときの期待 (ページが遷移する) と実際の挙動 (ボタンっぽいタブの下のタブパネル部分が差し替わる) が異なり、ユーザーを混乱させる恐れがあります。

また、タブっぽく見せるためには、タブ自体だけでなく、それに紐づくタブパネルもセットでデザインする必要があります。各タブとタブパネルがひと続きになっているように見えること、タブを選択するとタブパネルが切り替わるように感じられること、が大事です。

たとえば、タブの数が多すぎるなどの理由で、タブの並びが複数の列にわたってしまうと、選択されているタブと対応するタブパネルが離れてしまう恐れがあります。こうなると、タブっぽく見えませんし、ユーザーの認知負荷も高くなって、使いづらいものになります。


選択されたタブが常にタブパネルと近接するように、タブの並びを動的に変えればよいのでは?という意見もあるかもしれませんが、ユーザーの認知負荷をいたずらに高める恐れがあるのでおすすめしません。アクセシビリティの観点でも、WCAG 2.0 (JIS X8341-3:2010) の達成基準 (7.)3.2.3 「一貫したナビゲーション」に抵触します。

タブの並びが複数の列にわたる例。選択されているタブと対応するタブパネルが離れてしまうと、使いづらくなる。

タブの並びが複数の列にわたってしまう例

タブの並びが不自然でないこと

タブ型 UI においては、タブの並びが不自然でないことも重要です。ユーザーが数あるタブの中からひとつのタブを選ぶ際に、違和感を感じずスムーズに選択できるようにするためです。

以下を意識するとよいでしょう。

タブの大きさが十分であるあること

タブは、タッチインターフェースでの利用に際して、指で間違いなくタップできるのに十分な大きさを持っている必要があります。スマートフォンやタブレットに限らず、今やタッチインターフェースを備えた PC もあるので、タブのデザインにおいては基本的に指でタップ操作することを基準にしたいものです。タブの大きさが十分であれば当然、マウスやトラックパッドを使っているユーザーにとってもクリックしやすくなります。

また、タブ内のラベルの可読性も重要です。スマートフォンのように小さな画面であっても、ラベルがストレスなく読める程度の文字サイズを確保するようにしましょう。

タブの切り替えに伴うフィードバックが自然であること

タブ型 UI においては、タブの切り替えに伴うフィードバックが自然であることが求められます。以下を意識するとよいでしょう。

上の箇条書きのうち3つ目は、特に、タブのクリック/タップがページ遷移 (ページのリロード) を伴うようなケースで要注意です。タブ切り替えの前後でタブの表示位置が変わってしまうと「どの部分が変わったか」がわかりにくくなり、ユーザーを混乱させる恐れがあるからです。個人的には、ページ遷移を伴う場合はタブ型 UI を採用しないほうがよいと考えています。

アクセシビリティの観点から配慮したいこと

キーボード操作ができること

タブ型 UI は、ポインティング操作 (マウスによるクリックや指によるタップ) での利用が大半になりますが、障害や怪我などでポインティングができない人でも利用できるように、キーボード操作ができるようにします。

一般的にウェブサイトのキーボード操作は [Tab] キーでのフォーカス移動と [Enter] キーでの実行が基本ですが、タブ型 UI の場合、フォーカスの動きが二次元的である (タブ選択という横方向の動きと、選択されたタブに紐づいたタブパネルへのフォーカス移動という縦方向の動きがある) ことに気を付ける必要があります。WAI-ARIA 1.0 Authoring Practices という文書の Design Patterns セクションの Tab Panel (widget) の項を見ると、タブの選択には左右 (および上下) 矢印キーを用い、[Tab] キーは、アクティブなタブおよびそのタブに紐づいたタブパネル内のフォーカス可能な要素にフォーカスを当てるのに用いるという考えかたのようです。

  • Tab – only the active tab is in the tab order. The user reaches the tabbed panel component by pressing the tab key until the active tab title receives focus.
  • Left Arrow – with focus on a tab, pressing the left arrow will move focus to the previous tab in the tab list and activate that tab. Pressing the left arrow when the focus is on the first tab in the tab list will move focus and activate the last tab in the list.
  • Right Arrow – with focus on a tab, pressing the right arrow will move focus to the next tab in the tab list and activate that tab. Pressing the right arrow when the focus is on the last tab in the tab list will move focus to and activate the first tab in the list.
  • Up arrow – behaves the same as left arrow in order to support vertical tabs
  • Down arrow – behaves the same as right arrow in order to support vertical tabs

出典 : WAI-ARIA 1.0 Authoring Practices の Tab Panel (widget) の項 (Characteristic テーブルの「Keyboard Interaction」)

jQuery UI の「Tabs」heydonworks.com の Practical ARIA Example のサンプル (Simple ARIA tab interface) を見ると、上述の WAI-ARIA 1.0 Authoring Practices の考えに近い挙動をします。その一方で、メジャーな HTML/CSS/JavaScript フレームワーク (Bootstrap のタブ UIZurb Foundation のタブ UI) では、タブの選択 (タブ間のフォーカス移動) は矢印キーではなく [Tab] キーを用いる仕様になっています。

タブの選択に矢印キーを使うのか [Tab] キーを使うのか、どちらがスタンダードになるのか流動的ですが、今後の動向を注視しつつ、少なくとも同一サイト内では操作法の一貫性を維持したいところです。

スクリーンリーダーでも利用できること

キーボード操作に加えて、視覚障害者 (スクリーンリーダーのユーザー) でも利用できるようにしましょう。幸い、WAI-ARIA で、タブ型 UI のセマンティクスについて、以下のように設定することができるようになっています。

<ul role="tablist">
<li role="presentation"><a href="#tabpanel1" id="tab1" role="tab" aria-controls="tabpanel1" aria-selected="true">タブ1</a></li>
<li role="presentation"><a href="#tabpanel2" id="tab2" role="tab" aria-controls="tabpanel2">タブ2</a></li>
<li role="presentation"><a href="#tabpanel3" id="tab3" role="tab" aria-controls="tabpanel3">タブ3</a></li>
</ul>

<div id="tabpanel1" role="tabpanel" aria-labelledby="tab1">タブパネル1</div>
<div id="tabpanel2" role="tabpanel" aria-labelledby="tab2" aria-hidden="true">タブパネル2</div>
<div id="tabpanel3" role="tabpanel" aria-labelledby="tab3" aria-hidden="true">タブパネル3</div>

マルチデバイス時代における制約

以上、タブ型 UI のユーザビリティおよびアクセシビリティ上の配慮ポイントを挙げてみましたが、マルチデバイスでのウェブ利用が当たり前になっている現在、ウェブサイトにおけるタブ型 UI の採用は、以前より限定的になっている気がしています。スマートフォンでのポートレート表示を考慮した場合、十分な大きさのタブを並べる (とりわけ日本語で、可読性の高いラベルを含む) となると、タブの数は2つないし3つが限度なケースが多いな、という感覚です。

タブ型 UI は他の多くの UI コンポーネントと異なりどうしても二次元的 (機能が縦方向と横方向の両方に展開される) なので、それがマルチデバイス対応においては制約となりますが、逆にユーザーにとっては (タブつまり選択肢が少ない分) 使いやすくなるとも言えるわけで、個人的にはこの制約をポジティブに受け入れたいと考えています。


余談ですが、サイトデザインの議論の中で、PC やタブレットではタブ型 UI を提示して、画面の小さなスマートフォンでは別の UI (たとえばプルダウンメニュー) を提示する、というアイデアが出されることがあります。それは大抵「PC ファースト」な思考の産物で、対処療法的な辻褄合わせのような気がします。基本的に同じインタラクションは (利用デバイスの種類を問わず) 同じ UI で提供すべきで、また概してコンテンツへのアクセシビリティ (多様なアクセス手段の担保) も「ページ内のタブパネルの切り替え」よりも「ページ遷移」のほうが優れているので、そもそもそこまでしてタブ型 UI に固執する必要があるのか、改めて考えてみてもよいかなと思います。