...
Headings provide semantic context to the content within a section. Even if the design of a card section doesn't visibly present a heading, it's still important to include one for contextual clarity, which can be visually hidden if needed.
...
Cards
A card is a component that displays content and actions centred around a single topic in an organized and
...
visually appealing way.
...
To guarantee screen readers read card content in the correct order, follow the Structure guidelines provided below. This sequence ensures a clear and logical flow of information within the card, making it easier for users to understand and interact with the content.
...
Heading - The primary heading/title of the card for context, usually placed in a
<h3>heading.Description - The core information.
Media - Images Image or graphics graphic related to the content.
Meta Data - Additional information such as dates, authors, categories, or terms.
*CTA Link(s) - Call to action link(s). See note below.
...