How to Use ARIA Landmarks for Better Navigation
ARIA landmarks help screen reader users quickly navigate a webpage by defining key sections. Proper use improves usability without cluttering the page with unnecessary roles. Use this checklist to ensure ARIA landmarks are used effectively.
10-Point Accessible ARIA Landmarks Checklist
Number One: Use HTML5 landmarks before ARIA roles
Prefer native elements like <header>, <nav>, <main>, <aside>, and <footer> instead of adding ARIA roles manually. Only use role attributes when no native element is available.
Number Two: Each page has only one <main> landmark
The <main> element or role="main" should be unique on each page. It should contain the primary content and not include sidebars or navigation.
Number Three: Navigation sections use <nav> or role="navigation"
Landmark navigation areas should help people skip directly to menus. Ensure multiple navigation sections have unique labels (e.g., "Primary Navigation," "Footer Navigation").
Number Four: Banners and headers are correctly marked
Use <header> for site-wide branding or top-level introductions. Avoid adding role="banner" more than once per page.
Number Five: Use <aside> or role="complementary" for secondary content
This landmark should contain related information (e.g., related articles, widgets). It should not contain essential page content.
Number Six: Ensure <footer> or role="contentinfo" is used correctly
The footer should contain site-wide information like copyright, contact links, or legal notices. Do not use role="contentinfo" multiple times on the same page.
Number Seven: ARIA landmarks have unique labels when needed
If there are multiple instances of a landmark (e.g., two <nav> sections), add aria-labelledby or aria-label.
Example:
<nav aria-label="Secondary Navigation">
Number Eight: Do not add unnecessary ARIA roles
Avoid redundant roles like role="navigation" on <nav>, since screen readers already recognize it. Only use ARIA when HTML5 elements do not provide built-in accessibility.
Number Nine: Ensure screen readers can navigate landmarks
Test with NVDA, JAWS, or VoiceOver to confirm that all landmarks are announced correctly. Use the landmarks shortcut key in screen readers to verify navigation.
Number Ten: Test landmark structure with a document outline tool
Use browser extensions or developer tools to inspect and verify landmarks. Ensure they form a clear and logical structure for easy navigation.
Support my work in accessibility
Creating accessible content takes time, care, and deep testing — and I love every minute of it. From writing blog posts to doing live audits and building checklists, everything I create is designed to make the digital world more inclusive.If something here helped you — whether it saved you time, taught you something new, or gave you insight into accessibility — consider supporting my work.
You can buy me a coffee to help keep this platform going strong:
Buy Me a Coffee
Every coffee goes toward:
- Creating new articles with accessibility tips, tools, and testing methods
- Covering hosting, software, and assistive tech costs
- Supporting free education for designers, developers, and testers
- Making a meaningful difference for people living with disabilities
Thanks for being part of this mission to build a more accessible web — one page at a time.