Landmark Complementary Is Top Level
Minor - WCAG LEVEL AAA
The 'landmark-complementary-is-top-level' rule addresses the placement of complementary landmarks, such as <aside> elements, within the document structure. These elements should be positioned at the top level of the document, meaning they should not be nested within other elements that are not also top-level landmarks. When complementary landmarks are improperly nested, it can confuse assistive technologies and disrupt the logical flow of the document, making navigation difficult for users relying on screen readers or keyboard navigation.
For users with disabilities, particularly those using screen readers, the correct placement of complementary landmarks is crucial. Screen readers announce landmarks to help users navigate the page efficiently. If an <aside> is nested within another element, it may not be recognized as a distinct landmark, leading to a disjointed experience. This can hinder users' ability to find supplementary content, which is often critical for understanding the context of the main content.
How to Fix:
Identify the Location: Review your HTML structure to find any
<aside>elements that are nested within other non-landmark elements (like<div>or<section>).Reorganize the HTML: Move the
<aside>elements to be direct children of the<body>or another top-level landmark element (like<header>,<nav>,<main>, or<footer>).Validate Structure: Use tools like the WAVE tool or axe accessibility checker to ensure that your changes have resolved the issue.
Best Practices:
Always use semantic HTML elements. If the content is complementary, use
<aside>appropriately.Ensure that all landmarks are easily identifiable and do not overlap in functionality. For example, do not use multiple
<aside>elements for unrelated content.Keep your document structure logical and hierarchical, which aids both accessibility and SEO.
Common Mistakes:
Nesting
<aside>within non-landmark elements, which can lead to confusion in the document hierarchy.Using
<aside>for content that is not truly complementary to the main content, which can mislead users about the relationship of the content.