サービスの料金、制限、問い合わせの手順が、同じような十二個の項目の中に隠れているページを想像してください。見た目は整っていますが、利用者は内容を理解するためにすべてを開かなければなりません。これは説明のための架空の例であり、実際の顧客事例ではありません。コンパクトな表示が役立つのは、読む作業を条件探しに変えない場合です。
基本情報と補足を分ける
サービスの簡潔な説明、重要な制限、次に取る行動は、最初から見える状態にしておくとよいでしょう。準備の詳細、例外、用語の説明は開閉式の項目に整理できます。デザインする前に、各段落が全員に必要なのか、一部の人にだけ必要なのかを区別します。この編集上の判断は、矢印の形を選ぶことより重要です。
見出しで回答の内容を伝える
「ウェブサイトの保守には何が含まれますか」という見出しは、「追加情報」よりも目的が明確です。社内の部署名ではなく、訪問者が使う言葉で質問を表します。開いた部分ではまず直接答え、その後で条件や関連ページへのリンクを示します。前の説明を理解するために、別の項目まで開かせないようにしましょう。
標準の動作から考える
HTMLには、内容の表示と非表示を切り替えるdetailsとsummaryがあります。簡単な説明には出発点となる仕組みですが、対象のブラウザーで確認する必要があります。独自の開閉コンポーネントについて、W3CのDisclosureパターンは、ボタン、Enterとスペースによる操作、表示状態に対応したaria-expandedを説明しています。プラス記号を描いただけでは、この動作は実現しません。
回答を不必要に閉じない
二つの説明を比べているとき、一つ目が自動で閉じると作業を妨げることがあります。参照用の情報なら、複数の回答を開いたままにできるか検討します。別の動作を選ぶ場合は、条件を見つける、選択肢を比べる、特定の項目に戻るといった具体的な課題で試してください。すべてのサイトに共通する最適な項目数はありません。
公開前の確認
キーボードで移動し、文字を大きくして、幅の狭い画面で長い回答を開きます。フォーカスが見えること、見出しが途中で切れないこと、展開した文章が隣の操作部分を覆わないことを確認します。支援技術でも開閉状態がわかりやすく伝わるか試します。最後にすべてを閉じたページを読み、何も押さずに重要な内容を理解できるか確認してください。
私たちの編集方針は、まず完全でわかりやすい回答を用意し、その後に表示方法を考えることです。FAQは論理的なサイト構成の代わりにはならず、検索順位を保証するものでもありません。リンクの名前については、行き先が伝わるリンクもご覧ください。