Landmarks müssen eine eindeutige Rolle oder eine einzigartige Kombination aus role, label und title haben
Blind
Hören
WCAG 2.2 Level A
Von Menschen für Menschen geschrieben und recherchiert
Casandra Visser
Autor
Yotam Flohr
Forscher
Ritvik Shrivastava
Fachmännisch überprüft von
Kommentare:
0
Web-Accessibility-Standards erfordern, dass jedes Landmark entweder eine einzigartige Rolle oder eine individuelle Kombination aus role, label und title (zugänglicher Name) hat.
Warum es wichtig ist
Die Regel landmark-unique stellt sicher, dass keine doppelten Landmarks mit identischer Rolle oder Bezeichnung existieren. Dies verbessert die Navigation für Screenreader-Nutzer, da sie nicht mehrfach durch ähnliche Landmarks navigieren müssen, um den gesuchten Inhalt zu finden.
Behebung des Problems
Jedes Landmark sollte eine einzigartige Rolle oder eine unverwechselbare Kombination aus role, aria-label oder title haben.
Falls mehrere Landmarks derselben Art benötigt werden, sollten sie jeweils eine eindeutige Bezeichnung erhalten.
Doppelte Landmarks ohne klaren Unterschied sollten vermieden werden.
Gutes Codebeispiel
Codebeispiel
Haupt-ID="pass-main">Nur Haupt-ID</main>
<header id="pass-header">Nur Header-ID</header>
<form id="pass-form-aria-label-1" aria-label="form-label-1"></form>
<form id="pass-form-aria-label-2" aria-label="form-label-2"></form>
<div id="form-label-1">Formular mit Label-1</div>
<div id="form-label-2">Formular mit Label-2</div>
<form id="pass-form-aria-labelledby-1" aria-labelledby="form-label-1"></form>
<form id="pass-form-aria-labelledby-2" aria-labelledby="form-label-2"></form>
<form id="pass-aside-aria-label-1" aria-label="aside-label-1"></form>
<form id="pass-aside-aria-label-2" aria-label="aside-label-2"></form>
<div id="aside-label-1">aside-mit-label-1</div>
<div id="aside-label-2">aside-mit-label-2</div>
<form id="pass-aside-aria-labelledby-1" aria-labelledby="aside-label-1"></form>
<form id="pass-aside-aria-labelledby-2" aria-labelledby="aside-label-2"></form>
<footer id="pass-footer">Nur Fußzeile</footer>
Kopieren
Schlechtes Codebeispiel
Codebeispiel
<main id="violation-main-1">Erster Hauptbereich</main>
<iframe src="landmark-unique/frame.html" title="iframe mit Hauptbereich" id="frame"></iframe>
<header id="violation-header-1">Erste Kopfzeile</header>
<header id="violation-header-2">Zweite Kopfzeile</header>
<form id="violation-form-aria-label-1" aria-label="formular-beschriftung"></form>
<form id="violation-form-aria-label-2" aria-label="formular-beschriftung"></form>
<div id="form-label-1">formular-mit-beschriftung</div>
<div id="form-label-2">formular-mit-beschriftung</div>
<form id="violation-form-aria-labelledby-1" aria-labelledby="form-label-1"></form>
<form id="violation-form-aria-labelledby-2" aria-labelledby="form-label-2"></form>
<form id="violation-aside-aria-label-1" aria-label="seitenbereich-beschriftung"></form>
<form id="violation-aside-aria-label-2" aria-label="seitenbereich-beschriftung"></form>
<div id="aside-label-1">seitenbereich-mit-beschriftung</div>
<div id="aside-label-2">seitenbereich-mit-beschriftung</div>
<form id="violation-aside-aria-labelledby-1" aria-labelledby="aside-label-1"></form>
<form id="violation-aside-aria-labelledby-2" aria-labelledby="aside-label-2"></form>
<footer id="violation-footer-1">Erste Fußzeile</footer>
<footer id="violation-footer-2">Zweite Fußzeile</footer>
<div id="form-label-3">iframe-formular-mit-beschriftung</div>
<div id="violation-form-through-iframe-1" role="form" aria-labelledby="form-label-3"></div>
<div id="violation-nav-through-iframe-1" role="navigation"></div>
<div id="violation-role-banner" aria-label="doppelte beschriftung" role="banner"></div>
<div id="violation-role-banner-2" aria-label="doppelte beschriftung" role="banner"></div>
<div id="violation-role-complementary" role="complementary"></div>
<div id="violation-role-complementary-2" role="complementary"></div>
<div id="violation-role-contentinfo" aria-label="doppelte beschriftung für inhaltsinfo" role="contentinfo"></div>
<div id="violation-role-contentinfo-2" aria-label="doppelte beschriftung für inhaltsinfo" role="contentinfo"></div>
<div id="violation-role-main" aria-label="doppelte beschriftung für hauptinhalt" role="main"></div>
<div id="violation-role-main-2" aria-label="doppelte beschriftung für hauptinhalt" role="main"></div>
<div id="violation-role-region" role="region"></div>
<div id="violation-role-region-2" role="region"></div>
<div id="violation-role-search" role="search"></div>
<div id="violation-role-search-2" role="search"></div>
<nav id="violation-nav" aria-label="doppelte beschriftung für navigation"></nav>
<nav id="violation-nav-2" aria-label="doppelte beschriftung für navigation"></nav>
<section id="violation-section" aria-label="doppelte beschriftung für abschnitt"></section>
<section id="violation-section-2" aria-label="doppelte beschriftung für abschnitt"></section>
Kopieren