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.

sidebar is not a valid value for the role attribute according to the ARIA (Accessible Rich Internet Applications) specification.

The role attribute is used to define the purpose of an element for assistive technologies. Only certain predefined values are valid, such as navigation, complementary, main, banner, contentinfo, and others. There is no sidebar role in the ARIA or HTML specification. If you wish to indicate a sidebar, you should use the complementary role, which is intended for content that is tangentially related to the main content, such as a sidebar.

Incorrect Example:

<div role="sidebar">
<!-- Sidebar content -->

</div>

Correct Example:

<div role="complementary">
<!-- Sidebar content -->

</div>

Alternatively, you can use the aside element, which conveys the same meaning and does not require an explicit role attribute:

<aside>
<!-- Sidebar content -->

</aside>

Using either the role="complementary" on a generic container or the semantic <aside> element ensures your HTML is valid and accessible.

sidebar is not a valid value for the role attribute according to the ARIA (Accessible Rich Internet Applications) specification.

The role attribute is used to define the purpose of an element for assistive technologies. Only certain predefined values are valid, such as navigation, complementary, main, banner, contentinfo, and others. There is no sidebar role in the ARIA or HTML specification. If you wish to indicate a sidebar, you should use the complementary role, which is intended for content that is tangentially related to the main content, such as a sidebar.

Incorrect Example:

<div role="sidebar">
<!-- Sidebar content -->

</div>

Correct Example:

<div role="complementary">
<!-- Sidebar content -->

</div>

Alternatively, you can use the aside element, which conveys the same meaning and does not require an explicit role attribute:

<aside>
<!-- Sidebar content -->

</aside>

Using either the role="complementary" on a generic container or the semantic <aside> element ensures your HTML is valid and accessible.

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