Unsichtbare Texte NICHT mit "display:none" oder "visibility:hidden" auszeichnen

Unsichtbare Texte werden bei verlinkten Navigationen oder für die ausführlichere Beschriftung von "mehr..."-Links oft eingesetzt. Diese werden dann vom Screenreader per Sprache vorgelesen oder auf der Braillezeile angezeigt. Aber nur, wenn die dazugehörige CSS-Eigenschaft korrekt ist.
Person bedient Laptop

«display:none» und «visibility-hidden» sollten niemals verwendet werden. Folgende CSS-Lösung trägt jedoch dazu bei, dass der Text nur über die Sprachausgabe oder auf der Braillezeile ausgegeben wird.

.unsichtbar {
position:absolute;
left:-1000px;
top:-1000px;
width:0;
height:0;
overflow:hidden;
display:inline;
}

Mit diesem simplen Trick wird der Text ausserhalb des Bildschirmrandes geschrieben. Da der Screenreader aber Positionierungen ignoriert und alles linksbündig darstellt, gibt er den entsprechenden Text auch korrekt aus.

Schreiben Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahren Sie mehr darüber, wie Ihre Kommentardaten verarbeitet werden .