アコーディオンの実装について、アクセシビリティを配慮した時の実装方法はどうすべきか、改めて考えてみました。 (2022年10月) 今回目標とする実装について先にまとめておくと、 アクセシビリティに配慮して実装したい。Tabキーで選択でき、エンター・スペースキーの両方で開閉可能である。スクリーンリーダーでの読み上げもおかしくならないようにする。展開アニメーションを付けたい。アイコンも独自のものを使用し、アニメーションさせたい。 ってな感じです。 ちなみに、IEについてはガン無視してます。 アコーディオンの開閉アニメーションの実装方法について height: autoを使うと、heightのtransitionアニメーションが動作しないという問題があるため多くの場合はJSで開閉アニメーションを実装すると思うのですが、個人的には以下の記事で紹介しているごまかしアニメーションで十分だと思っています
![アクセシビリティに配慮したアコーディオンの実装方法を考える。 | WEMO](https://cdn-ak-scissors.b.st-hatena.com/image/square/3b2cd6e45555e5986b18e9d5d27f66d94ba0d033/height=288;version=1;width=512/https%3A%2F%2Fwemo.tech%2Fwp-content%2Fuploads%2F2019%2F08%2Fwemo_noimg.jpg)