web-dev-qa-db-de.com

Was ist sr-only in Bootstrap 3?

Wofür wird die Klasse sr-only verwendet? 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>
705
kanarifugl

Gemäß bootstraps Dokumentation wird die Klasse verwendet, um Informationen auszublenden, die nur für Screenreader bestimmt sind das Layout der gerenderten Seite.

Screenreader haben Probleme mit Ihren Formularen, wenn Sie nicht für jede Eingabe eine Bezeichnung angeben. Bei diesen Inline-Formularen können Sie die Beschriftungen mit der Klasse .sr-only ausblenden.

Hier ist ein Beispiel verwendetes 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, es nicht zu entfernen.

Sie sollten für die Barrierefreiheit immer Screenreader in Betracht ziehen. Durch die Verwendung der Klasse wird das Element sowieso ausgeblendet, daher sollte kein visueller Unterschied erkennbar sein.

Wenn Sie mehr über Barrierefreiheit erfahren möchten:

730
anon

Wie JoshC sagte, wird die Klasse verwendet, um Informationen auszublenden, die für Bildschirmleser verwendet werden. Sie können jedoch nicht nur Beschriftungen ausblenden, sondern auch einen internen Link "Zum Hauptinhalt springen" vor sehenden Benutzern ausblenden, der für blinde Benutzer wünschenswert ist, wenn Sie über eine komplexe Navigation verfügen oder den Seitenkopf vor dem Inhalt hinzufügen. Sie müssten die Abwärtspfeiltaste zu oft drücken, um sie mit dem Bildschirmleser zu erreichen.

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

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

30
Hrvoje Golcic

Ich habe dies im navbar-Beispiel 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, welcher ausgewählt ist (sr-only Teil ist ausgeblendet):

  • Default
  • Statische Spitze
  • Festes Oberteil

Sie hören, welches ausgewählt ist, wenn Sie den Screenreader verwenden:

  • Default
  • Statische Spitze
  • Festverdeck (aktuell)

Durch diese Technik sollen blinde Menschen auf Ihrer Website einfacher navigieren können.

27
user669677

.sr-only ist ein Klassenname, der speziell für Screenreader verwendet wird. Sie können einen beliebigen Klassennamen verwenden, aber .sr-only wird ziemlich häufig verwendet. Wenn Sie nicht daran interessiert sind, die Konformität zu entwickeln, können Sie sie entfernen. Das Entfernen hat keinerlei Auswirkungen auf die Benutzeroberfläche, da das CSS für diese Klasse für Browser von Desktops und Mobilgeräten nicht sichtbar ist.

Anscheinend fehlen hier einige Informationen über die Verwendung von .sr-only, um seinen Zweck zu erläutern und für Screenreader zu sein. In erster Linie ist es sehr wichtig, behinderte Benutzer immer im Auge zu behalten. Wertminderung ist der Zweck der Einhaltung von 508: https://www.section508.gov/ , und es ist großartig, dass bootstrap dies berücksichtigt. Die Verwendung von .sr-only ist jedoch nicht alles, was für die 508-Konformität berücksichtigt werden muss. Sie haben die Wahl zwischen Farbe, Schriftgröße, Zugänglichkeit über Navigation, Deskriptoren, Verwendung von Arien und vielem mehr.

Aber was .sr-only betrifft - was macht das CSS eigentlich? Es gibt verschiedene leicht unterschiedliche Varianten des für .sr-only verwendeten CSS. Einer 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 Bildschirmleseprogramm wie JAWS angezeigt: http://www.freedomscientific.com/Products/Blindness/JAWS . Beispiel Markup ist 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 angezeigt. Aus diesem Grund wird im obigen CSS width: 1px; height: 1px; verwendet. Wenn Sie display: none verwenden und Ihr CSS auf height: 0 und width: 0 setzen, wird das Element vom DOM nicht gesehen und ist daher problematisch. Das obige 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 wird Ihr Inhalt weiterhin auf dem Bildschirm angezeigt) und für Bildschirmleser sichtbar. Das Ausblenden des Inhalts von Desktop- und mobilen Browsern erfolgt durch Hinzufügen eines Versatzes von width: 1px und height: 1px, die zuvor erwähnt wurden, indem Folgendes verwendet wird:

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

Deaktivieren Sie das Seiten-Styling für Ihren Browser, um eine sehr gute Vorstellung davon zu haben, was ein Bildschirmleser sieht und an den beeinträchtigten Benutzer weiterleitet. Für Firefox können Sie dies folgendermaßen tun:

View > Page Style > No Style

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

11
Pegues

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

7

Die Klasse .sr-only verbirgt ein Element für alle Geräte mit Ausnahme von screen readers:.

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

4
Ch UmarJamil