Wie verbessert die „sr-only'-Klasse von Bootstrap 3 die Zugänglichkeit von Screenreadern?

Screenreader-Unterstützung: Die Rolle von sr-only in Bootstrap 3 aufdecken

In Bootstrap 3 spielt die sr-only-Klasse eine entscheidende Rolle Rolle bei der Barrierefreiheit im Internet. Es verbirgt Informationen ausschließlich für Bildschirmleser und stellt so sicher, dass Benutzer von Hilfstechnologien effektiv auf Webseiten navigieren und diese verstehen können.

Laut der Dokumentation von Bootstrap sind reine SR-Elemente vor der visuellen Darstellung verborgen und nehmen keinen Platz im Layout ein. Dadurch können Entwickler Beschriftungen und andere Informationstexte für Bildschirmleseprogramme bereitstellen, ohne die Benutzeroberfläche zu überladen.

Betrachten Sie das folgende 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>

In diesem Beispiel ist die sr-only-Klasse aktiviert Das Span-Element verbirgt den Text „Toggle Dropdown“ aus der visuellen Ansicht. Die unterstützende Technologie liest diesen Text jedoch laut vor und informiert die Benutzer über die Funktion der Schaltfläche.

Aus Gründen der Barrierefreiheit ist es wichtig, die Nur-Sr-Klasse beizubehalten. Das Entfernen kann die Funktionalität des Bildschirmleseprogramms beeinträchtigen und Ihre Website weniger inklusiv machen.

Die Klasse wendet CSS-Stile an, um das Element zu verbergen, einschließlich:

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

Wenn Sie Barrierefreiheit priorisieren, berücksichtigen Sie Ressourcen wie die Web Accessibility Initiative (WAI) und die MDN Accessibility-Dokumentation, um die Benutzererfahrung für Menschen mit Behinderungen zu verbessern.

Das obige ist der detaillierte Inhalt vonWie verbessert die „sr-only'-Klasse von Bootstrap 3 die Zugänglichkeit von Screenreadern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!