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

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

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

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

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

WordPressテーマ『SWELL』

17,600円（税込）

当ブログで使用中のSWELL。優れたデザインとプロ仕様の機能で、ブログが一段とパワーアップ。投資価値No.1のテーマです。

公式サイトへ購入はこちら

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

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

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

CodePen上では読まれたり、height:autoで指定している場合は読まれる場合もありますが、その他の判定条件は不明です。

以前はそんなことなかったと思うのですが、なぜか最近確認してみたところ、このような事態になっていました。

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

確認できたのは、Mac搭載のVoiceOverとChromeブラウザのページ内検索です。

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

datails / summaryタグで作成したアコーディオンは、Chromeでページ内検索した際に自動的に開くのですが、開いた後、文字がハイライトされない場合があります。

対策

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

開閉アニメーションに影響を与えない0.1pxを指定することで、ガタつきもなく、読み上げも行われるようになります。

ただし、子要素がはみ出す…

ただ残念な点としては、0.1pxの高さでも画面幅によって若干はみ出すことがあるので、サンプルのように背景色がついている場合などは目立ってしまいます。

これ以上小さい値にすると認識されなくなるし、アコーディオン自体にoverflow:hiddenをつけてみても、はみ出しは防げず、フォーカスの時アウトラインが見えなくなるという問題も出てきます。

HISA

transformとz-indexで隠すことはできるけど…もうちょっと良い対策考える必要がありますね。

もし、良い解決策があれば教えて欲しいです…！

サンプルの実装パターンは、以下のようなgridアコーディオンで行いました。

.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;
  /* スクリーンリーダーで認識されるように */
  min-height: 0.1px;
}

まとめ：対策は必須

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

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

あわせて読みたい

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

おすすめWEBスクール

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

＼ ここから飛べます！ ／