Callout
Callouts are an excerpt of text used to draw attention to important or interesting information. They should not be confused with Page alerts.
import { ... } from '@ag.ds-next/react/callout';Learn more about how to meet WCAG success criteria when implementing callouts. This makes them accessible and inclusive for users of all abilities and situations.
The callout component passed accessibility testing in 2022 and 2024.
Clear and descriptive links
Learn more about creating clear and descriptive links for your callout by visiting AgDS Clear communication – Links.
Content structure
Requirements
- Meaningful and logical sequence of content in the callout.
- Information relationships are understood and conveyed by assistive technology.
- Where used, headings clearly describe or introduce content.
- Use
h2toh5to identify headings in callouts.
Benefits
- Creates a logical structure for screen reader navigation.
- Ensures content makes sense regardless of the technology used.
- Helps users understand the organisation and relationship of content.
- Makes the information easier to locate.
- Increases understanding of the content that comes next.
WCAG references
- Understanding success criterion 1.3.1 Info and relationships
- Understanding success criterion 1.3.2 Meaningful sequence
- Understanding success criterion 2.4.6 Headings and labels