このクラスは何の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>
ベストアンサー1
によるとブートストラップのドキュメント、このクラスは、スクリーンリーダーレンダリングされたページのレイアウトから。
すべての入力にラベルを含めないと、スクリーン リーダーはフォームで問題を起こします。これらのインライン フォームでは、.sr-only クラスを使用してラベルを非表示にすることができます。
こちらは例使用されたスタイル:
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}
それは重要ですか、それとも削除できますか? なくても問題なく動作します。
重要なので削除しないでください。
アクセシビリティのために、常にスクリーン リーダーを考慮する必要があります。クラスを使用すると、いずれにせよ要素が非表示になるため、視覚的な違いは見られません。
アクセシビリティについて読むことに興味がある場合: