アコーディオンメニューとは
Web上のページやアプリケーションでの表示方法の一つです。選択した項目が縦に広がって詳細な内容を表示する形式のメニューのことです。表示領域が狭い場合でも多数の項目を一覧でき、かつ詳細な内容を即座に参照できるメニュー形式として利便性が高いと言えます。
アコーディオンメニューを使うメリット
デザインをすっきりさせて見せることが出来るので、シンプルなデザインにも向いています。
また、一度に画面に表示される情報量が減るので、視認性も良くなります。
訴求したいコンテンツの見出しだけ表示して、詳細は隠すことにより、ユーザーにとっては情報の取捨選択が可能になります。
見出しだけを残す形にすれば、極端な話ですがスクロールしなくて済むようになるのでUIが向上されます。
アコーディオンメニューを使うデメリット
逆にデメリットを挙げるならば、検索に引っかかりづらくなるのでユーザーは探している情報に辿り着くことが困難になります。
表示の初期状態では、全てが表示されていないので検索エンジンからアクセスしてきた場合には目的のコンテンツが見つけることができず、ユーザーの満足度が下がる可能性があります。
また「Ctrl + F」などのページ内検索でも同様のことが言えます。
検索結果に引っかかったとしても、表示はされていないので分かりづらいかもしれません。
また、印刷にも不向きなので、印刷されることを想定しているページでのアコーディオンメニューの使用はやめた方が無難です。
アコーディオンメニュー実装の注意
例えばSEOの観点から見ると、アコーディオンメニューは決して良いとは言えない一面もあります。
先述の通り、検索エンジンからアクセスしてきた場合に探しているコンテンツが初めから表示されているわけではないからです。これはユーザーの離脱の一因になります。
また、アコーディオンメニューはインタラクションコストを増加させます。全部クリックして表示させないと目的のコンテンツに辿り着けないというのは、貴重な時間の浪費であり、ユーザーが満足できる内容ではないからです
さらに、アクセシビリティの観点から見ると、障害を持つユーザーがスクリーンリーダーを使用してページを読み上げる場合、実装方法によってはアコーディオンメニューの部分は読み上げられない場合があります。
これはアクセスビリティに対応したHTMLやSVGの属性の仕様であるWAI-ARIA（ウェイアリア）という仕様に則って実装すれば対応ができます。
