Code Library of Accessibility Examples
Beta. Feedback welcome!

展開/折りたたみ (詳細/概要に基づく)

展開/折りたたみ (詳細/概要に基づく)

このパターンは、単純な展開/折りたたみパターンとほぼ同じ意図ですが、 summary 要素と details 要素のHTML 5セマンティクスが追加されている点が異なります。summary 要素は、展開/折りたたみアクションを制御するボタンです。details 要素には、 summary 要素をアクティブにした結果として非表示または表示されるコンテンツが含まれています。

原則として、 summary 要素と details 要素は、JavaScriptやカスタムARIAパターンを必要とせずに単独で動作する可能性がありますが、実際には、すべてのブラウザーがこの機能をサポートしているわけではないため、ブラウザー間の互換性のためにJavaScriptとARIAが必要です。

サポートノート: NVDA Firefoxを除くすべてのスクリーンリーダーとブラウザの組み合わせで動作します(折りたたまれた/展開された初期状態を読み取りますが、状態の変更は通知しません)。


スクリーンリーダーをオンにして、この例を実際に体験してください。

私には夢がある（抜粋）、マーティン・ルーサー・キング・ジュニア博士

このように、今日と明日の困難に直面しているとはいえ、 私にはまだ夢があります。それはアメリカンドリームに深く根ざした夢です。

私には夢があります。いつの日かこの国が立ち上がり、 その信条の真の意味を実現することを。“我々は、すべての人間は平等に造られているという真理を、 自明のものと信じる。”

私には夢があります。いつの日かジョージアの赤い丘の上で、 かつての奴隷の子孫とかつての奴隷主の子孫が、 兄弟愛のテーブルに共に座ることができるようになることを。

私には夢があります。いつの日か、不正義の熱気にうだり、 抑圧の熱気にうだるミシシッピ州でさえも、 自由と正義のオアシスへと変貌することを。

私には夢があります。私の4人の幼い子どもたちが、いつの日か 肌の色ではなく人格の中身によって 評価される国に住むことを。

今日、私には夢があります！

私には夢があります。いつの日か、悪質な人種差別主義者がはびこり、 知事が“干渉”や“無効化”という言葉を口にするアラバマ州で — いつの日かまさにそのアラバマで、 幼い黒人の少年少女が幼い白人の少年少女と 姉妹兄弟として手をつなぐことができるようになることを。

今日、私には夢があります！

私には夢があります。いつの日かすべての谷は高められ、 すべての丘と山は低くされ、でこぼこした場所は平らにされ、 曲がった場所はまっすぐにされ、主の栄光が現れ、 すべての人がともにそれを見ることを。

HTMLソースコード

<details class="deque-expander" id="dream">
    <summary class="deque-expander-summary">
        <span class="expander-icon"></span>
        私には夢がある（抜粋）、マーティン・ルーサー・キング・ジュニア博士
    </summary>

    <div class="deque-expander-content">
        <p>このように、今日と明日の困難に直面しているとはいえ、
            私にはまだ夢があります。それはアメリカンドリームに深く根ざした夢です。</p>

        <p>私には夢があります。いつの日かこの国が立ち上がり、
            その信条の真の意味を実現することを。&ldquo;我々は、すべての人間は平等に造られているという真理を、
            自明のものと信じる。&rdquo;</p>

        <p>私には夢があります。いつの日かジョージアの赤い丘の上で、
            かつての奴隷の子孫とかつての奴隷主の子孫が、
            兄弟愛のテーブルに共に座ることができるようになることを。</p>

        <p>私には夢があります。いつの日か、不正義の熱気にうだり、
            抑圧の熱気にうだるミシシッピ州でさえも、
            自由と正義のオアシスへと変貌することを。</p>

        <p>私には夢があります。私の4人の幼い子どもたちが、いつの日か
            肌の色ではなく人格の中身によって
            評価される国に住むことを。</p>

        <p>今日、私には夢があります！</p>

        <p>私には夢があります。いつの日か、悪質な人種差別主義者がはびこり、
            知事が&ldquo;干渉&rdquo;や&ldquo;無効化&rdquo;という言葉を口にするアラバマ州で &mdash;
            いつの日かまさにそのアラバマで、
            幼い黒人の少年少女が幼い白人の少年少女と
            姉妹兄弟として手をつなぐことができるようになることを。</p>

        <p>今日、私には夢があります！</p>

        <p>私には夢があります。いつの日かすべての谷は高められ、
            すべての丘と山は低くされ、でこぼこした場所は平らにされ、
            曲がった場所はまっすぐにされ、主の栄光が現れ、
            すべての人がともにそれを見ることを。</p>
    </div>
