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