Achte darauf, dass nur relevante Teile der Seite Screenreadern und anderen Hilfstechnologien ausgesetzt werden. Beispielsweise sollten Inhalte, die nicht auf dem Bildschirm zu sehen sind oder nur präsentieren, vor Hilfstechnologien verborgen sein.
Manuelles Testen
Um zu überprüfen, ob nicht sichtbare Inhalte ausgeblendet sind, müssen diese Inhalte manuell mit einem Screenreader getestet werden. – Mac-Nutzer können sich dieses Video zur Verwendung von VoiceOver ansehen. – PC-Nutzer können sich dieses Video zur Verwendung von NVDA ansehen. – Chromebook-Nutzer sollten den integrierten Screenreader ChromeVox nutzen.
Verwenden Sie die Taste TAB, um sich durch Ihre Seite zu bewegen.
Der Screenreader sollte keine verborgenen Inhalte ankündigen.
Lösung
Wenn Sie nicht sichtbare Inhalte ausblenden möchten, entfernen Sie das Element mit diesem Inhalt aus der Tab-Reihenfolge, indem Sie es auf display: none oder visibility: hidden setzen.
Beispiel:
.remove-me {
visibility: hidden;
}
<button class="remove-me">Can't reach me with the TAB key!</button>
Weitere Informationen finden Sie unter Sichtbarkeit von nicht sichtbaren Inhalten richtig einstellen.
Ressourcen
Quellcode für nicht sichtbare Inhalte wird vor der Prüfung von Hilfstechnologien verborgen