Landmarks Should Have a Unique Role or role/label/title (i.e. accessible name) Combination
Blind
Hearing
WCAG 2.1 Level A
Web accessibility standards state that landmarks must have a unique role or role/label/title (i.e. accessible name) combination.
landmark-unique is a new best practice rule that ensures landmarks have a unique role or accessible name (i.e. role, label, title) combination.
Developers should ensure that all landmarks are unique.
main id="pass-main">Only main</main><header id="pass-header">Only header</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">form-with-label-1</div>
<div id="form-label-2">form-with-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-with-label-1</div>
<div id="aside-label-2">aside-with-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">Only footer</footer>
Copy
<main id="violation-main-1">First main</main>
<iframe src="landmark-unique/frame.html" title="iframe with main" id="frame"></iframe><header id="violation-header-1">First header</header>
<header id="violation-header-2">Second header</header><form id="violation-form-aria-label-1" aria-label="form-label"></form>
<form id="violation-form-aria-label-2" aria-label="form-label"></form><div id="form-label-1">form-with-label</div>
<div id="form-label-2">form-with-label</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="aside-label"></form>
<form id="violation-aside-aria-label-2" aria-label="aside-label"></form><div id="aside-label-1">aside-with-label</div>
<div id="aside-label-2">aside-with-label</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">First footer</footer>
<footer id="violation-footer-2">Second footer</footer><div id="form-label-3">iframe-form-with-label</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="duplicate label" role="banner"></div>
<div id="violation-role-banner-2" aria-label="duplicate label" 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="duplicate label for contentinfo" role="contentinfo"></div>
<div id="violation-role-contentinfo-2" aria-label="duplicate label for contentinfo" role="contentinfo"></div><div id="violation-role-main" aria-label="duplicate label for main" role="main"></div>
<div id="violation-role-main-2" aria-label="duplicate label for main" 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="duplicate label for nav"></nav>
<nav id="violation-nav-2" aria-label="duplicate label for nav"></nav><section id="violation-section" aria-label="duplicate label for section"></section>
<section id="violation-section-2" aria-label="duplicate label for section"></section>
Copy