787

クラスは何の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>
4

6 に答える 6

817

ブートストラップのドキュメントによると、このクラスは、レンダリングされたページのレイアウトからスクリーン リーダー専用の情報を非表示にするために使用されます。

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

使用されるスタイリングの例を次に示します。

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

それは重要ですか、それとも削除できますか? なくても問題なく動作します。

削除しないでください。

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

アクセシビリティについて読むことに興味がある場合:

于 2013-11-03T21:53:03.530 に答える
37

JoshC が言ったように、クラス.sr-onlyはスクリーン リーダーのみに使用される情報を視覚的に隠すために使用されます。しかし、ラベルを隠すだけではありません。「メインコンテンツにスキップ」リンク、代替テキストを持つアイコンなど、他のさまざまな要素を非表示にすることを検討してください。

ところで。.sr-only sr-only-focusable「メインコンテンツにスキップ」など、フォーカスされたときに要素を表示する必要がある場合にも使用できます

ウェブサイトをさらにアクセスしやすくしたい場合は、ここから始めることをお勧めします。

なんで？

世界保健機関によると、2 億 8,500 万人が視覚障害を持っています。したがって、ウェブサイトをアクセシブルにすることは重要です。

重要: 無効なユーザーを別の方法で扱うことは避けてください. 一般的に言えば、ユーザーのグループごとに異なるコンテンツを開発することは避けてください。代わりに、既存のコンテンツにアクセスできるようにして、すぐに使用できるようにし、スクリーン リーダーなどを特に対象としていないすべてのユーザーに対して機能するようにします。つまり、車輪の再発明を試みてはいけません。そうしないと、結果として得られるアクセシビリティは、何も開発されていない場合よりも悪化することがよくあります。私たち開発者は、それらのユーザーが当社の Web サイトをどのように使用するかを想定すべきではありません。したがって、そのようなソリューションを開発する必要がある場合は、十分に注意してください。明らかに、「スキップ リンク」は、フォーカスされたときに表示される場合、そのようなコンテンツの良い例です。しかし、悪い例もたくさんあります。これは、目の不自由なユーザーには関係がないと仮定して、マップ上の「ズーム」ボタンをスクリーン リーダーから隠します。しかし、驚くべきことに、目の不自由なユーザーの間ではズーム機能が実際に使用されています。彼らは、他の多くのユーザーと同じように (高解像度であっても) 画像をダウンロードして、他の人に送信したり、他のコンテキストで使用したりすることを好みます。出典 - @ADG: 悪い ARIA プラクティスをもっと読む

于 2013-11-27T12:47:29.697 に答える
30

これはnavbar exampleで見つけ、単純化しました。

<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一部は非表示になっています)。

  • デフォルト
  • スタティックトップ
  • 固定トップ

スクリーン リーダーを使用している場合は、どちらが選択されているかが読み上げられます。

  • デフォルト
  • スタティックトップ
  • 固定上限 (現在)

この手法の結果として、目の不自由な人はあなたのウェブサイトをより簡単にナビゲートできるはずです。

于 2015-01-03T14:07:02.590 に答える
8

オブジェクトがリーダーや同様のデバイスにのみ表示される (または表示される必要がある) ことを確認します。属性 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 が表示され、テキスト リーダーではError:という単語が表示されます。

于 2015-01-24T11:17:58.083 に答える