アコーディオンである対策をしないとスクリーンリーダーに無視される

アコーディオンを実装する際、高さを0にしてoverflow:hiddenなどを指定する場面がよく見られます。

ただこの実装方法、ある対策をしないとスクリーンリーダーにコンテンツが読み取られなくなるという致命的な落とし穴を発見しました。

今回は、その落とし穴と対策方法を考えていきたいと思います。

※サンプルもあるのでお試しください。

WordPressテーマ『SWELL』

17,600円（税込）

当ブログで使用中のテーマ「SWELL」。Webサイトのベースとしても多く利用されている投資価値No.1のテーマです。

レビュー記事はこちら購入はこちら

どんな時に認識されなくなるか

スクリーンリーダーに認識されなくなるのは、コンテンツ部分の高さを0にしてoverflow:hiddenを指定した場合です。

その後、アコーディオン展開時に高さを与えても、フォーカスは当たるものの文字は認識されません。

しかし、なぜかCodePen上では認識されるので、この落とし穴に気づかない人も多いかと思います。

確認済みのスクリーンリーダー

確認できたのは以下の場合です。

• MacのVoiceOverで読み上げる時
• Chromeでページ内検索した時

VoiceOverだと、Safariで文字にフォーカスを当てることはできますが、テキストの読み上げは無視されます。

また、datails / summaryで作成したアコーディオンは、Chromeでページ内検索した時、自動でアコーディオンが開いて文字がハイライトされるのですが、これも無視されます。

対策

どうやら高さが完全に0となると読み上げができなくなるみたいなので、overflow:hiddenを与えている要素に最低限の高さを与えることで解決できました。

CSSで高さを制御している場合

コンテンツを閉じた時、1pxだと少し目立つので0.1pxに指定しました。

ただし、画面幅によっては少しはみ出す時があるので、何か他の解決方法を模索中です。

開閉アニメーションはGrid layoutで行っています。

.accordion-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s;
}

.is-open > .accordion-body {
  grid-template-rows: 1fr;
}

.accordion-body-inner {
  overflow: hidden;
  /* 高さが0だとスクリーンリーダーに認識されなくなるため */
  min-height: 0.1px;
}

JavaScriptで高さを制御している場合

JavaScriptで高さを指定している場合も同じく、閉じた時の高さを0以上に指定することで認識されるようになります。

実装例

あわせて読みたい

details / summaryで作るアコーディオンアニメーション セマンティックなdetails / summaryタグを使用して、アコーディオンアニメーションを実装する方法を紹介します。 今回作るアコーディオンは、以下のガイドラインに従っ…

まとめ：対策は必須

アクセリビリティを無視しないよう、目に見えないところまで配慮しながら実装するのがコーダーの役割だと思います。

アニメーションに気を取られて、本来の機能を害することないよう気をつけたいと思いました。

あわせて読みたい

details / summaryで作るアコーディオンアニメーション セマンティックなdetails / summaryタグを使用して、アコーディオンアニメーションを実装する方法を紹介します。 今回作るアコーディオンは、以下のガイドラインに従っ…

おすすめWEBスクール

WEB制作やWEBデザインを学びたいなら、SNSでも話題の「デイトラ」がおすすめ！
どのコースも10万円前後と業界最安値で、副業や転職に向けて十分なスキルを身につけることができます。

＼ クリックしてジャンプ！ ／