I am writing to suggest a structural change to the Callout component. Currently, the component uses the <aside> element as its wrapper. Based on W3C HTML5 specifications and ARIA landmark standards, this is a semantic error that negatively impacts accessibility.

The <aside> element defines a "complementary" landmark. According to the W3C, a complementary landmark is a supporting section of a document designed to be tangential to the main content. However, in the Folwell design system, Callouts are frequently used to highlight primary, essential information that is central to the user's understanding of the page.

Technical Issues:

Landmark Confusion: Screen readers announce <aside> as a "complementary landmark." Users who navigate by landmarks may skip these sections, assuming they contain secondary info like sidebars or advertisements, rather than core content.

Specification Mismatch: The HTML5 spec (which I helped specify as a former invited expert on the W3C HTML5 Working Group) states that <aside> should be used for content that "could be considered separate" from the main content. Callouts are often integrated into the primary narrative by some people.

Recommended Change: Please replace the <aside> element with a <div> element (using a class for styling) or a <section> element if the callout includes a heading. This ensures the content remains part of the "main" landmark and is accessible to all users as primary information.

References:

W3C HTML5 Specification for the aside element.

W3C ARIA Landmarks Example for complementary roles.

WebAIM HTML Semantics and Accessibility Cheat Sheet.

HTML5 sectioning elements and screen readers

Thank you.