Was ist sr-only in Bootstrap 3?

Wofür wird die Klasse sr-onlyverwendet? Ist es wichtig oder kann ich es entfernen? Funktioniert gut ohne.

Hier ist mein Beispiel:

<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>

Gemäß der Bootstrap-Dokumentation wird die Klasse verwendet, um Informationen, die nur für Bildschirmleser bestimmt sind, aus dem Layout der gerenderten Seite auszublenden .

Screenreader haben Probleme mit Ihren Formularen, wenn Sie nicht für jede Eingabe eine Beschriftung hinzufügen. Für diese Inline-Formulare können Sie die Beschriftungen mit der Klasse .sr-only ausblenden.

Hier ist ein Beispiel für das verwendete Styling:

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

Ist es wichtig oder kann ich es entfernen? Funktioniert gut ohne.

Es ist wichtig, entfernen Sie es nicht.

Sie sollten immer Bildschirmleser für Barrierefreiheitszwecke in Betracht ziehen. Durch die Verwendung der Klasse wird das Element sowieso ausgeblendet, daher sollten Sie keinen visuellen Unterschied feststellen.

Wenn Sie über Barrierefreiheit lesen möchten:

• Web Accessibility Initiative (WAI)

• Dokumentation zur MDN-Barrierefreiheit

Wie JoshC sagte, wird die Klasse verwendet, um Informationen zu verbergen, die für Bildschirmleser verwendet werden. Aber nicht nur, um Labels auszublenden, können Sie auch einen internen Link "Zum Hauptinhalt springen" vor den sehenden Benutzern verbergen, der für blinde Benutzer wünschenswert ist, wenn Sie eine komplexe Navigation oder Anzeigen vor dem Hauptinhalt haben.

Wenn Sie möchten, dass Ihre Website noch mehr mit Screenreadern interagiert, verwenden Sie standardisierte W3C-ARIA-Attribute. Ich empfehle auf jeden Fall, den Google-Online-Kurs zu besuchen , der nur bis zu 1-2 Stunden dauert, oder mindestens das 40-minütige Video von Google anzusehen .

Laut der Weltgesundheitsorganisation leiden 285 Millionen Menschen an Sehbehinderungen. Daher ist es wichtig, eine Website zugänglich zu machen.

UPDATE 2019:

Als Entwickler sollten wir zugängliche Inhalte bereitstellen, die einfach für alle sofort einsatzbereiten und nicht speziell auf Bildschirmleser ausgerichteten Inhalte funktionieren. Dies ist nicht immer möglich, aber seien Sie vorsichtig , wenn Sie die Einstellungen für ARIA und "Nur Bildschirmleser" verwenden . Tu es nicht, wenn du es nicht vollständig verstehst. Eine falsche Implementierung kann viel schlimmer sein, als sie überhaupt nicht zu verwenden. Bitte lesen Sie den Accessibility-Developer-Guide zu schlechten ARIA-Beispielen . Dort finden Sie auch vollständig zugängliche Komponenten / Widgets, für die keine Eingriffe "nur Bildschirmleser" erforderlich sind.

Ich habe dies im Beispiel der Navigationsleiste gefunden und vereinfacht.

<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>

Sie sehen, welches ausgewählt ist ( sr-onlyTeil ist ausgeblendet):

• Standard
• Statische Oberseite
• Feste Oberseite

Sie hören, welches ausgewählt ist, wenn Sie einen Bildschirmleser verwenden:

• Standard
• Statische Oberseite
• Feste Oberseite (aktuell)

Als Ergebnis dieser Technik sollen Blinde auf Ihrer Website einfacher navigieren.

.sr-onlyist ein Klassenname, der speziell für Screenreader verwendet wird. Sie können einen beliebigen Klassennamen verwenden, dieser wird jedoch .sr-onlyhäufig verwendet. Wenn Sie sich nicht für die Entwicklung unter Berücksichtigung der Compliance interessieren, kann diese entfernt werden. Die Benutzeroberfläche wird in keiner Weise beeinflusst, wenn sie entfernt wird, da das CSS für diese Klasse für Desktop- und Mobilgerätebrowser nicht sichtbar ist.

Hier scheinen einige Informationen über die Verwendung von .sr-onlyzu fehlen , um seinen Zweck zu erklären und für Bildschirmleser zu sein. In erster Linie ist es sehr wichtig, immer behinderte Benutzer im Auge zu behalten. Eine Beeinträchtigung ist der Zweck der 508-Konformität: https://www.section508.gov/ , und es ist großartig, dass Bootstrap dies berücksichtigt. Die Verwendung von .sr-onlyist jedoch nicht alles, was für die Einhaltung von 508 berücksichtigt werden muss. Sie haben die Verwendung von Farbe, Schriftgröße, Zugänglichkeit über Navigation, Deskriptoren, Verwendung von Arien und vielem mehr.

Aber .sr-onlywas macht das CSS eigentlich? Es gibt verschiedene leicht unterschiedliche Varianten des CSS, für die verwendet wird .sr-only. Eine der wenigen, die ich benutze, ist unten:

.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;
    }

Das obige CSS verbirgt Inhalte in Desktop- und mobilen Browsern, die mit dieser Klasse umschlossen sind, wird jedoch von einem Bildschirmleser wie JAWS gesehen: http://www.freedomscientific.com/Products/Blindness/JAWS . Das Beispiel-Markup lautet wie folgt:

<a href="#" target="_blank">
    Click to Open Site
    <span class="sr-only">This is an external link</span>
</a>

Wenn ein DOM-Element eine Breite und Höhe von 0 hat, wird das Element vom DOM nicht gesehen. Aus diesem Grund wird das oben genannte CSS verwendet width: 1px; height: 1px;. Wenn Sie display: noneIhr CSS verwenden height: 0und auf und setzen width: 0, wird das Element vom DOM nicht gesehen und ist daher problematisch. Die obige Verwendung von CSS width: 1px; height: 1px;ist nicht alles, was Sie tun, um den Inhalt für Desktop- und mobile Browser unsichtbar zu machen (ohne dass overflow: hiddenIhr Inhalt weiterhin auf dem Bildschirm angezeigt wird) und für Bildschirmleser sichtbar zu machen. Das Ausblenden des Inhalts von Desktop- und mobilen Browsern erfolgt durch Hinzufügen eines Versatzes von width: 1pxund height: 1pxzuvor erwähnt durch:

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

Um eine sehr gute Vorstellung davon zu haben, was ein Bildschirmleser sieht und an seinen beeinträchtigten Benutzer weiterleitet, deaktivieren Sie das Seiten-Styling für Ihren Browser. Für Firefox können Sie dies tun, indem Sie zu:

View > Page Style > No Style

Ich hoffe, dass die Informationen, die ich hier zur Verfügung gestellt habe, zusätzlich zu den anderen Antworten für jemanden von weiterem Nutzen sind.

Stellt sicher, dass das Objekt nur für Lesegeräte und ähnliche Geräte angezeigt wird (oder werden sollte). Es gibt mehr Sinn im Zusammenhang mit anderen Elementen mit dem Attribut 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 wird auf allen anderen Geräten angezeigt, Wortfehler : auf Textlesern .

Die .sr-onlyKlasse verbirgt ein Element für alle Geräte außerscreen readers:

Zum Hauptinhalt springen Kombinieren Sie .sr-only mit .sr-only-focusable, um das Element erneut anzuzeigen, wenn es fokussiert ist