アクセシビリティに配慮したアコーディオンの実装方法を考える。 | WEMO

アコーディオンの実装について、アクセシビリティを配慮した時の実装方法はどうすべきか、改めて考えてみました。 （2022年10月） 今回目標とする実装について先にまとめておくと、 アクセシビリティに配慮して実装したい。Tabキーで選択でき、エンター・スペースキーの両方で開閉可能である。スクリーンリーダーでの読み上げもおかしくならないようにする。展開アニメーションを付けたい。アイコンも独自のものを使用し、アニメーションさせたい。 ってな感じです。 ちなみに、IEについてはガン無視してます。 アコーディオンの開閉アニメーションの実装方法について height: autoを使うと、heightのtransitionアニメーションが動作しないという問題があるため多くの場合はJSで開閉アニメーションを実装すると思うのですが、個人的には以下の記事で紹介しているごまかしアニメーションで十分だと思っています