アクセシブルなデザインパターン
アクセシブルなデザイン・実装方法が確立された定番のデザインパターンを紹介します。ここでのアクセシビリティへの配慮とは、キーボードで操作でき、スクリーンリーダーに UI の役割や状態が十分に伝わることを指しています。
ガイドライン「定番のパターン」にあるように、独自の UI を考案しデザインする前に、ここにラインナップされたパターンを利用して目的が達成できるかどうかを検討してください。
利用上の注意
ここにラインナップされたUIを採用する前に、HTMLのみで実現できるかどうかを検討してください。たとえばDisclosureパターンにはdetails要素が使えます。Spinbuttonパターンにはtype="number"を持つinput要素が使えます。
また、HTMLの要素を本来と違う使い方をすることは避けてください。たとえば、チェックボックスを領域の開閉に使わないでください。select要素をメニュー代わり（ソート順の切り替えなど）に使わないでください。
パターン集
| パターン名 | 説明 |
|---|---|
| Accordion (Sections With Show/Hide Functionality) | アコーディオンは、縦に積み重なったインタラクティブな見出しのセットで、それぞれがコンテンツのセクションを表すタイトル、コンテンツスニペット、サムネイルを含んでいます。 |
| Alert | アラートは、ユーザーのタスクを中断させることなく、ユーザーの注意を引くような方法で、簡潔で重要なメッセージを表示する要素です。 |
| Alert and Message Dialogs | アラートダイアログは、重要なメッセージを伝え、応答を得るためにユーザーのワークフローを中断させるモーダルダイアログである。 |
| Breadcrumb | パンくずリストとは、現在のページの親ページへのリンクを階層的に並べたものである。 |
| Button | HTML の button 要素を使用することを強く推奨します。ボタンは、フォームの送信、ダイアログの表示、アクションのキャンセル、削除など、ユーザーがアクションやイベントを実行できるようにするウィジェットです。 |
| Carousel (Slide Show or Image Rotator) | カルーセルは、1 つまたは複数のスライドのサブセットを順次表示することによって、スライドと呼ばれるアイテムのセットを提示します。 |
| Checkbox | WAI-ARIA は、2 種類のチェックボックスウィジェットをサポートしています。デュアルステートでは、ユーザはチェック済みと未チェックという 2 つの選択肢を切り替えられ、トライステートでは、部分チェック済みという第 3 の状態を追加でサポートします。 |
| Combobox | コンボボックスは、入力ウィジェットにポップアップがついたもので、ユーザーが可能な値のコレクションからコンボボックスの値を選択することができます。 |
| Dialog (Modal) | ダイアログは、プライマリウィンドウまたは他のダイアログウィンドウにオーバーレイ表示されるウィンドウです。 |
| Disclosure (Show/Hide) | ディスクロージャーは、コンテンツを折りたたみ（非表示）または展開（表示）することができるウィジェットです。 |
| Feed | フィードは、ユーザーがスクロールすると自動的に新しいコンテンツがロードされるページのセクションです。 |
| Grids : Interactive Tabular Data and Layout Containers | グリッドウィジェットは、矢印キー、ホームキー、エンドキーなどのナビゲーションキーを使って、その中に含まれる情報やインタラクティブな要素を移動できるようにするコンテナです。 |
| Link | HTML の a 要素を使用することを強く推奨します。リンクウィジェットは、リソースへのインタラクティブなリファレンスを提供します。 |
| Listbox | リストボックスウィジェットは、オプションのリストを表示し、ユーザがそのうちの 1 つまたは複数を選択できるようにします。 |
| Menu or Menu bar | メニューは、一連のアクションや機能など、ユーザに選択肢のリストを提供するウィジェットです。 |
| Menu Button | メニューボタンは、メニューを開くためのボタンです。 |
| Meter | メーターは、定義された範囲内で変化する数値のグラフィック表示です。 |
| Radio Group | ラジオグループ ラジオボタンと呼ばれるチェック可能なボタンのセットで、一度に 1 つ以上のボタンをチェックすることができない。 |
| Slider | スライダーは、ユーザーがある範囲内の値を選択するための入力です。 |
| Slider (Multi-Thumb) | マルチサムスライダーは、関連する値のグループ内の値をそれぞれ設定する 2 つ以上のサム（親指）を持つスライダーです。 |
| Spinbutton | スピンボタンは、その値を離散的な値のセットまたは範囲に制限する入力ウィジェットです。 |
| Switch | スイッチは、ユーザーがオンとオフの 2 つの値から 1 つを選択できる入力ウィジェットです。 |
| Table | HTML の table 要素を使用することを強く推奨します。WAI-ARIA のテーブルは、HTML のテーブル要素と同様に、1 つ以上のセルを含む 1 つ以上の行からなる静的な表形式構造で、対話型ウィジェットではありません。 |
| Tabs | タブは、タブパネルと呼ばれるコンテンツのレイヤーセクションのセットで、一度に 1 つのパネルを表示します。 |
| Toolbar | ツールバーは、ボタン、メニューボタン、チェックボックスなどのコントロール群をグループ化するためのコンテナである。 |
| Tooltip Widget | ツールチップはタッチ端末でのアクセスしにくさがあるため非推奨です。ツールチップは、キーボードフォーカスが当たったときや、マウスがその要素に重なったときに、その要素に関連する情報を表示するポップアップである。 |
| Tree View | ツリービューウィジェットは、階層化されたリストを表示します。 |
| Treegrid | ツリーグリッドウィジェットは、編集可能な表形式の情報からなる階層的なデータグリッドを表示する。 |
| Window Splitter | ウィンドウスプリッターは、ウィンドウの 2 つのセクション（ペイン）間の移動可能なセパレータで、ユーザーがペインの相対的なサイズを変更できるようにするものです。 |