Tailwind CSS 練習問題 53：アクセシビリティ
Tailwind CSSにおいて、視覚的には要素を隠しつつ、スクリーンリーダー（＝視覚障害者向けの音声読み上げソフト）にはテキストを読み上げさせたい場合、正しいものはどれか。
- 視覚的に隠しつつ読み上げソフトに対応させるためのクラスは「sr-only」である。
- 視覚的に隠しつつ読み上げソフトに対応させるためのクラスは「visually-hide」である。
- 視覚的に隠しつつ読み上げソフトに対応させるためのクラスは「screen-hidden」である。
- 視覚的に隠しつつ読み上げソフトに対応させるためのクラスは「reader-only」である。
- 視覚的に隠しつつ読み上げソフトに対応させるためのクラスは「aria-hidden」である。
正解と解説を見る
正解：視覚的に隠しつつ読み上げソフトに対応させるためのクラスは「sr-only」である。
視覚的には要素を非表示にしつつ、スクリーンリーダー（＝視覚障害者向けの音声読み上げソフト）向けに情報を残したい場合は「sr-only」を使用するのが正解です。
【正解の理由】
「sr-only」は「Screen Reader Only」の略であり、画面上からは見えなくなりますが、DOM（＝HTMLの構造）上には存在し続けるため、読み上げソフトの対象になります。
【不正解の理由】
• 「visually-hide」は意味としては通じるが、Tailwind CSSの標準クラス名として存在しないため誤り
• 「screen-hidden」はTailwind CSSに存在しない架空のクラス名であるため誤り
• 「reader-only」はTailwind CSSに存在しない架空のクラス名であるため誤り
• 「aria-hidden」はTailwind CSSに存在しない架空のクラス名であるため誤り