Accessibility / Structure & Headings / Landmarks Bookmarklet

The Landmarks bookmarklet identifies and highlights all ARIA landmark regions and HTML5 semantic elements on the page. Detects banner, navigation, main, complementary, contentinfo, search, form, and region landmarks using both native HTML5 elements (header, nav, main, aside, footer) and ARIA roles. Each landmark is highlighted with a colored outline and semi-transparent background, with a label showing the element type. Useful for verifying that pages have proper landmark structure for screen reader navigation. Reload the page to remove highlights.

javascript:%21function()%7Bconst%20e%3Ddocument.querySelectorAll(%5B%22header%22%2C%22nav%22%2C%22main%22%2C%22aside%22%2C%22footer%22%2C%22section%22%2C%22aside%3Anot(%5Brole%5D)%22%2C%27%5Brole~%3D%22complementary%22%5D%27%2C%27%5Brole~%3D%22COMPLEMENTARY%22%5D%27%2C%22footer%22%2C%27%5Brole~%3D%22contentinfo%22%5D%27%2C%27%5Brole~%3D%22CONTENTINFO%22%5D%27%2C%27%5Brole~%3D%22application%22%5D%27%2C%27%5Brole~%3D%22APPLICATION%22%5D%27%2C%22nav%22%2C%27%5Brole~%3D%22navigation%22%5D%27%2C%27%5Brole~%3D%22NAVIGATION%22%5D%27%2C%27%5Brole~%3D%22region%22%5D%5Baria-labelledby%5D%27%2C%27%5Brole~%3D%22REGION%22%5D%5Baria-labelledby%5D%27%2C%27%5Brole~%3D%22region%22%5D%5Baria-label%5D%27%2C%27%5Brole~%3D%22REGION%22%5D%5Baria-label%5D%27%2C%22section%5Baria-labelledby%5D%22%2C%22section%5Baria-label%5D%22%2C%22header%22%2C%27%5Brole~%3D%22banner%22%5D%27%2C%27%5Brole~%3D%22BANNER%22%5D%27%2C%27%5Brole~%3D%22search%22%5D%27%2C%27%5Brole~%3D%22SEARCH%22%5D%27%2C%22main%22%2C%27%5Brole~%3D%22main%22%5D%27%2C%27%5Brole~%3D%22MAIN%22%5D%27%5D.join(%22%2C%20%22))%2Co%3D%5B%22%23ffcfd6%22%2C%22%23ffa639%22%2C%22%23f7dc6f%22%2C%22%23007531%22%2C%22%233498db%22%2C%22%23d30000%22%2C%22%231a45bc%22%5D%2Cl%3D%5B%22%23000%22%2C%22%23000%22%2C%22%23000%22%2C%22%23fff%22%2C%22%23fff%22%2C%22%23fff%22%2C%22%23fff%22%5D%3Be.forEach((e%2Ca)%3D%3E%7Bconst%20t%3Do%5Ba%25o.length%5D%2Cn%3Dl%5Ba%25l.length%5D%3Be.style.outline%3D%603px%20solid%20%24%7Bt%7D%60%2Ce.style.backgroundColor%3D%60%24%7Bt%7D20%60%2Ce.style.position%3D%22relative%22%3Bconst%20r%3Ddocument.createElement(%22div%22)%3Br.textContent%3De.tagName.toLowerCase()%2Cr.style.position%3D%22absolute%22%2Cr.style.top%3D%220%22%2Cr.style.left%3D%220%22%2Cr.style.backgroundColor%3Dt%2Cr.style.color%3Dn%2Cr.style.padding%3D%222px%205px%22%2Cr.style.fontSize%3D%220.75rem%22%2Cr.style.fontFamily%3D%22Arial%2C%20sans-serif%22%2Cr.style.zIndex%3D%229999%22%2Ce.appendChild(r)%7D)%7D()%2Cconsole.log(%22%5CnSource%3A%20https%3A%2F%2Fcodepen.io%2Fpatte%2Fpen%2FWNVxVbK%5CnBookmarklet%20name%3A%20Landmarks%20(WCAG%20SC%201.3.1)%5Cn%22)%3B