VisuallyHidden

Text, der nicht auf dem Bildschirm angezeigt wird, aber von Screenreadern gelesen wird. Er ergänzt das, was blinde Menschen bereits durch die Position auf der Seite erfahren.

Auf dieser Seite

Playground

Ansehen als

Text

Hintergrund

HTML

<label class="feitio-stack" data-gap="2" style="inline-size: min(100%, 20rem)"><span class="feitio-visually-hidden">Filtern</span><input class="feitio-input" type="search" placeholder="…"></label>

Wann verwenden

Um dem Auge den Kontext zu geben, das aus der Position hervorgeht: "Wöchentliche Sicherung bearbeiten" auf einem "Bearbeiten"-Button innerhalb einer Tabellenzeile.

Wann nicht verwenden

Um etwas von jedermann zu verbergen: verwenden Sie die hidden-Attribute.
Für Text, den alle lesen sollten: wenn es Screenreadern hilft, hilft es fast immer auch jedem. Zeigen Sie es an.

Beispiele

Weekly backup

Der vollständige Name einer Aktion

Blind Menschen verstehen aus der Zeile; der Screenreader hört "Wöchentliche Sicherung bearbeiten".

Code anzeigen

HTML

<button type="button" class="feitio-button" data-size="small">
  Editar<span class="feitio-visually-hidden"> backup semanal</span>
</button>

Do and don't

"Bearbeiten" mit dem Namen der Zeile verborgen.

Kontext, den nur der Screenreader vermisst hat.

Don’t

"Vor dem Verlassen speichern" verborgen, nur für Screenreader.

Eine Benachrichtigung, die nur Screenreader erhalten: auch sehende Menschen brauchten sie.

Attribute

Attribut	Werte	Zum Zweck
`class="feitio-visually-hidden"`	erforderlich	Schwindet vom Bildschirm und bleibt für Screenreader bestehen.