| Purpose |
- When ARIA landmarks are used to identify regions of content on the page, users of assistive technologies gain programmatic access to those regions through built-in navigation commands.
- Proper use of landmarks provides a navigable structure where common sections or features of pages can be easily accessed or, conversely, skipped over if they represent repeated blocks of content.
- If the appropriate landmark roles are NOT used, the type or purpose of each content region will be less obvious to users of assistive technologies.
- In the worst-case scenario, when NO landmark roles are present, the content on the page will be presented to users of assistive technologies as a single undifferentiated block.
- Visual styling of blocks of content are often good indicators of potential landmarks (e.g.
banner, main, navigation, contentinfo).
|
| Techniques |
- Use the appropriate landmarks to identify the different regions of content on a web page.
- The most important landmark roles are
main and navigation, as nearly every page will include at least those regions.
- Other commonly used landmark roles include
banner, contentinfo, complementary and search.
- Use HTML5 sectioning elements that have a default ARIA landmark role:
main (main), nav (navigation), aside (complementary) and in some situations header (banner) and footer (contentinfo). When using these elements, the role attribute should NOT be defined.
- In HTML4 and XHTML 1.0 documents, a landmark can be created using a
div element with a role attribute and the appropriate ARIA landmark role value (e.g., role="main").
- The
search role is typically placed on a form element or a div that surrounds the search form.
- When there are multiple instances of a particular landmark role on a page, provide a unique accessible name for each landmark with the same role to enable users to differentiate among them.
- An alternative landmark can be created in HTML5 by using the
section element, which has a default landmark role of region, with an author-defined accessible name (e.g., using aria-labelledby to reference a heading element).
- Do not nest landmarks with the same role (e.g., do not place navigation landmarks within a navigation landmark). Instead, use the
section element technique described above to provide additional subsections within a standard landmark.
- If a region on a page does not correspond to one of the defined ARIA landmark roles, the
section element technique described above can be used to create a landmark container for the content.
|