.sr-onlyスクリーンリーダー専用のクラス名です。任意のクラス名を使用できます.sr-onlyが、かなり一般的に使用されています。コンプライアンスを考慮して開発する必要がない場合は、削除できます。このクラスのCSSはデスクトップおよびモバイルデバイスのブラウザーには表示されないため、削除してもUIには影響しません。
の.sr-only目的を説明するためのの使用とスクリーンリーダー向けであることについて、ここではいくつかの情報が欠けているようです。何よりもまず、障害のあるユーザーを常に念頭に置くことが非常に重要です。障害は508準拠の目的であり、https：//www.section508.gov/であり、ブートストラップがこれを考慮に入れていることは素晴らしいことです。ただし、.sr-only508への準拠を考慮する必要があるのは、の使用だけではありません。色の使用、フォントのサイズ、ナビゲーションによるアクセシビリティ、記述子、ariaの使用などがあります。
しかし、に関して.sr-onlyは-CSSは実際に何をしますか？に使用されるCSSには、若干異なるバリアントがいくつかあります.sr-only。私が使用する数少ないものの1つを以下に示します。
.sr-only {
position: absolute;
margin: -1px 0 0 -1px;
padding: 0;
display: block;
width: 1px;
height: 1px;
font-size: 1px;
line-height: 1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
outline: 0;
}
上記のCSSは、このクラスでラップされたデスクトップおよびモバイルブラウザーのコンテンツを非表示にしますが、JAWSなどのスクリーンリーダーで表示されます：http : //www.freedomscientific.com/Products/Blindness/JAWS。マークアップの例は次のとおりです。
<a href="#" target="_blank">
Click to Open Site
<span class="sr-only">This is an external link</span>
</a>
さらに、DOM要素の幅と高さが0の場合、その要素はDOMからは見えません。これが、上記のCSSがを使用する理由width: 1px; height: 1px;です。display: noneCSS をとに設定するheight: 0とwidth: 0、要素はDOMから見えなくなり、問題が発生します。上記のCSSを使用width: 1px; height: 1px;して、コンテンツをデスクトップおよびモバイルブラウザーに表示せず（overflow: hiddenコンテンツが画面に表示されない場合）、スクリーンリーダーに表示するだけではありません。デスクトップおよびモバイルブラウザーからコンテンツを非表示にするには、以下を使用してwidth: 1px、height: 1px前述のオフセットを追加します。
position: absolute;
margin: -1px 0 0 -1px;
overflow: hidden;
最後に、スクリーンリーダーが何を見て障害のあるユーザーに中継するかについて非常によく理解するには、ブラウザのページスタイルをオフにします。Firefoxの場合、次のようにしてこれを行うことができます。
View > Page Style > No Style
私がここで提供した情報が他の回答に加えて誰かにさらに役立つことを願っています。