[解決済み] Bootstrap 3 の sr-only とは何ですか?
2022-03-03 08:18:29
質問
クラスとは
sr-only
に使用されていますか?重要なのでしょうか、それとも削除してもいいのでしょうか?なくても問題なく動作します。
以下は私の例です。
<div class="btn-group">
<button type="button" class="btn btn-info btn-md">Departments</button>
<button type="button" class="btn btn-info dropdown-toggle btn-md" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Sales</a></li>
<li><a href="#">Technical</a></li>
<li class="divider"></li>
<li><a href="#">Show all</a></li>
</ul>
</div>
解決方法は?
によると bootstrapのドキュメント のみを対象とした情報を非表示にするために使用されるクラスです。 スクリーンリーダー をレンダリングページのレイアウトから削除します。
<ブロッククオートすべての入力にラベルをつけないと、スクリーン・リーダーがフォームを操作しづらくなります。これらのインラインフォームでは、.sr-only クラスを使用してラベルを非表示にすることができます。
以下は 例 のスタイリングが使用されています。
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}
重要なのか、削除してもいいのか?なくても問題なく動作します。
重要です、削除しないでください。
アクセシビリティの観点から、常にスクリーンリーダーを考慮する必要があります。このクラスを使用すると、要素が非表示になるため、視覚的な違いは見られないはずです。
アクセシビリティについて読んでみたい方
関連
-
[解決済み] このCSSでInline-blockが正しく動作しないのはなぜですか?
-
[解決済み] HTMLのid属性に有効な値は何ですか?
-
[解決済み] How do I style a <select> dropdown with only CSS?
-
[解決済み] Twitter Bootstrapのメニューをクリックではなく、ホバーでドロップダウンさせる方法
-
[解決済み] Twitter Bootstrap 3を使用して列を中央に配置する
-
[解決済み] Bootstrapの列をすべて同じ高さにするにはどうしたらいいですか?
-
[解決済み] Bootstrap3による垂直方向の整列
-
[解決済み] Bootstrapのcol-lg-*、col-md-*、col-sm-*の違いは何ですか?
-
[解決済み] Bootstrapとは?
-
[解決済み】enctype='multipart/form-data'とはどういう意味ですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン