Achten Sie darauf, dass nur relevante Teile der Seite für Screenreader und andere Hilfstechnologien sichtbar sind. Beispielsweise sollten Inhalte, die nicht auf dem Bildschirm zu sehen sind, für Hilfstechnologien ausgeblendet werden.
Manuelles Testen
Um zu prüfen, ob Inhalte außerhalb des Bildschirms ausgeblendet sind, sollten Sie einen Test mit Screenreadern durchführen.
- Für Mac-Nutzer finden Sie in diesem Video zur Verwendung von VoiceOver weitere Informationen.
- PC-Nutzer sollten sich dieses Video zur Verwendung von NVDA ansehen.
- Chromebook-Nutzer sollten ChromeVox, den integrierten Screenreader, lesen.
Mit der TAB können Sie sich durch die Seite bewegen. Der Screenreader sollte ausgeblendete Inhalte nicht ansagen.
Lösung
Wenn Sie Inhalte außerhalb des Bildschirms ausblenden möchten, entfernen Sie das Element, das diese Inhalte enthält, aus der Tab-Reihenfolge, indem Sie es auf display: none oder visibility: hidden festlegen.
Beispiel:
.remove-me {
visibility: hidden;
}
<button class="remove-me">Can't reach me with the TAB key!</button>
Weitere Informationen finden Sie unter Sichtbarkeit nicht sichtbarer Inhalte richtig festlegen.
Ressourcen
Quellcode für die Prüfung Inhalte außerhalb des Bildschirms sind für Hilfstechnologien ausgeblendet