web-dev-qa-db-ja.com

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>
htmlcsstwitter-bootstraptwitter-bootstrap-3
688
kanarifugl

ブートストラップのドキュメント によれば、このクラスはレンダリングされたページのレイアウトから screen reader だけを対象とした情報を隠すために使われます。

すべての入力にラベルを付けないと、スクリーンリーダーはフォームに問題を抱えることになります。これらのインラインフォームでは、.sr-onlyクラスを使用してラベルを非表示にすることができます。

これは example スタイルの使い方です：

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

それは重要ですか、それとも削除できますか？せずに正常に動作します。

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

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

アクセシビリティについて読むことに興味があるなら：

713
anon

JoshCが言ったように、このクラスはスクリーンリーダーに使用される情報を隠すために使用されます。ただし、ラベルを非表示にするだけでなく、複雑なナビゲーションがある場合やコンテンツの前にページヘッダーを追加する場合は、視覚障害者にとって望ましい内部リンク「メインコンテンツへスキップ」を視覚ユーザーから非表示にすることを検討してください。彼らはスクリーンリーダーでそれに到達するために何度も矢印キーを押す必要があります。

サイトがスクリーンリーダーとさらにやり取りしたい場合は、W3C標準化されたARIA属性を使用してください。 Googleオンラインコース にアクセスすることをお勧めします。 Googleの40分のビデオ 。

世界保健機関によると、2億8,500万人が視覚障害を持っています。そのため、Webサイトにアクセスできるようにすることが重要です。

30
Hrvoje Golcic

navbarの例 でこれを見つけ、単純化しました。

<ul class="nav">
  <li><a>Default</a></li>
  <li><a>Static top</a></li>
  <li><b><a>Fixed top <span class="sr-only">(current)</span></a></b></li>
</ul>

どちらが選択されているかがわかります（sr-only部分は非表示）。

  • Default
  • スタティックトップ
  • 固定長

スクリーンリーダーを使用すると、どちらが選択されているかがわかります。

  • Default
  • スタティックトップ
  • 固定トップ（現在）

このテクニックの結果として、盲目の人々はあなたのウェブサイト上でより簡単にナビゲートすることになっていました。

26
user669677

.sr-onlyはスクリーンリーダーに特に使用されるクラス名です。任意のクラス名を使用できますが、.sr-onlyはかなり一般的に使用されています。コンプライアンスを念頭に置いて開発することに関心がない場合は、削除することができます。このクラスのCSSはデスクトップやモバイルデバイスのブラウザには表示されないため、削除してもUIには影響しません。

その目的を説明するための.sr-onlyの使用およびスクリーンリーダーのための存在について、ここに欠けている情報がいくつかあるようです。何よりもまず、障害のあるユーザーに常に留意することが非常に重要です。減損は508コンプライアンスの目的です： https://www.section508.gov/ /そしてブートストラップがこれを考慮に入れるのは素晴らしいことです。しかし、.sr-onlyの使用は、508準拠のために考慮に入れる必要があるすべてではありません。色、フォントのサイズ、ナビゲーションによるアクセシビリティ、ディスクリプタ、ariaの使用などがあります。

しかし.sr-onlyのように - CSSは実際に何をしますか？ .sr-onlyに使用されているCSSには、少し異なるバリエーションがいくつかあります。私が使う数少ないものの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: noneを使用し、CSSをheight: 0およびwidth: 0に設定することによって、その要素はDOMからは見えないので問題があります。 width: 1px; height: 1px;を使用する上記のCSSは、コンテンツをデスクトップおよびモバイルブラウザから見えないようにするためだけではなく（スクリーン上にoverflow: hiddenがなくてもコンテンツは表示されます）、スクリーンリーダーには見えます。デスクトップブラウザやモバイルブラウザからコンテンツを隠すには、前述のwidth: 1pxとheight: 1pxからオフセットを追加します。

position: absolute;
margin: -1px 0 0 -1px; 
overflow: hidden;

最後に、スクリーンリーダーが見て障害のあるユーザーに何を見ているのかをよく理解するには、ブラウザのページスタイルをオフにします。 Firefoxの場合は、次のようにしてこれを実行できます。

View > Page Style > No Style

私がここで提供した情報が他の回答に加えてさらに誰かに役立つことを願っています。

10
Pegues

オブジェクトが読者や類似のデバイスにのみ表示されるようにします（または表示されるようにします）。 属性aria-hidden = "true" を持つ他の要素との関連でより意味があります。

<div class="alert alert-danger" role="alert">
  <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
  <span class="sr-only">Error:</span>
  Enter a valid email address
</div>

Glyphiconは他のすべてのデバイスに表示されます、Word Error： テキストリーダー。

6
Jaroslav Kubacek

.sr-onlyクラスは、screen readers:以外のすべてのデバイスに対して要素を隠します。

メインコンテンツにスキップする.sr-onlyと.sr-only-focusableを組み合わせて、フォーカスが合ったときにその要素を再度表示する

3
UmarJamil