コンポーネント

コンポーネント一覧

• アコーディオン

  アコーディオンは、ユーザーがコンテンツのセクションを展開または折りたたむことができるユーザーインタフェースです。

• インプットテキスト

  インプットテキストコンポーネントは、名前や電話番号など、1行以内のテキストを入力する場合に使用します。

• カード

  カードは、単一の主題に関するコンテンツをまとめて表示するコンテナとなるコンポーネントです。

• 緊急時バナー

  緊急時バナーは、当該ウェブサイトで本来成すべきコミュニケーションを中断してでもファーストビューを占有して注意を促すためのコンポーネントです。

• グローバルメニュー

  グローバルメニューは、利用者を目的のページに誘導したり、コンテンツをわかりやすく表示するためのものです。

• 検索ボックス

  サイト内検索等で使用するコンポーネントです。詳細検索パネルや固定のキーワードで検索できるショートカットパーツを備えています。

• スクロールトップボタン

  スクロールトップボタンは、ページの先頭へ迅速に移動するために使用されます。

• セレクトボックス

  セレクトボックスは、複数の選択肢を提供するフォームコントロールです。

• チェックボックス

  チェックボックスは、複数の項目の中から複数の選択肢を選ぶことを可能にします。

• チップタグ

  アイテム化した任意の情報を、表示・削除しやすくするための要素です。属性やユーザー情報をアイテムにして並べたり削除したりするような場合に有効です。

• チップラベル

  状態や状況を示すキーワードを表示して、情報の分類・整理の効率を向上させるグラフィック要素です。情報リストやテーブルの各行などのステータスを分かりやすく表示したい場合に有効です。

• ディスクロージャー

  ディスクロージャーは、コンテンツのセクション内の任意の範囲を折りたたむことができるユーザーインターフェースです。

• ディバイダー

  ディバイダーは、異なるセクション、コンポーネント、またはコンテンツのグループ間に設けられる視覚的な区切りです。

• テーブルコントロール

  主にデータテーブルにおいて、表示する行や列を絞り込んだり、その他の制御操作を行ったりするための、コントロール群です。

• テーブル／データテーブル

  テーブルは、データや情報を行と列の組み合わせで構造化された表組です。

• テキストエリア

  テキストエリアコンポーネントは、自由記述テキストを入力する場合に使用します。

• ドロワー

  ブラウザ画面の四辺(上下左右端)から展開し、モバイルメニューなどのコンポーネントを格納可能なコンテナです。

• ノティフィケーションバナー

  ウェブサイト全体に関わる、またはページや要素単位における重要度の高い情報を、ユーザーの操作に関わらず、ウェブサイト側からユーザーへ提示する場合に用いる通知バナーです。

• パンくずリスト

  パンくずリストは、ウェブサイトの階層内でユーザーの現在の位置を表示します。

• ハンバーガーメニューボタン

  ハンバーガーメニューボタンは画面スペース資源に制限のある、主にモバイルデバイスで使用されるモバイルメニューを表示するためのトリガーとなるボタンです。

• 日付ピッカー／カレンダー

  日付ピッカーは、日付を選択するためのフォームコントロールとして、入力フィールドおよびカレンダーによって構成されるコンポーネントです。

• プログレスインジケーター

  プログレスインジケーターは、ユーザーのアクションに対して処理進行中であることを通知します。

• ページナビゲーション

  前ページ、次ページなど複数のページに遷移する際にコンテンツ下部に設置します。

• ヘッダーコンテナ

  ヘッダーコンテナは、ヘッダーに含まれるアイテムとして使う、さまざまなコンポーネントが内包されます。

• ボタン

  ボタンは、主にアクション実行またはページ遷移のためのトリガーとして使用します。

• ボトムナビゲーション

  ボトムナビゲーションは2個から5個までの目的地へのアクセスを可能にするものです。

• メガメニュー

  グローバルメニューから呼び出される、メニューリスト以外のコンテンツも内包できる領域が大きい、表示内容の幅的自由度の高いドロップダウンのバリエーションです。

• メニューリスト

  メニューアイテムを束ねたコンポーネントです。ローカルメニューとしてコンテンツエリアに配置したり、ドロップダウンやメガメニューの中などに内包したりして使用します。

• メニューリストボックス

  メニューリストボックスは内容を示すテキストラベルと開閉ステータスを示すアイコンの組み合わせで表現されたオープナーで開閉し、ボックス内にメニューリストを内包します。

• モーダルダイアログ

  ダイアログは、重要な情報を知らせ、決定や選択を求めるコンポーネントです。複数のタスクを含む場合があります。

• モバイルメニュー

  モバイルデバイスなど、タッチスクリーンでのタップ操作を考慮したメニュー用コンポーネントで、ハンバーガーメニューボタン、ドロワーとともに使用されます。

• ユーティリティリンク

  ユーティリティリンクはふつうの横並びリンクリストに近いが、それよりもコンパクトに作られています。

• ラジオボタン

  ラジオボタンは、ユーザーが選択肢の中から1つだけを選択できるようにする場合に使用します。

• ランゲージセレクター

  ランゲージセレクターはユーザーが コンテンツを表示するために優先言語を選択できるようにするユーザーインタフェース要素です。

• リスト

  一般的なリスト要素。HTMLの<ul>要素、<ol>要素に相当します。

• リソースリスト

  リソースリストは、共通した複数の任意情報で構成されたオブジェクトのリストを表示します。

バッジについて

コンポーネントの各ページにおいて、JIS X 8341-3:2016およびWCAG 2.2の達成基準を掲示している箇所では、参照元のドキュメントを略称で記載しています。
また、ガイドラインや解説書へリンクする場合に、WAIC（ウェブアクセシビリティ基盤委員会）による日本語訳があるものについては日本語訳版へリンクしています。日本語訳版が無いものはW3C（World Wide Web Consortium）による英語の原文へのリンクとなります。

• JIS2016 ： このバッジが付与されている達成基準は、JIS X 8341-3:2016に含まれています。なお、JIS X 8341-3:2016はWCAG 2.0と同一内容の規格です。
• WCAG2.2 ： このバッジが付与されている達成基準は、WCAG 2.2に含まれています。