スクリーンリーダーに対応したCSSのsr-onlyクラスの使用方法

sr-onlyクラスは、視覚的には表示されないが、スクリーンリーダーには読み上げられる要素にこのクラスを適用します。以下に、sr-onlyクラスを使用したシンプルな方法とコード例をいくつか紹介します。

テキストの非表示:

.sr-only {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}

このクラスを要素に追加すると、テキストは画面上に表示されず、スクリーンリーダーには読み上げられます。

リンクの非表示:

.sr-only {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
.sr-only:focus {
position: static;
width: auto;
height: auto;
overflow: visible;
}

このコードでは、リンクがスクリーンリーダーには読み上げられますが、視覚的には非表示になります。また、フォーカスが当たった時にはリンクが表示されるようになります。

スクリーンリーダー専用のテキスト:

<span class="sr-only">スクリーンリーダー専用のテキスト</span>

このように、要素の中にテキストを包んでsr-onlyクラスを適用すると、そのテキストはスクリーンリーダーにのみ読み上げられます。

これらはいくつかの基本的な使用例ですが、実際のウェブページに応じてさまざまな方法でsr-onlyクラスを使用することができます。スクリーンリーダーのユーザビリティを向上させるために、適切な要素にこのクラスを適用し、コンテンツのアクセシビリティを確保しましょう。