Most web pages have a consistent overall structure – a banner with branding, navigation links, a main content section, and a footer. Screen reader users cannot perceive this visual layout, so the structure must be communicated programmatically using HTML semantic elements or ARIA Landmark roles. These allow screen reader users to quickly identify and jump to different regions of a page.
Overview
Page landmarks are regions of a web page that have special structural meaning and consistent placement. HTML semantic elements and ARIA landmark roles communicate these regions to assistive technologies, allowing screen reader users to navigate directly to the content they need rather than moving through every element on the page.
Why this matters
Sighted users intuitively recognize page structure through visual layout—header at the top, navigation on the side, main content in the center, footer at the bottom. Screen reader users cannot see this visual organization, so they must navigate sequentially through all page content or use landmarks to jump directly to sections:
- Screen reader users can jump to the main content section, skipping repetitive navigation and branding
- Users can quickly find navigation menus, search functionality, and page information without hearing every element
- Landmarks allow users to get an overview of page structure using landmark navigation features in their screen reader
- Proper landmarks reduce cognitive load and navigation time for assistive technology users
Without landmarks, screen reader users must navigate through every element linearly, making even simple pages tedious and frustrating. Landmarks are essential for creating an inclusive experience.
Techniques
HTML Semantic Elements
HTML5 includes elements that identify common page regions.
- Elements: <header>, <nav>, <main>, <aside>, <footer>, <section>, <form>
- These convey structural meaning to assistive technologies
ARIA Landmark Roles
ARIA (Accessible Rich Internet Applications) is a W3C specification.
- For more info see ARIA page
- ARIA includes role attributes to identify common page regions
- Roles: banner, navigation, main, complementary, contentinfo, region, form, search
HTML vs. ARIA: Which to Use?
ARIA roles came first and were supported before HTML5 semantic elements.
- That was well over a decade ago – assistive technologies now support both
- Best practice: use HTML semantic elements rather than ARIA roles
- ARIA should only be used when HTML doesn’t provide an equivalent element
Mapping of HTML Elements to ARIA Landmark Roles
The following table describes the relationship between HTML elements and their corresponding ARIA landmark roles:
- <header> – banner
- <nav> – navigation
- <main> – main
- <aside> – complementary
- <footer> – contentinfo
- <section> – region (when labeled)
- <form> – form (when labeled)
- No HTML equivalent – search
Label Any Region Used More Than Once
If a region is used more than once, use aria-label or aria-labelledby to distinguish.
- Common for multiple <nav> elements
- Example: <nav aria-label=”Quick links”>, <nav aria-label=”Audience menu”>, <nav aria-label=”Social”>
- UGA CMS developers should ensure all page templates include properly labeled regions
Avoid role=”application”
The application role has no corresponding HTML counterpart.
- Identifies very dynamic, desktop-like web applications
- When used, there’s an expectation the application has its own model for keyboard interaction
- Screen readers may disable normal keyboard shortcuts within application regions
- Only use if absolutely necessary and well-tested with screen readers
Common mistakes
- Missing main landmark: Every page must have one <main> landmark to identify primary content. Without it, screen reader users cannot jump to the main content area.
- Multiple unlabeled nav elements: When a page has multiple <nav> sections, each must be labeled with aria-label or aria-labelledby to distinguish them (e.g., “Main navigation” vs. “Quick links” vs. “Social media”).
- Not using landmarks consistently across pages: If your site structure varies, users cannot develop a consistent mental model of where to find content. Maintain consistent landmark placement and labeling across all pages.
- Using ARIA landmarks instead of native HTML5 elements: <header>, <nav>, <main>, <aside>, and <footer> are the best practice. ARIA landmark roles (banner, navigation, main, complementary, contentinfo) should only be used when HTML elements aren’t available.
- Nesting landmarks incorrectly: Landmarks should not be nested inside other landmarks (e.g., <main> should not contain another <main>, and <nav> should not be inside <main> unless it’s internal navigation).
- Forgetting region labels on secondary sections: Any <section> without a visible heading should have an aria-label or aria-labelledby to identify its purpose to screen reader users.
WCAG 2.1 Success Criteria
- 1.3.1 Info and Relationships (Level A) – Web pages must communicate relationships and structure through markup
- 2.4.1 Bypass Blocks (Level A) – Users must be able to navigate directly to main content, skipping repetitive elements
Getting help
If you have questions or need assistance, the Digital Accessibility Services Hub (DASH) is available to support colleges, schools, and administrative units as they build sustainable accessibility practices.
- Contact DASH at [email protected] for consultations, training, or technical assistance.
Accessibility is a shared responsibility, and every step you take makes UGA’s digital environment more inclusive.