The Card component is very flexible. Because of this it can create serious accessibility problems if used incorrectly. It is your responsibility as developer to follow these basic rules when using it:
Never put other interactive elements such as <Button>, <Radio>, <Checkbox>, <Link> etc inside a <ClickableCard> or a <CardActionArea>!
Do not use tabIndex or onClick to make a regular Card interactive. Use <ClickableCard> instead.
When using the active variant, make sure to also include another visual cue such as an icon or text that tells the user if the card is selected or unselected. The green frame does not have enough contrast. Refer to the Selectable Card story.
Accessibility
The Card component is very flexible. Because of this it can create serious accessibility problems if used incorrectly. It is your responsibility as developer to follow these basic rules when using it:
<Button>,<Radio>,<Checkbox>,<Link>etc inside a<ClickableCard>or a<CardActionArea>!tabIndexoronClickto make a regular Card interactive. Use<ClickableCard>instead.activevariant, make sure to also include another visual cue such as an icon or text that tells the user if the card is selected or unselected. The green frame does not have enough contrast. Refer to the Selectable Card story.