Wie man Inhalte vor Bildschirmlesern
versteckt.
Wann ist es sinnvoll Inhalte für Bildschirmleser auszublenden?
Dies kann der Fall sein, wenn sich zum Beispiel viele wiederholende dekorative Elemente auf einer Webseite befinden - Logos, Symbole und Ähnliches. Die sich wiederholende Inhalte sind für Screenreader-Nutzer nicht hilfreich und sollten daher besser nicht angezeigt werden.
Oft sind diese dekorativen Informationen oder Funktionen eines Elements visuell verständlich, aber für Benutzer von Bildschirmlesegeräten eben nicht oder sogar hinderlich.
In diesem Fall kann es sinnvoll sein, gesonderte Inhalte für Bildschirmlesegeräte bereit zu halten, welche für sehende Benutzer ausgeblendet sind. Zum Beispiel können Schaltflächen mit Bildmotiven einen zusätzlichen unsichtbaren Namen erhalten, der von Bildschirmleser erkannt und vorgelesen wird.
Je nach Zweck gibt es verschiedene Möglichkeiten, Inhalte auszublenden.
Hier stellen wir einige Möglichkeiten vor, Inhalte speziell für Bildschirmleser vorzubereiten ohne das Layout für sehende Benutzer zu verändern.
ARIA-Attribut aria-hidden
Man kann HTML-Elemnete mit dem Attribut aria-hidden versehen und diesem den Wert true zuweisen. Dies hat zur Folge, dass entsprechende Elemente von Bildschirmlesern ignoriert werden, sie aber im sichtbaren Layout unverändert dargestellt werden.
<p aria-hidden="true">Dieser Text ist auf der Seite sichtbar, aber für den Bildschirmleser verborgen. </p>Zugänglichkeitsprobleme können hier jedoch entstehen, wenn das ARIA-Attribut für ein nicht interaktives Element mit einem verschachtelten interaktiven Element verwendet wird, da das Attribut auf Kinderelemente innerhalb eines Elementes vererbt wird.
<div aria-hidden="true">
<p>Dieser Text ist auf der Seite sichtbar, aber für den Bildschirmleser verborgen. </p>
<button>Button</button>
</div>CSS-Klassen visually-hidden, sr-only, off-screen
Um Inhalte visuell auszublenden, sie aber für unterstützende Technologien zugänglich zu machen, können spezielle CSS-Stile verwendet werden die ein Bildschirmleser lesen kann. Solche Stile verwenden normalerweise die CSS-Klassen visually-hidden, vh oder sr-only. Da Inhalte mit diesen Stilen immer noch Teil des Seiteninhalts sind, werden sie von Bildschirmlesegeräten gelesen aber im Layout nicht dargestellt.
.sr-only {
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}<p class="sr-only">Dieser Text ist visuell verborgen, aber für Bildschirmleser verfügbar.</p>Die CSS-Eigenschaft clip ist veraltet, kann aber von Browsern verwendet werden, welche die neuere Eigenschaft clip-path nicht unterstützen.
Für eine CSS-Klasse, die Inhalte visuell ausblendet, kann eine Reihe von Eigenschaften verwendet werden, um das Element auf ein Quadrat von 1x1 Pixel zu verkleinern, sowie per absolute Positionierung das Element aus dem normalen Dokumentfluss zu entfernen.
Im folgenden Beispiel wird mittles CSS-Klasse sr-only einer Grafik-Schaltfläche eine bildschirmleserfreundliche aber unsichtbare Beschreibung hinzugefügt:
<label for="search">Suchen:</label>
<input id="search" type="text">
<button class="button">
<span class="sr-only">Suche auf Seite</span>
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="30"
height="30"
viewBox="0 0 17 17">
<!-- Beschreibung der Figur -->
</svg>
</button>Des weiteren wird mittels der HTML-Eigenschaft aria-hidden: true die verwendete SVG-Grafik der Schaltfläche markiert, damit der Bildschirmleser den SVG-Code nicht ausliest und den Benutzer damit verwirrt.
Beachten Sie, dass die Eigenschaften width: 0px und height: 0px Elemente aus dem Seitenstrom entfernen, so dass Bildschirmleser sie nicht lesen können.
Um Bildschirmlesern Zugriff auf das Element zu geben, es aber visuell verborgen bleiben soll, können Sie das Attribut aria-label verwenden. Dieses Attribut ist nützlich für interaktive Elemente wie Links, Schaltflächen oder sogar Formulareingabefelder. Allerdings wird das aria-label von Screenreadern für statische Elemente nicht immer zuverlässig unterstützt.
Vergessen Sie nicht, den Inhalt dieses Attributs ebenfalls zu übersetzen, wenn Ihre Webseite mehrere Sprachen unterstützt.
Eigenschaften display: none und visibility: hidden
Diese CSS-Eigenschaften können angewendet werden, wenn Sie Inhalte vor allen Benutzern verbergen möchten. Der Inhalt wird visuell von der Seite entfernt und von Bildschirmlesern ignoriert. Obwohl beide Eigenschaften für denselben Zweck angewendet werden können, verhalten sie sich doch unterschiedlich:
- visibility: hidden verbirgt den Inhalt des Tags, lässt das Element aber im normalen Seitenfluss, so dass es weiterhin Platz einnimmt.
- display: none entfernt das Element vollständig aus dem Dokument. Es nimmt keinen Platz mehr ein, obwohl es noch im ursprünglichen HTML-Code enthalten ist.
Verwenden Sie diese CSS-Eigenschaften nicht, wenn Sie möchten, dass der Inhalt von einem Bildschirmlesegerät gelesen werden kann.
<article>
<p class="visibility-visible">Dieser Text ist für alle Benutzer sichtbar.</p>
<p class="visibility-hidden">Dieser Text ist ausgeblendet, aber das Element nimmt Platz im Stream ein.
</p>
<p class="visibility-none">Dieser Text wird wieder ausgeblendet und nimmt keinen Platz auf der Seite ein.
</p>
</article>.visibility-hidden {
visibility: hidden;
}
.visibility-none {
display: none;
}Attribut hidden
Das HTML-Attribut hidden funktioniert wie display: none. Wenn Sie das Attribut zu einem Element hinzufügen, verschwindet es optisch von der Seite und nimmt keinen Platz ein, als ob es gar nicht existieren würde.
<p hidden >Dieser Text ist auf der Seite nicht sichtbar und für den Screenreader nicht sichtbar.</p>Verwenden Sie das Attribut hidden nicht, wenn Sie den Inhalt nur visuell verbergen wollen. Ein Element mit dem Attribut hidden ist für alle ausgeblendet, auch für Bildschirmleser.
