Web制作でよく使用する、クリックでコンテンツを開閉できるアコーディオンメニュー。
頻出する割に使用する都度調べていたので、サクッと作れて使い回しができた方が良いなと思いまとめました。
また、実務でWAI-AREAを対応する機会があり、なかなか対応した記事が見つからなかったため、WAI-AREA対応のアコーディオンも載せています。
十字ボタンで開閉するアコーディオンメニュー
まずは一番スタンダードなアコーディオンメニューです。
十字ボタンをクリックするとコンテンツを開閉できます。
See the Pen アコーディオンメニュー by ayaka (@sae1212) on CodePen.
アコーディオンを実装するときに重要なポイントになるのは、以下の2つです。
実際に開閉できる動きを担っているjQueryを見てみましょう。
jQuery
// jQueryの定義
$(function(){
// buttonクラスがついている要素をクリックした時
$('.button').on('click', function(){
// buttonクラスから見て.accordionクラスが付いている親要素を.parentsで取得する
// (『this』は.buttonを指します。)
$(this).parents('.accordion')
// 親要素（.accordion）から見た子要素の.contentクラスが付いている要素を.findで取得する
.find('.content')
// .contentの要素を開閉させる
.slideToggle(200);
// buttonクラスがついている要素に.openクラスの付け外しを行う
$(this).toggleClass('open');
});
});
Codepenでは繋げて書いていた部分を分解してみてみました。
簡単に説明をします。
// buttonクラスから見て「.accordion」クラスが付いている親要素を.parentsで取得する
// (『this』は「.button」を指します。)
$(this).parents('.accordion')この$(this)は5行目に書いている$(‘.button’)を指します。
.buttonは複数あるクラスなので、$(this)と.parents、.findを使用してクリックした箇所のみにイベントが実行されるようにします。
// .contentの要素を開閉させる
.slideToggle(200);15行目のslideToggleははslideUp()とslideDown()を交互に行うメソッドでコンテンツの開閉処理を行っています。
// buttonクラスがついている要素に.openクラスの付け外しを行う
$(this).toggleClass('open');.button.open::before{
/* 縦線の向きを変更する */
transform: translate(-50%, -50%);
}
.button.open::after{
/* 横線を透明にする */
opacity: 0;
}18行目のtoggleClassは括弧の中に書かれた文字をクラスとして付け外しの処理を行うメソッドです。
この場合だと、.toggleClass(‘open’)となっているので「open」が付け外しするクラスとなり、十時ボタンの動きを変更します。
通常のアコーディオンの動きは以上です。
次はアクセシビリティ対応をしたアコーディオンを見てみましょう！
アクセシビリティ対応したアコーディオン（WAI-AREA対応）
まず、アクセシビリティ対応したソースコードを見てみましょう。
See the Pen アコーディオンメニュー（WAI-AREA対応） by ayaka (@sae1212) on CodePen.
主に変更されているのはHTMLとjQueryです。CSSは変更がありません。
そもそもアクセシビリティって何？という方は以下の記事を参考にして下さい。
HTML
まずはHTMLから見てみましょう。
<div class="accordion" role="tablist">
<div class="head">
<h2 class="heading">タイトル1</h2>
<button type="button" class="button" role="tab" aria-controls="accordion-panel-01" aria-expanded="false"></button>
</div>
<ul class="content" id="accordion-panel-01" role="tabpanel" aria-hidden="true">
<li class="list">リスト</li>
<li class="list">リスト</li>
<li class="list">リスト</li>
</ul>
</div>HTMLで変更したのは以下の3点です。
２つポイントとなる属性があり、role属性とaria属性について解説します。
ポイントを踏まえると、それぞれのrole属性やaria属性は以下になります。
・role=”tablist”
タブのリストという役割を表しています。
・role=”tab”
タブの役割を表します。
・role=”tabpanel”
タブに関連するコンテンツを表します。
・aria-controls
タブに関連するコンテンツとタブ部分の関連付けを行います。id属性と紐づけることで関連付けを行うことができます。
・aria-expanded
ボタンの開閉状態を表します。trueの場合は開いていることを表し、falseの場合は閉じていることを表します。
・aria-hidden
コンテンツの表示非表示の状態を表します。trueの場合は非表示を表し、falseの場合は表示されていることを表します。
jQuery
jQueryに関しては基本的なアコーディオンと変わりなく、以下のコードが追加されています。
// .buttonのaria-expanded属性がfalse（閉じている状態）だったとき
if( $(this).attr('aria-expanded') == 'false' ) {
// aria-expanded属性をtrue（開く状態）にする。
$(this).attr('aria-expanded', true);
// buttonクラスから見て.accordionクラスが付いている親要素を.parentsで取得する
$(this).parents('.accordion')
// 親要素（.accordion）から見た子要素の.contentクラスが付いている要素を.findで取得する
.find('.content')
// .contentクラスについているaria-hidden属性をfalse（表示している状態）にする
.attr('aria-hidden', false);
} else {
$(this).attr('aria-expanded', false);
$(this).parents('.accordion').find('.content').attr('aria-hidden', true);
}$(this)については先ほど解説したように$(‘.button’)を示します。
if文を使い.attrでaria-expandedの状態を取得し、true/falseによってaria-expanded・aria-hiddenの状態を変化させています。
これでアクセシビリティ対応ができました。
まとめ
アコーディオンメニューはよく使用するパーツなので、冒頭に紹介した基本のアコーディオンをまず押さえておくと良いです。
基本的な部分が抑えられたらアクセシビリティ対応まで行うとさらにユーザーに親切なWeb制作ができます。
アクセシビリティ対応を行うとなったとき、JSで動かす部分はWAI-AREA対応を行うことになります。
いざ対応するときには慌てないように日頃からキャッチアップしておくことをお勧めします。
おすすめ書籍
私がjQueryの基礎となるJavaScriptを学ぶときに重宝した本です。
タイトルの通りJavaScriptの文法を分かりやすくふりがなを振ってあるので、スラスラと読めて分かりやすいです。
JavaScriptって何？？難しい！という方に是非おすすめしたい本です。
アクセシビリティ対応の時にお世話になった本です。
ピンクの書籍のデザイニングWebアクセシビリティはアクセシビリティの基礎や概念を学ぶときに使い、ブルーのコーディングWebアクセシビリティは実際にマークアップするときに使用しました。
アクセシビリティって何？？という初心者の方はデザイニングWebアクセシビリティを、コーディングのアクセシビリティってどうやるの？という方はコーディングWebアクセシビリティをおすすめします。
