Offscreen content is hidden from assistive technology
Offscreen-Inhalte beziehen sich auf den Inhalt einer Webseite, der zwar vorhanden ist, für Benutzer jedoch nicht sichtbar ist, da er außerhalb des sichtbaren Bereichs des Bildschirms liegt. Dieser Inhalt wird oft verwendet, um die Benutzererfahrung zu verbessern, indem er zusätzlichen Kontext oder Informationen bereitstellt, kann aber auch für Benutzer mit Hilfstechnologien wie Bildschirmleseprogrammen eine Herausforderung darstellen.
Bildschirmleseprogramme sind Softwareprogramme, die den Inhalt einer Webseite für Benutzer, die blind oder sehbehindert sind, laut vorlesen. Sie basieren auf dem zugrunde liegenden Code einer Webseite, um die Struktur und Hierarchie des Inhalts zu verstehen und zu bestimmen, welche Elemente wichtig sind und laut vorgelesen werden sollten. Wenn Offscreen-Inhalte für Bildschirmleseprogramme verborgen sind, kann es für Benutzer mit Hilfstechnologien schwierig oder unmöglich sein, auf sie zuzugreifen und sie zu verstehen.
Es gibt mehrere Möglichkeiten, wie Offscreen-Inhalte vor Hilfstechnologien verborgen werden können, darunter das Verwenden von CSS, um den Inhalt außerhalb des Bildschirms zu positionieren, das Verwenden von display:none
oder visibility:hidden
Styles oder das Verwenden des aria-hidden
Attributs. Während diese Techniken nützlich sein können, um Inhalte zu verbergen, die für den Benutzer nicht relevant sind, sollten sie mit Vorsicht angewendet werden, wenn es um Offscreen-Inhalte geht, die für Benutzer mit Hilfstechnologien wichtig sind.
Eine Möglichkeit, sicherzustellen, dass Offscreen-Inhalte für Hilfstechnologien zugänglich sind, besteht darin, das aria-label
oder aria-labelledby
Attribut zu verwenden, um eine beschreibende Bezeichnung für den Inhalt bereitzustellen. Dies ermöglicht es Bildschirmleseprogrammen, die Anwesenheit des Inhalts anzukündigen und Benutzern die Möglichkeit zu geben, darauf zu navigieren.
Eine weitere Option ist die Verwendung des tabindex
Attributs, um den Offscreen-Inhalt fokussierbar zu machen, wodurch Benutzern ermöglicht wird, auf ihn zu wechseln und ihn mithilfe der Tastaturnavigation zu erreichen.
Insgesamt ist es wichtig, die Barrierefreiheit von Offscreen-Inhalten auf Webseiten zu berücksichtigen, da sie die Benutzererfahrung für diejenigen mit Hilfstechnologien erheblich beeinflussen kann. Indem sichergestellt wird, dass Offscreen-Inhalte ordnungsgemäß gekennzeichnet und fokussierbar sind, können Webentwickler eine inklusive und barrierefreie Erfahrung für alle Benutzer ermöglichen.
Ähnliche Artikel:
Die Seite enthält eine Überschrift, einen Link zum Überspringen oder einen Landmark-Bereich `<object>`-Elemente haben alternativen Text Definitionslistenelemente sind in `<dl>`-Elemente eingefasst `[aria-*]`-Attribute entsprechen ihren Rollen Visual order on the page follows DOM order `button`-, `link`- und `menuitem`-Elemente haben zugängliche Namen `[role]`-Elemente sind ihren jeweils erforderlichen übergeordneten Elementen untergeordnet ARIA-IDs sind eindeutig Das `<html>`-Element hat einen gültigen Wert für sein `[lang]`-Attribut Dieses Dokument verwendet `<meta http-equiv="refresh">` nicht