HTML Guide for aside

The issue arises because “complimentary” is not a valid value for the role attribute on the <aside> element. In HTML, the role attribute is used to provide assistive technologies with extra information about the purpose of the element. The role values are defined by the WAI-ARIA specification.

The correct role for an <aside> element, if explicitly needed, would be complementary (note the spelling with an “e” instead of an “i”). However, the <aside> element has an implicit ARIA role of complementary, and thus it is typically unnecessary to explicitly specify this role unless you are using advanced ARIA techniques.

Correct Example:

<aside>
  <h2>Related Information</h2>
  <p>Here you can find additional resources and links.</p>
</aside>

If you want to explicitly define the role:

<aside role="complementary">
  <h2>Related Information</h2>
  <p>Here you can find additional resources and links.</p>
</aside>

Make sure to always use correct ARIA attributes and values to maintain accessibility for users relying on assistive technologies. For a comprehensive list of roles available for usage, refer to the WAI-ARIA specifications.

Using the <aside> element will automatically communicate a section has a role of complementary, so specifying the role="complementary" is redundant.