Was bedeutet sr-only in Bootstrap 3?

Question

Wofür wird die Klasse sr-only verwendet? Ist sie wichtig oder kann ich sie entfernen? Funktioniert auch ohne.

Hier ist mein Beispiel:

    Abteilungen

    Dropdown umschalten

        Verkauf
        Technisch

        Alle anzeigen

Answer 1

Laut der Dokumentation von Bootstrap wird die Klasse verwendet, um Informationen, die nur für Screenreader bestimmt sind, aus dem Layout der gerenderten Seite auszublenden.

Screenreader haben Probleme mit Ihren Formularen, wenn Sie für jedes Eingabefeld kein Label einfügen. Für diese Inline-Formulare können Sie die Labels mithilfe der Klasse .sr-only ausblenden.

Hier ist ein Beispiel für verwendete Stile:

.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 auch ohne.

Es ist wichtig, entfernen Sie es nicht.

Sie sollten immer Screenreader für Barrierefreiheitszwecke berücksichtigen. Durch die Verwendung der Klasse wird das Element ohnehin ausgeblendet, daher sollten Sie keinen visuellen Unterschied sehen.

Wenn Sie mehr über Barrierefreiheit lesen möchten:

• Web Accessibility Initiative (WAI)

• MDN Barrierefreiheitsdokumentation

Answer 2

Wie JoshC bereits sagte, wird die Klasse .sr-only verwendet, um die Informationen, die nur für Bildschirmleser verwendet werden, visuell zu verbergen. Aber nicht nur, um Labels zu verstecken. Sie könnten auch andere Elemente wie den "Zum Hauptinhalt springen" Link, Symbole mit alternativen Texten usw. verbergen.

Übrigens, Sie können auch .sr-only sr-only-focusable verwenden, wenn Sie möchten, dass das Element sichtbar wird, wenn es fokussiert ist, z.B. "Zum Hauptinhalt springen".

Wenn Sie Ihre Website noch zugänglicher machen möchten, empfehle ich hier zu beginnen:

• Barrierefreiheit @Google - Web-Grundlagen
• Barrierefreiheits-Entwicklerleitfaden (mein persönlicher Favorit)
• WebAIM-Prinzipien + WebAIM WCAG-Checkliste
• Barrierefreiheit @ReactJS (viele gute Ressourcen und allgemeine Informationen)

Warum?

Laut Weltgesundheitsorganisation haben 285 Millionen Menschen Sehbeeinträchtigungen. Daher ist es wichtig, eine Website barrierefrei zu gestalten.

WICHTIG: Vermeiden Sie es, behinderte Benutzer anders zu behandeln. Versuchen Sie im Allgemeinen, die Entwicklung von unterschiedlichen Inhalten für verschiedene Benutzergruppen zu vermeiden. Versuchen Sie stattdessen, den bestehenden Inhalt barrierefrei zu gestalten, so dass er einfach funktioniert und für alle verwendet werden kann, ohne speziell auf z.B. Bildschirmleser abzuzielen. Versuchen Sie also nicht, das Rad neu zu erfinden. Andernfalls ist die resultierende Barrierefreiheit oft schlechter als wenn überhaupt nichts entwickelt worden wäre. Wir Entwickler sollten nicht davon ausgehen, wie diese Benutzer unsere Website verwenden werden. Seien Sie also sehr vorsichtig, wenn Sie solche Lösungen entwickeln müssen. Offensichtlich ist ein "Zum Inhalt springen" Link ein gutes Beispiel für solchen Inhalt, wenn er sichtbar ist, wenn er fokussiert ist. Aber es gibt auch viele schlechte Beispiele. Dazu gehört das Verbergen eines "Zoom" Buttons für einen bildschirmleser, weil angenommen wird, dass er für blinde Benutzer keine Relevanz hat. Aber überraschenderweise wird die Zoom-Funktion tatsächlich von blinden Benutzern verwendet! Sie möchten Bilder herunterladen, wie viele andere Benutzer auch (sogar in hoher Auflösung), um sie an jemand anderen zu senden oder sie in einem anderen Kontext zu verwenden. Quelle - Weiterlesen @ADG: Schlechte ARIA-Praktiken

Answer 3

