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

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

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

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

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

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

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

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

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

確認済みの現象

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

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

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

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

対策

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

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

.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: 1px;
  margin-top: -1px;
}

閉じた時1pxの高さがはみ出る分、marginをマイナス値にして調整しています。

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

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

実装例

あわせて読みたい

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

まとめ：対策は必須

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

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

あわせて読みたい

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

カスタマイズに困ったらお気軽にご相談を！

• 「ちょっとしたCSSの調整だけお願いしたい」
• 「不具合を直してほしい」

料金は3,000円〜、お支払いは銀行振込・Amazonギフトカードなど柔軟に対応してます🤔