Accessibility Checklist: ARIA Landmarks
Bobby Bailey
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.