よくある質問の回答用ディスクロージャー（表示/非表示）の例

この例について

次の例は、ディスクロージャーのパターンを使用して、回答を個別に表示又は非表示にできる一連のよくある質問を作成する方法を示しています。

類似の例には以下があります:

例

パーキングFAQ

: メーターを支払わずに最寄りの利用可能なパーキングメーターに駐車し、999-999-9999 に電話して問題を報告してください。代替場所を記録して承認し、割り当てられた施設での不足の原因を調査します。
: パーキングオフィスに来て、紛失を報告するべきです。紛失した許可証を交換するには料金がかかります。ただし、許可証が盗まれた場合は、料金交換免除のために、盗難された駐車許可証フォームとともに警察の報告書のコピーを提出する必要があります。
: すべての施設は、毎日午前 2 時から午前 6 時まで制限されています。カレンダーに休日として公式に記載されているものを除き、休日や休憩の例外はありません。注意：24 時間レンタルのスペース、24 時間レンタルの駐車場、及び障害者用駐車場は常に実施されます。
: 一部の駐車施設の制限は他の施設とは異なります。各駐車場の入り口にある標識に注意してください。

アクセシビリティ機能

FAQ のセマンティックな構造は、ネイティブの dl、dt、及び dd 要素で伝えられます。リスト構造が支援技術に伝達されるようにするために、dt 要素にボタンロールを適用する代わりに、button 要素が dt 要素内に含まれています。同様に、ボタンで表示又は非表示にできる回答コンテンツを含む各 div 要素は、dd 要素の子です。一部の回答が非表示になっていても、すべての dd 要素が DOM に存在するため、dl 構造は常に完全です。
視覚障害のある人がディスクロージャーをインタラクティブなものとして識別し、ディスクロージャーボタン又はそのラベルをクリックすると展開状態が変化することを認識しやすくするために、ポインターがボタン又はそのラベルにホバーすると、背景色が変わります。境界線が表示され、カーソルがポインターに変わります。
透明な境界線は、オペレーティングシステムのハイコントラスト設定が有効になっている一部のシステムで表示されるため、フォーカスされている要素と他の要素との間に視覚的な違いを作成するために透明度を使用することはできません。透明度を使用する代わりに、フォーカスされた要素はより太い境界線とより少ないパディングを持ちます。要素がフォーカスを受け取ると、その境界線は 0 から 2 ピクセルに変化し、パディングは 2 ピクセル減少します。要素がフォーカスを失うと、その境界線は 2 ピクセルから 0 に変化し、パディングは 2 ピクセル増加します。
CSS のインライン SVG 矢印グラフィックが、ハイコントラスト設定で色が反転した場合に背景と十分なコントラストを持つようにするために、矢印の色はテキストコンテンツの色と同期されます。たとえば、矢印の色は、矢印を描画するために使用される polygon 要素の stroke 及び fill プロパティに CSS currentcolor 値を指定することにより、ハイコントラストモードのテキストの前景色と一致するように設定されます。代わりに特定の色を使用して polygon プロパティを指定した場合、それらの色はハイコントラストモードでも同じままであり、矢印と背景のコントラストが不十分になったり、色がハイコントラストモードの背景と一致した場合は矢印が見えなくなったりする可能性があります。
注：SVG 要素は、currentcolor 値をハイコントラストモードで更新するために、CSS forced-color-adjust プロパティを auto に設定する必要があります。一部のブラウザでは、デフォルト値に auto を使用しません。

キーボードのサポート

キー	機能
`Tab`	キーボードフォーカスをディスクロージャーボタンに移動します。
`Space` 又は `Enter`	質問への回答の表示/非表示を切り替えるディスクロージャーボタンを作動させます。

ロール、プロパティ、ステート、及び tabindex 属性

属性	要素	使用法
`aria-controls="ID_REFERENCE"`	`button`	ディスクロージャーボタンによって制御される要素を識別します。
`aria-expanded="false"`	`button`	ディスクロージャーボタンによって制御されるコンテナが非表示であることを示します。 CSS 属性セレクター（例：`[aria-expanded="false"]`）は、視覚的な状態を `aria-expanded` 属性の値と同期させるために使用されます。表示/非表示状態の視覚的インジケーターは、CSS `:before` 疑似要素と `content` プロパティを使用して作成されるため、画像はオペレーティングシステムとブラウザのハイコントラストモードで確実にレンダリングされます。
`aria-expanded="true"`	`button`	ディスクロージャーボタンによって制御されるコンテナが表示されていることを示します。 CSS 属性セレクター（例：`[aria-expanded="true"]`）は、視覚的な状態を `aria-expanded` 属性の値と同期させるために使用されます。表示/非表示状態の視覚的インジケーターは、CSS `:before` 疑似要素と `content` プロパティを使用して作成されるため、画像はオペレーティングシステムとブラウザのハイコントラストモードで確実にレンダリングされます。

JavaScript 及び CSS のソースコード

CSS: disclosure-faq.css
Javascript: disclosureButton.js

HTML のソースコード

以下の HTML コードをコピーするには、CodePen で開いてください。


<h3>
  パーキング
  <abbr title="Frequently Asked Questions">
    FAQ
  </abbr>
</h3>
<dl class="faq">
  <dt>
    <button type="button"
            aria-expanded="false"
            aria-controls="faq1_desc">
      割り当てられた区画の許可証を持っていますが、そこにスペースが見つからない場合はどうすればよいですか？
    </button>
  </dt>
  <dd>
    <div id="faq1_desc" class="desc">
      メーターを支払わずに最寄りの利用可能なパーキングメーターに駐車し、999-999-9999 に電話して問題を報告してください。
      代替場所を記録して承認し、割り当てられた施設での不足の原因を調査します。
    </div>
  </dd>
  <dt>
    <button type="button"
            aria-expanded="false"
            aria-controls="faq2_desc">
      許可証を紛失した場合、又は許可証が盗まれた場合はどうすればよいですか？
    </button>
  </dt>
  <dd>
    <div id="faq2_desc" class="desc">
      パーキングオフィスに来て、紛失を報告するべきです。
      紛失した許可証を交換するには料金がかかります。
      ただし、許可証が盗まれた場合は、料金交換免除のために、盗難された駐車許可証フォームとともに警察の報告書のコピーを提出する必要があります。
    </div>
  </dd>
  <dt>
    <button type="button"
            aria-expanded="false"
            aria-controls="faq3_desc">
      休日に無料駐車場はありますか？
    </button>
  </dt>
  <dd>
    <div id="faq3_desc" class="desc">
      すべての施設は、毎日午前 2 時から午前 6 時まで制限されています。
      カレンダーに
      <q>
        休日
      </q>
      として公式に記載されているものを除き、休日や休憩の例外はありません。
      注意：24 時間レンタルのスペース、24 時間レンタルの駐車場、及び障害者用駐車場は常に実施されます。
    </div>
  </dd>
  <dt>
    <button type="button"
            aria-expanded="false"
            aria-controls="faq4_desc">
      すべての駐車施設に同じ実施規則がありますか？
    </button>
  </dt>
  <dd>
    <div id="faq4_desc" class="desc">
      一部の駐車施設の制限は他の施設とは異なります。
      各駐車場の入り口にある標識に注意してください。
    </div>
  </dd>
</dl>