Ich habe das in meinem Navbar-Beispiel gefunden und vereinfacht.

  Standard
  Statisch oben
  Fixiert oben (aktuell)

Sie sehen, welches ausgewählt ist (Der sr-only Teil ist versteckt):

• Standard
• Statisch oben
• Fixiert oben

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

• Standard
• Statisch oben
• Fixiert oben (aktuell)

Aufgrund dieser Technik sollen sich blinde Menschen auf Ihrer Website leichter navigieren können.

Answer 4

.sr-only ist ein Klassenname, der speziell für Bildschirmlesegeräte verwendet wird. Sie können jeden Klassennamen verwenden, aber .sr-only wird ziemlich häufig verwendet. Wenn Sie sich nicht um die Entwicklung mit Compliance-Gedanken kümmern, kann es entfernt werden. Es wird die Benutzeroberfläche nicht beeinflussen, wenn es entfernt wird, da der CSS für diese Klasse für Desktop- und Mobilgeräte-Browser nicht sichtbar ist.

Es scheint hier einige fehlende Informationen zur Verwendung von .sr-only zu geben, um ihren Zweck zu erklären und für Bildschirmlesegeräte geeignet zu sein. In erster Linie ist es sehr wichtig, immer beeinträchtigte Benutzer im Blick zu behalten. 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-only reicht jedoch nicht aus, um die 508-Konformität zu gewährleisten. Es gibt auch die Verwendung von Farben, Schriftgrößen, Zugänglichkeit über Navigation, Beschreibungen, Verwendung von Aria und vieles mehr zu beachten.

Aber was macht der CSS von .sr-only tatsächlich? Es gibt mehrere leicht unterschiedliche Varianten des CSS, die für .sr-only verwendet werden können. Eine der wenigen, die ich benutze, sieht wie folgt aus:

.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 versteckt Inhalte in Desktop- und Mobilbrowsern, die mit dieser Klasse umschlossen sind, wird jedoch von einem Bildschirmlesegerät wie JAWS erkannt: http://www.freedomscientific.com/Products/Blindness/JAWS. Das Beispiel-Markup sieht wie folgt aus:

    Klicken Sie, um die Website zu öffnen
    Dies ist ein externer Link

Zusätzlich wird ein DOM-Element, das eine Breite und Höhe von 0 hat, nicht vom DOM erkannt. Deshalb verwendet das obige CSS width: 1px; height: 1px;. Durch Verwendung von display: none und Einstellung Ihres CSS auf height: 0 und width: 0 wird das Element nicht vom DOM erkannt und daher problematisch. Das oben genannte CSS mit width: 1px; height: 1px; ist nicht alles, was Sie tun, um den Inhalt für Desktop- und Mobilbrowser unsichtbar zu machen (ohne overflow: hidden würde Ihr Inhalt immer noch auf dem Bildschirm angezeigt), und für Bildschirmlesegeräte sichtbar zu machen. Den Inhalt vor Desktop- und Mobilbrowsern zu verstecken wird durch Hinzufügen eines Versatzes von width: 1px und height: 1px, wie zuvor erwähnt, durch Verwendung von erreicht:

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

Zu guter Letzt, um eine sehr genaue Vorstellung davon zu haben, was ein Bildschirmlesegerät sieht und an seinen beeinträchtigten Benutzer weitergibt, schalten Sie die Seitenformatierung in Ihrem Browser aus. Mit Firefox können Sie dies tun, indem Sie gehen zu:

Ansicht > Seitenformatierung > Kein Stil

Ich hoffe, die von mir hier bereitgestellten Informationen sind für jemanden neben den anderen Antworten weiter nützlich.

Answer 5

Die Klasse .sr-only verbirgt ein Element vor allen Geräten außer Bildschirmlesern:

Weiter zum Hauptinhalt Kombinieren Sie .sr-only mit .sr-only-focusable, um das Element wieder anzuzeigen, wenn es fokussiert ist

.sr-only {
  border: 0 !important;
  clip: rect(1px, 1px, 1px, 1px) !important; /* 1 */
  -webkit-clip-path: inset(50%) !important;
  clip-path: inset(50%) !important; /* 2 */
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
  white-space: nowrap !important; /* 3 */
}