Accessibility

Accessible callout requirements

Keep these considerations in mind.

Aria roles

You can also use the <role=“complementary”> attribute to define an ARIA complementary landmark. Use this when it sits outside the <main> content.

Example of a callout outside the main content, using role="complementary"

<div role="complementary"> <p>This is a callout that provides complementary information. It can be understood even when separated from the main content.</p> </div>

Alternatively, use the <role=“region”> attribute and assign a name if the content needs to sit within the <main> section of a page.

Example of a callout within the main content, using role="region" and aria-label to provide a name

<main> <p>This is the main content of the webpage...</p>  <div role="region" aria-label="Helpful Callout"> <p>This is a callout that provides additional information related to the main content.</p> </div> </main>