Bootstrap 3のsr-onlyクラス解説
Bootstrap 3におけるsr-onlyの解説
sr-onlyは、Bootstrap 3のCSSクラスで、スクリーンリーダーにのみ表示される要素を指定するものです。視覚障害者など、スクリーンリーダーを使用するユーザーには表示されますが、通常のユーザーには表示されません。
使い方
<span class="sr-only">このテキストはスクリーンリーダーのみ表示されます</span>
上記の例では、"このテキストはスクリーンリーダーのみ表示されます"というテキストは、スクリーンリーダーを使用しているユーザーのみが表示できます。通常のブラウザーでは、このテキストは表示されません。
使用例
- エラーメッセージ
エラーメッセージをsr-onlyクラスで指定し、フォーム要素の横に表示することで、アクセシビリティを向上させます。 - アクセシビリティの向上
重要な情報をスクリーンリーダーにのみ表示することで、視覚障害者にとって理解しやすくなります。
CSSコード
sr-onlyクラスは、以下のようなCSSコードで定義されています。
.sr-only {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !impo rtant;
border: 0 !import ant;
}
このコードにより、sr-onlyクラスが設定された要素は、ブラウザーの表示領域から完全に切り取られ、スクリーンリーダーのみがアクセスできるようになります。
Bootstrap 3のsr-onlyクラス解説: コード例
sr-onlyクラスは、Bootstrap 3でスクリーンリーダーにのみ表示される要素を指定するためのCSSクラスです。
基本的な使い方
<span class="sr-only">このテキストはスクリーンリーダーのみ表示されます</span>
フォームラベルへの使用
<label for="email" class="sr-only">メールアドレス</label>
<input type="email" id="email" name="email" placeholder="メールアドレスを入力してください">
このコードでは、"メールアドレス"というラベルはスクリーンリーダーにのみ表示されます。通常のブラウザーでは、ラベルは表示されませんが、スクリーンリーダーを使用しているユーザーは、フォーム要素の横にラベルが表示されるため、アクセシビリティが向上します。
エラーメッセージへの使用
<div class="alert alert-danger sr-only">
メールアドレスが不正です。
</div>
重要な情報の表示
<p class="sr-only">このページは、最新のブラウザでご覧いただくことを推奨します。</p>
visually-hiddenクラスの使用
visually-hiddenクラスは、sr-onlyクラスと同様の機能を提供します。ただし、visually-hiddenクラスは、要素を完全に非表示にするのではなく、ブラウザの表示領域から切り取ることで、スクリーンリーダーにのみ表示されるようにします。
<span class="visually-hidden">このテキストはスクリーンリーダーのみ表示されます</span>
CSSのみの使用
sr-onlyクラスやvisually-hiddenクラスを使用せずに、CSSのみでスクリーンリーダーにのみ表示される要素を指定することもできます。
.screen-reader-only {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !impo rtant;
border: 0 !import ant;
}
このCSSコードを使用することで、screen-reader-onlyクラスが設定された要素は、スクリーンリーダーにのみ表示されます。
JavaScriptの使用
JavaScriptを使用して、要素をスクリーンリーダーにのみ表示することもできます。例えば、JavaScriptのaria-hidden属性を使用して、要素をスクリーンリーダーに非表示にすることができます。
const element = document.getElementById('element');
element.setAttribute('aria-hidden', 'true');
このコードでは、elementというIDを持つ要素をスクリーンリーダーに非表示にします。
html css twitter-bootstrap