</details>

JavaScriptソースコード

/*
  No JavaScript is required for this component.

  The native HTML <details> and <summary> elements provide
  expand/collapse functionality, keyboard support (Enter/Space),
  and screen reader announcements automatically.
*/

CSSソースコード

/*
  Expand/Collapse (Summary/Details) — Restyled
  Deque University ARIA Component
*/

.deque-expander {
  --dqu-bg-primary: #fcfaf8;
  --dqu-border-secondary: #8c827d;
  --dqu-interactive: #2e5f7a;
  --dqu-interactive-hover: #3a7a9a;
  --dqu-font-family: "Noto Sans", sans-serif;
  --dqu-radius: 8px;

  margin: 0;
  padding: 0;
  border: 1px solid var(--dqu-border-secondary);
  border-radius: var(--dqu-radius);
  font-family: var(--dqu-font-family);
  overflow: hidden;
}

.deque-expander:focus-within {
  border-color: var(--dqu-interactive);
  box-shadow: 0 0 0 1px var(--dqu-interactive);
}

/* Base specificity raised to 0,2,0 to beat deque-patterns.min.css rules
   (.deque-expander .deque-expander-summary) which load before this file */
.deque-expander .deque-expander-summary {
  display: block;
  border: 0;
  padding: 12px 16px 12px 40px !important;
  color: #ffffff !important;
  text-align: left;
  background: var(--dqu-interactive) !important;
  position: relative;
  cursor: pointer;
  list-style: none;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  transition: background-color 0.15s ease;
  border-radius: 7px 7px 0 0 !important;
}

/* Hide native marker/disclosure triangle */
.deque-expander .deque-expander-summary::-webkit-details-marker {
  display: none;
}

.deque-expander .deque-expander-summary::marker {
  display: none;
  content: "";
}

.deque-expander .deque-expander-summary:hover {
  cursor: pointer;
  background: var(--dqu-interactive-hover) !important;
  outline: none !important;
}

.deque-expander .deque-expander-summary:active {
  cursor: pointer;
  background: #254c62 !important;
}

.deque-expander .deque-expander-summary:focus-visible {
  outline: none !important;
  box-shadow: inset 0 0 0 3px #ffffff;
  background: var(--dqu-interactive-hover) !important;
}

.deque-expander .deque-expander-summary:focus:not(:focus-visible) {
  outline: none !important;
}

/* Closed state: all four corners rounded */
.deque-expander:not([open]) > .deque-expander-summary {
  border-radius: 7px !important;
}

/* CSS chevron icon */
.deque-expander-summary .expander-icon {
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  height: 0.5rem;
  width: 0.5rem;
  pointer-events: none;
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-60%) rotate(-45deg);
  transition: transform 0.2s ease;
}

/* Rotate chevron when open */
details[open] > .deque-expander-summary .expander-icon {
  transform: translateY(-60%) rotate(45deg);
}


.deque-expander-content {
  clear: both;
  padding: 16px;
  background: var(--dqu-bg-primary);
  color: #21201e;
  font-size: 0.9375rem;
  line-height: 1.7;
}

フルページのコピーと貼り付けの例