アコーディオンメニューとは

この記事の目的
Webの世界は日進月歩で進化していて、便利で新しい技術がどんどん登場しています。
その進化に伴い、新たな用語も年々増えています。
私たちが提供する「ホームページ制作サービス」の観点から専門用語を抜粋して分かりやすくお伝えします。

この記事の対象読者
Web制作を始めたばかりの人。
Webデザインを行なっているが、言葉の定義を再確認したい人。
自社でWeb担当を任されたが専門用語についていろいろ知りたい人。
など、Webに限らずDXに携わるすべての方に。

アコーディオンメニューとは

Web上のページやアプリケーションでの表示方法の一つです。選択した項目が縦に広がって詳細な内容を表示する形式のメニューのことです。表示領域が狭い場合でも多数の項目を一覧でき、かつ詳細な内容を即座に参照できるメニュー形式として利便性が高いと言えます。

アコーディオンメニューを使うメリット

デザインをすっきりさせて見せることが出来るので、シンプルなデザインにも向いています。

また、一度に画面に表示される情報量が減るので、視認性も良くなります。

訴求したいコンテンツの見出しだけ表示して、詳細は隠すことにより、ユーザーにとっては情報の取捨選択が可能になります。
見出しだけを残す形にすれば、極端な話ですがスクロールしなくて済むようになるのでUIが向上されます。

アコーディオンメニューを使うデメリット

逆にデメリットを挙げるならば、検索に引っかかりづらくなるのでユーザーは探している情報に辿り着くことが困難になります。

表示の初期状態では、全てが表示されていないので検索エンジンからアクセスしてきた場合には目的のコンテンツが見つけることができず、ユーザーの満足度が下がる可能性があります。

また「Ctrl + F」などのページ内検索でも同様のことが言えます。
検索結果に引っかかったとしても、表示はされていないので分かりづらいかもしれません。

また、印刷にも不向きなので、印刷されることを想定しているページでのアコーディオンメニューの使用はやめた方が無難です。

CSSのみで作るアコーディオンメニューのサンプル

<details>
<summary>Accordion Menu</summary>
<p>Accordion inner contents</p>
</details>

実は、上記のHTMLだけでシンプルなアコーディオンメニューなら実装ができてしまいます。

Accordion Menu

Accordion inner contents

もう少しデザインにこだわると下記のようなアコーディオンメニューを作ることができます。
クリックで開閉するアコーディオンメニューのHTML、CSSは下記でご説明します。

HTML

<div class="container">
  <section>
    <details>
      <summary>アコーディオンメニュー1</summary>
        <p>メニュー内、本文です。メニュー内、本文です。メニュー内、本文です。メニュー内、本文です。</p>
    </details>
    <details>
      <summary>アコーディオンメニュー2</summary>
        <p>メニュー内、本文です。メニュー内、本文です。メニュー内、本文です。メニュー内、本文です。</p>
    </details>
    <details>
      <summary>アコーディオンメニュー3</summary>
        <p>メニュー内、本文です。メニュー内、本文です。メニュー内、本文です。メニュー内、本文です。メニュー内、本文です。</p>
    </details>
  </section>
</div>

CSS

  .container section {
        width: 700px;
        margin: 5px;
      }

      .container section details summary {
        padding: 15px;
        background: #008b8b;
        color: #fff;
        border: 1px solid #444;
        position: relative;
        list-style: none;
        outline: none;
        cursor: pointer;
        font-size: 20px;
      }
      .container section details p {
        font-size: 15px;
        padding: 10px;
        color: #444;
        background: #e6ffff;
      }

      /* 開くボタン「+」 */
      .container section details summary::after {
        content: "+";
        position: absolute;
        top: 10px;
        right: 15px;
        font-size: 30px;
        color: #fff;
        transition: 0.2s linear;
      }

      /* 開く時の「+」の動き */
      .container section details[open] summary::after {
        transform: rotate(135deg);
      }

      /* 開いた後のメニューの背景色 */
      .container section details[open] summary {
        background: #006666;
      }

アコーディオンメニュー実装の注意

例えばSEOの観点から見ると、アコーディオンメニューは決して良いとは言えない一面もあります。

