[解決済み] Bootstrap 3 の sr-only とは何ですか？

質問

クラスとは 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;
}

重要なのか、削除してもいいのか？なくても問題なく動作します。

重要です、削除しないでください。

アクセシビリティの観点から、常にスクリーンリーダーを考慮する必要があります。このクラスを使用すると、要素が非表示になるため、視覚的な違いは見られないはずです。

アクセシビリティについて読んでみたい方

• ウェブアクセシビリティイニシアティブ（WAI）

• MDNアクセシビリティ関連文書