
detailsとsummaryタグで作るアコーディオンUI
DRANK
アコーディオン型ユーザーインターフェイス(UI)はウェブページでよくみられる表現です。巷ではさまざまな方法でアコーディオンUIを作る方法が紹介されていますが、みなさんはどのような方法で実装していますか? 見た目だけでなくアクセシビリティ対策までしっかりとできているでしょうか?<details>要素と<summary>要素は、アコーディオンUIを実装するのに最適です。過去にIE対策として<button>要素や<div>要素、<input>要素などでアコーディオンUIを作っていた方は、アクセシビリティ対策が簡単にできるので、<details>要素と<summary>要素の採用がオススメです。