ディスクロージャーとタブ：適切な方を選ぶ

タブとアコーディオンはどちらもコンテンツを表示・非表示にするため、混同されがちです。誤ったパターンを選ぶと、ユーザーが混乱することがあります。

タブセットは、互いに排他的なビューを表示します。1つのパネルを開くと、他のパネルは閉じます。ユーザーが一度に1つの内容を比較する場合に適しています。

アコーディオンでは、複数のセクションを同時に開いたままにできます。2つの回答を並べて読みたいことがある、長いFAQページに適しています。

単独の表示・非表示機能はディスクロージャーです。ボタン1つとリージョン1つで構成され、任意の詳細情報を1つだけ表示したい場合に使います。

これらのパターンでは異なるARIAを使います。タブにはtablistと矢印キーが必要ですが、ディスクロージャーやアコーディオンにはaria-expanded付きのボタンだけが必要です。

タブは、各ラベルが短く、上部の横一列に収まる場合に最も適しています。ラベルが長い場合は、縦に積み重なるアコーディオンのほうが読みやすくなります。

画面が狭いと、横一列のタブが収まりきらないことがよくあります。アコーディオンは自然に縦に並ぶため、小さい画面ではパターンを切り替えるチームも多くあります。

セクションが独立しているかを考えます。複数のセクションを一緒に読むメリットがあるならアコーディオン、1つのビューだけを表示するならタブを選びます。

どちらのパターンも、スクロールするだけの単純なリンクで作るのは避けてください。リンクは移動するためのものですが、これらのコントロールはコンテンツを切り替えるため、ボタンのセマンティクスが必要です。

どちらのパターンにするか迷う場合は、よりシンプルな方を選んでください。ディスクロージャーやアコーディオンは、完全なタブウィジェットよりもARIAを誤りにくくなります。

適切な選択は見た目ではなくコンテンツによって決まります。ユーザーがどのように読み、比較する必要があるかを考え、それに合うパターンを選びます。

ユーザーがFAQの複数の回答を同時に読みたいことがよくあります。どのパターンが最も適しているでしょうか。

コンテンツの要件に基づいて選ぶ方法を学びました。1つずつ表示するならタブ、複数を開くならアコーディオン、1つだけ表示するならディスクロージャーです。