Ensures landmarks are unique

landmark-unique is a new best practice rule ensures that landmarks have a unique role or accessible name (i.e. role, label, title) combination.

Fixing the problem

Correct markup solutions

landmark-unique contains eleven passing markup solutions:

<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>

Incorrect markup solutions

landmark-unique contains seventeen markup solutions that fail test criteria:

<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>