キーボードでアイテムを開くテスト
Tab を使用してから Enter またはスペースを使用して、各項目を開いたり閉じたりします。タイトルはオープンステータスを示す必要があります。非表示のコンテンツでは、コントロールをタブ順に保つことはできません。
アコーディオン デザインシステム
コンテンツを折りたたんでも、検索や移動が簡単になります。
チェックリストの内容
確認の進捗
01
構造と意味
使用状況に応じて情報とプレゼンテーションを比較します。
02
インタラクションとユーザビリティ
操作を試し、ステータスを変更して作業を続行します。
進捗はこのブラウザーに自動保存されます。
ガイド
確認方法
使用例
使用例
FAQリストで回答を開きます
質問のタイトルは、開いた状態または閉じた状態のボタンです。開くと、答えはすぐ下にあり、その項目にリンクされています。
バリエーションと利用場面
開いたマークと折りたたんだマーク
パネルが閉じているか開いているかを示すマークを選択します。シンボルの向きは実際の状態に従う必要があります。
キーボードを使用して開閉します。アクセントとアリア展開が同時に変化することを確認します。
例 解答がオープンの場合、プラス記号はマイナス記号に変わります。
一般情報
開いたセクションにはコンテンツが適切に表示されます。
詳細設定
開いたセクションにはコンテンツが適切に表示されます。
一般情報
開いたセクションにはコンテンツが適切に表示されます。
詳細設定
開いたセクションにはコンテンツが適切に表示されます。
行ステータス
外観とアクセシビリティのプロパティによって、デフォルト、ホバー、フォーカス、オープンを区別します。
各タイトルを Tab キーで移動し、Enter キーを押します。開いたパネルはフォーカスを失うことはできません。
例 フォーカスの境界線は、背景色に関係なく、開いている行に表示されたままになります。
デフォルト
開いたセクションにはコンテンツが適切に表示されます。
選択中
開いたセクションにはコンテンツが適切に表示されます。
活動内容
開いたセクションにはコンテンツが適切に表示されます。
利用できません
開いたセクションにはコンテンツが適切に表示されます。
アイテムの分け方
コンテンツの関連性に応じて、区切り線、スペース、または背景ブロックを使用します。
長い文章をたくさん開いてください。スペースは、タイトルがどの回答に属するかを明確にする必要があります。
例 質問のグループには分割線が使用されます。他のグループには独自のタイトルがあります。
一般情報
開いたセクションにはコンテンツが適切に表示されます。
詳細設定
開いたセクションにはコンテンツが適切に表示されます。
一般情報
開いたセクションにはコンテンツが適切に表示されます。
詳細設定
開いたセクションにはコンテンツが適切に表示されます。