Landmarks Should Have a Unique Role or role/label/title (i.e. accessible name) Combination

Yotam Flohr
Researcher
Blind Hearing
WCAG 2.1 Level A

Written and researched for humans by humans

Yotam Flohr
Researcher
Ritvik Shrivastava
Expertly reviewed by
Comments: 0
Your entire domain
Get detailed instructions on how to resolve every accessibility issue on your website

Web accessibility standards state that landmarks must have a unique role or role/label/title (i.e. accessible name) combination.

Why It Matters

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

Fixing the Issue

Developers should ensure that all landmarks are unique.

Good Code Example

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

Bad Code Example

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