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:
The user's focus is directed to new content added to the page User focus is not accidentally trapped in a region `[id]`-Attribute zu aktiven, fokussierbaren Elementen sind eindeutig Das Kontrastverhältnis von Hintergrund- und Vordergrundfarben ist ausreichend `<dl>`-Elemente enthalten ausschließlich Gruppen aus `<dt>`- und `<dd>`-Elementen sowie `<script>`-, `<template>`- oder `<div>`-Elemente, die richtig angeordnet sind. Links haben keinen leicht erkennbaren Namen `[accesskey]`-Werte sind eindeutig Für `<th>`-Elemente und Elemente mit `[role="columnheader"/"rowheader"]` sind Datenzellen vorhanden, die sie beschreiben. `[role]`-Elemente verfügen über alle erforderlichen `[aria-*]`-Attribute Zellen in einem "`<table>`"-Element, die das Attribut "`[headers]`" enthalten, verweisen auf Zellen in derselben Tabelle.