みなさん、こんにちは！
フリーランスエンジニアのKATSUMIです。
本日は、detailsとsummary要素を使ったアコーディオンメニューの作り方を説明します。
プログラミング独学者へdetailsとsummary要素を使ったアコーディオンメニューの作り方を解説
アコーディオン型ユーザーインターフェイスはWebページでよくみられる表現です。
巷ではさまざまな方法でアコーディオンユーザーインターフェースを作る方法が紹介されていますが、みなさんはどのような方法で実装していますか？
見た目だけでなくアクセシビリティ対策までしっかりとできているでしょうか？
details要素とsummary要素は、アコーディオンユーザーインターフェースを実装するのに最適です。
過去にIE対策としてdiv要素やbutton要素、input要素などでアコーディオンUIを作っていた方は、アクセシビリティ対策が簡単にできるので、details要素とsummary要素の採用がおすすめです。
この記事では、details要素とsummary要素がアコーディオンユーザーインターフェースに最適と言える理由と、HTMLのマークアップまで順を追ってアコーディオンユーザーインターフェースの作り方をご紹介します。
div要素やbutton要素を使う際によくある課題
details要素とsummary要素はHTML 5.1（リンク先は2016年当時の仕様書）で登場した比較的新しいタグです。
IEサポート終了前の対策としてなのか、div要素やbutton要素、input要素のtype=”checkbox”などに開閉の動作を追加した作例がアコーディオンユーザーインターフェースの作り方として多く見られます。
これらはアコーディオンのような開閉動作は作れるものの、以下のようにさまざまな面で課題があります。
コード面
HTMLの構造が複雑。本来の使用用途からずれてしまっているタグで作ると、ひと目見ただけでは何を表すのかが分かりにくいでしょう。
div要素で作った例
<div class="accordion">概要</div>
<div class="panel">
<p>コンテンツ詳細</p>
</div>実装工数の面
必要最低限のアコーディオンの開閉の動きを作る場合でもCSSを使った実装が必須です。
details要素とsummary要素を使うメリット
課題がわかったところで、今度はアコーディオンでdetails要素とsummary要素を使うメリットを見てみましょう。
先にあげた課題点をすべてカバーでき、アクセシビリティ面ではとくに優れていると言えます。
コード面
HTMLの構造がシンプル。タグ名から構造を理解できることがおわかりいただけるでしょう。
<details>
<summary>概要</summary>
コンテンツ詳細
</details>アクセシビリティ面
ブラウザは自動的にこれらの要素にキーボードアクセシビリティを提供します。
ユーザーはTabキーでsummary要素にフォーカスを移動し、Enterキーやスペースキーで開閉操作を行うことができます。
また、details要素のopen属性の有無で、アコーディオンの開閉状態が明確に表現されます。
これにより、支援技術は現在の状態を正確にユーザーに伝えることができます。
detailsとsummaryの基本
detailsとsummary要素は、折りたたみ可能なコンテンツを作成するための専用タグ。
details要素は折りたたみ可能なセクションを定義し、その中のsummary要素がセクションの見出しやラベルとなります。
基本的な使用方法は以下の通りです：
See the Pen 250222details&summary by kacyan (@kacyan) on CodePen.
| ホームページ制作費無料のサブスクやフリーランスエンジニアを育成するメンター業を右記で請けおってます |  |
detailsとsummaryの詳細仕様
この構造により、ユーザーはsummary部分をクリックすることで、詳細コンテンツの表示・非表示を切り替えることができます。
JavaScriptを使用せずにこの動作を実現できるため、ページの読み込み速度やパフォーマンスにも好影響を与えます。
details要素には、いくつかの重要な属性があります。
一般的なのはopen属性で、これを指定すると初期状態で詳細コンテンツが表示されます。
details要素はネストすることも可能で、階層構造を持つアコーディオンメニューを作成できます。
ただし、過度に複雑な構造はユーザビリティを損なう可能性があるため、適切な深さを保つことが重要です。
また、details要素にはJavaScriptで操作可能なイベントがあり、toggleイベントを使用してコンテンツの開閉状態を検知できます。
detailsとsummary要素は、多くの最新ブラウザでサポートされています。
Chrome、Firefox、Safari、Edge、Operaなどの主要ブラウザで問題なく動作します。
ただし、Internet Explorer 11以前のバージョンではサポートされていません。
しかし、IEサポートが終了したため、detailsとsummary要素を使っても問題ないといえます。
まとめ
アコーディオン型ユーザーインターフェースを要素と要素で作ると得られるメリットから、作り方までを紹介しました。
と要素を使用したアコーディオンメニューは、アクセシビリティとパフォーマンスの両面で優れた選択肢です。
アコーディオンUIを作る際のさまざまな課題ケアには、要素と要素が最適です。ぜひ使っていきましょう。
これまでaタグやbuttonなどを使用した場合に煩雑だったアクセシビリティ対応は、と要素でデフォルトで大体対応してくれます。
Webアクセシビリティへの対応はこれらどんどん進んでくるかと思いますので、覚えておくと損はないでしょう。
今回の記事が、フロントエンドエンジニア、Webデザイナーを独学で目指している方の参考になれば幸いです。
下記を押していただけると励みになります！
↓
 |
人気記事
最近のコメント