Ein Dokument darf höchstens ein contentinfo-Landmark enthalten

Blind Hören
WCAG 2.2 Level A
Von Menschen für Menschen geschrieben und recherchiert
Foto des Experten
Ritvik Shrivastava
Fachmännisch überprüft von
Kommentare: 0
Ihre gesamte Domain
Erhalten Sie detaillierte Anweisungen, wie Sie jedes Barrierefreiheitsproblem auf Ihrer Website beheben können

Laut Web-Accessibility-Standards sollte jede Seite maximal ein contentinfo-Landmark haben.

Warum es wichtig ist

Landmarks ermöglichen es Screenreader-Nutzern, schnell und effizient durch Inhalte zu navigieren.

Wenn contentinfo mehrmals auf einer Seite vorkommt, müssen Nutzer unnötig viele Informationen durchsuchen, um den relevanten Bereich zu finden.

Weniger, aber gezielt eingesetzte Landmarks verbessern die Barrierefreiheit und Benutzerfreundlichkeit.

Behebung des Problems

Verwenden Sie role=”contentinfo” nur einmal pro Seite. 

Das Landmark sollte sich auf den Haupt-Footer der Seite beziehen und nicht innerhalb einzelner Artikel oder Abschnitte stehen. Während HTML5 mehrere <footer>-Elemente erlaubt, sollte role=”contentinfo” nur für den übergeordneten Footer genutzt werden.

Gutes Codebeispiel

Ein korrekt strukturiertes Dokument mit einem einzigen contentinfo-Landmark:

Codebeispiel
<div role="banner">Besuchen Sie Ihren Zoo!</div> <div role="main"> <h1>Das Wesen des Zoos</h1> <article> <h2>Im Zoo: Von wild zu gezähmt</h2> <p>Was Sie im Zoo sehen, sind Beispiele für angeborene Eigenschaften, die unentwickelt bleiben. [...]</p> </article> <article> <h2>Fressrausch: Die Auswirkungen des Zusammenlebens</h2> <p>Manche Tiere schließen sich von Natur aus mit Artgenossen zusammen, andere beanspruchen ihr Territorium jedoch allein. Selbst Tiere, die normalerweise harmonisch zusammenleben, können Auseinandersetzungen mit romantischen Rivalen haben, die in der beengten Umgebung eines Zoos potenziell eskalieren können. [...]</p> </article> </div> <div role="contentinfo"> <p>Präsentiert von der North American Zoo Partnership</p> </div> Kopieren

Schlechtes Codebeispiel

Hier werden contentinfo-Landmarks mehrfach innerhalb einzelner Artikel verwendet, was für Screenreader-Nutzer verwirrend ist:

Codebeispiel
<header>Besuchen Sie Ihren Zoo!</header> <h1>Das Wesen des Zoos</h1> <main class="article"> <h2>Im Zoo: Von wild zu gezähmt</h2> <p>Was Sie im Zoo sehen, sind Beispiele für angeborene Eigenschaften, die unentwickelt bleiben. [...]</p> <div role="contentinfo"> <p>[...Informationen zu diesem Artikel...]</p> </div> </main> <main class="article"> <h2>Fressrausch: Die Auswirkungen des Zusammenlebens</h2> <p>Manche Tiere schließen sich von Natur aus mit Artgenossen zusammen, andere beanspruchen ihr Territorium jedoch allein. Selbst Tiere, die normalerweise harmonisch zusammenleben, können Auseinandersetzungen mit Liebesrivalen haben, die in der beengten Umgebung eines Zoos potenziell eskalieren können. [...]</p> <div role="contentinfo"> <p>[...Informationen zu diesem Artikel...]</p> </div> </main> <footer> <p>Präsentiert von der North American Zoo Partnership</p> </footer> Kopieren