先述の通り、検索エンジンからアクセスしてきた場合に探しているコンテンツが初めから表示されているわけではないからです。これはユーザーの離脱の一因になります。

また、アコーディオンメニューはインタラクションコストを増加させます。全部クリックして表示させないと目的のコンテンツに辿り着けないというのは、貴重な時間の浪費であり、ユーザーが満足できる内容ではないからです

さらに、アクセシビリティの観点から見ると、障害を持つユーザーがスクリーンリーダーを使用してページを読み上げる場合、実装方法によってはアコーディオンメニューの部分は読み上げられない場合があります。

これはアクセシビリティに対応したHTMLやSVGの属性の仕様であるWAI-ARIA（ウェイアリア）という仕様に則って実装すれば対応ができます。

※2024年法改正 障害者差別解消法とアクセシビリティ

WAI-ARIAは、Web Accessibility Initiative – Accessible Rich Internet Applicationsの頭文字であり、HTMLやSVGで利用できるアクセシビリティ確保のための属性の仕様です。

アクセシビリティを意識したアコーディオンメニューのサンプル

HTML

  <div class="accordion">
    <button class="accordion-btn" aria-expanded="false" aria-controls="content1">セクション1</button>
    <div class="accordion-content" id="content1">
      <p>セクション1の内容がここに表示されます。</p>
    </div>
  </div>

  <div class="accordion">
    <button class="accordion-btn" aria-expanded="false" aria-controls="content2">セクション2</button>
    <div class="accordion-content" id="content2">
      <p>セクション2の内容がここに表示されます。</p>
    </div>
  </div>

CSS

.accordion-btn {
  background-color: #eee;
  color: #333;
  cursor: pointer;
  padding: 10px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: background-color 0.3s ease;
}

.accordion-btn:hover {
  background-color: #ccc;
}

.accordion-content {
  padding: 10px;
  display: none;
  background-color: #f9f9f9;
}

.accordion-content p {
  margin: 0;
}

.accordion-btn[aria-expanded="true"] {
  background-color: #ccc;
}

.accordion-btn[aria-expanded="true"] + .accordion-content {
  display: block;
}

JavaScript

document.addEventListener('DOMContentLoaded', function() {
  var accordionButtons = document.querySelectorAll('.accordion-btn');

  for (var i = 0; i < accordionButtons.length; i++) {
    accordionButtons[i].addEventListener('click', toggleAccordion);
  }

  function toggleAccordion() {
    var content = this.nextElementSibling;
    this.setAttribute('aria-expanded', this.getAttribute('aria-expanded') === 'false' ? 'true' : 'false');
    content.style.display = content.style.display === 'block' ? 'none' : 'block';
  }
});

2024年法改正 障害者差別解消法とアクセシビリティ

2024年4月に施行される障害者差別解消法の改正は、デジタルアクセシビリティの新たな基準を設け、障害を持つ人々、高齢者、一時的な障害を持つ人々を含むすべての人がデジタル情報に平等にアクセスできるようにすることを目的としています。この法改正は、情報技術の進展と社会のデジタル化に伴い、誰もが情報にアクセスしやすい環境を実現するための重要な対応です。

アクセシビリティは、すべての人がホームページやアプリケーションをスムーズに利用できるようにするための基本的な設計原則であり、デジタル空間の平等性を高める社会的責任でもあります。障害者差別解消法の改正により、ウェブコンテンツのアクセシビリティ基準に準拠し、障害を理由とした情報アクセスの障壁を取り除くことが求められています。

ホームページのアクセシビリティを向上させることは、法的義務を超え、すべてのユーザーへのコミットメントを示す行動です。アクセシビリティポリシーの策定、WCAG 2.1への準拠、アクセシビリティ評価ツールの活用など、具体的な対応策が提案されています。これらの対応策を実施することで、ホームページはより多くの人々にとって使いやすいリソースとなります。

ZIUSでは、アクセシビリティをウェブデザインの中心に据え、すべての人が情報に平等にアクセスできるデジタル環境の実現を目指しています。障害者差別解消法の改正を受け、障害のある人々を含むすべてのユーザーが直面する可能性のある障壁を理解し、これを解消するための具体的な対策を講じています。

こちらに詳細な内容をまとめたコラムがありますので、ぜひ読んでいただければと思います。