Web開発において、CSSクラスの「sr-only（またはvisually-hidden）」を使用する主な目的として、最も適切なものはどれですか？

解説

正解は「画面上には表示させず、スクリーンリーダー（音声読み上げソフト）にだけ内容を伝えるため」です。視覚的なデザインを保ちつつ、視覚障害者などの読み上げ機能のユーザーへ必要な補助情報を提供します。なぜその答えなのかdisplay: none; や visibility: hidden; を使うと、画面から消えるだけでなくスクリーンリーダー（画面のテキストを音声で読み上げる支援技術）からも無視されてしまいます。つまり、情報自体がページに存在しない扱いになります。一方、sr-only は「要素のサイズを極小にする」「画面外に配置する」といったCSSテクニックを組み合わせることで、アクセシビリティ（誰もが等しく情報を利用できる状態）を維持したまま視覚的にのみ隠すことができます。そのため、他の選択肢はすべて不正解となります。背景・仕組みsr-only（Screen Reader Onlyの略）は、Bootstrapなどの有名CSSフレームワークで広く使われるようになり定着したクラス名です。近年は visually-hidden と呼ばれることも増えています。仕組みとしては、以下のプロパティなどを組み合わせて、画面上から完全に隠します。clip プロパティで要素を1pxに切り抜くposition: absolute; で通常のレイアウトフローから外すoverflow: hidden; で要素外のはみ出しを隠す実務での活用例たとえば、アイコン画像のみで構成された「検索ボタン」を実装するケースで活躍します。視覚的には虫眼鏡アイコンだけで「検索」とわかっても、音声読み上げでは単なる「ボタン」としか伝わらない場合があります。具体的には、以下のように sr-only を付与したテキストをボタン内に配置することで、すべてのユーザーに正しい意味を伝えることができます。<button> <span class='icon-search'></span> <span class='sr-only'>検索する</span> </button>