landmark-complementary-is-top-level

Ensure that <aside> elements or elements with role=complementary are not an internal part of another ARIA landmark

Description

To prevent confusion in document structures, avoid nesting ARIA landmarks with <aside> elements or elements using role="complementary" inside other landmarks.

Why is it important?

Complementary content refers to additional content that is secondary to the main theme of a document or page. Screen reader users have the ability to skip over complementary content when it is presented at the top level of the accessibility API. However, if an <aside> element is embedded within another landmark, it can potentially disrupt screen reader functionality, preventing users from effectively navigating through the complementary content.

How to fix?

Avoid nesting <aside> elements or elements with role="complementary" within other content that is marked up as a landmark.

Tags

cat.semantics, best-practice

References

• MDN ARIA Complementary Role
• W3C ARIA Complementary Landmark
• Deque University: landmark-complementary-is-top-level