![](https://res.cloudinary.com/techfeed/image//fetch/w_280,h_210,c_fill/https%3A%2F%2Fics.media%2Fentry%2F220901%2Fimages%2Feyecatch.png)
detailsとsummaryタグで作るアコーディオンUI
DRANK
アコーディオン型ユーザーインターフェイス(UI)はウェブページでよくみられる表現です。巷ではさまざまな方法でアコーディオンUIを作る方法が紹介されていますが、みなさんはどのような方法で実装していますか? 見た目だけでなくアクセシビリティ対策までしっかりとできているでしょうか?<details>要素と<summary>要素は、アコーディオンUIを実装するのに最適です。過去にIE対策として<button>要素や<div>要素、<input>要素などでアコーディオンUIを作っていた方は、アクセシビリティ対策が簡単にできるので、<details>要素と<summary>要素の採用がオススメです。
1 comments
detailsタグでアコーディオン。ページ内検索で自動的に開くし、タグだけでスクリーンリーダーの読み上げ対策にもなるという話。
アコーディオンUIは開閉アニメーションを求められるケースは多いですが、JavaScriptで対策すればアニメーションを入れられます。
detailsタグに対応しているブラウザならWeb Animations APIにも対応しているので、.animate()で開閉モーションを実装。