Landmarks
Landmarks are a set of eight roles that identify the major sections of a page. Each landmark role enables assistive technology users to perceive the start and end of a feature of the high-level page structure that is usually conveyed visually with placement, spacing, color, or borders.
— Landmarks Pattern, WAI ARIA Authoring Practices Guide (APG)
Notes
Missing.css relies on the implicit landmark roles for HTML sectioning elements.
| Landmark | HTML Element |
|---|---|
| Main | <main> |
| Navigation | <nav> |
| Search | <search> |
| Banner | <body><header> |
| Contentinfo | <body><footer> |
| Complementary | <aside> |
| Form | <form> |
| Region | <section aria-label=required> |
The <header> and <footer> elements are only given landmark roles when they are direct descendants of the <body> element.
Note that in order for a <section> element to be an implicit landmark role, it must be given a valid aria-label or aria-labelledby attribute.
For best practices, please refer to the APG's Landmark Regions page.
Keyboard Interaction
Not applicable.
§ Example
Refer to the source code of the landing page demo.