Skip to content

card-needs-accessible-name.md

Latest commit

 

History

History
45 lines (31 loc) · 1.06 KB

card-needs-accessible-name.md

File metadata and controls

45 lines (31 loc) · 1.06 KB

Accessibility: Interactive Card must have an accessible name via aria-label, aria-labelledby, etc (@microsoft/fluentui-jsx-a11y/card-needs-accessible-name)

💼 This rule is enabled in the ✅ recommended config.

Interactive Card components must have an accessible name for screen readers.

Rule Details

This rule enforces that Card components have proper accessible names when they are interactive (clickable).

Noncompliant

<Card>
  <CardHeader>
    <Text weight="semibold">Card title</Text>
  </CardHeader>
</Card>

Compliant

<Card aria-label="Product details">
  <CardHeader>
    <Text weight="semibold">Card title</Text>
  </CardHeader>
</Card>

<Card aria-labelledby="card-title">
  <CardHeader>
    <Text id="card-title" weight="semibold">Card title</Text>
  </CardHeader>
</Card>

When Not To Use

If the Card is purely decorative and not interactive, this rule is not necessary.

Accessibility guidelines