Accessible Cards

Comprehensive guide to creating accessible card components with proper heading hierarchy and keyboard support.

1.3.12.1.1

Semantic Card

Cards should use proper heading hierarchy. The card title should be a heading element (<h2>, <h3>, etc.) appropriate to the page structure. Use semantic HTML elements and ensure the card content is readable in a logical order. If the card is clickable, use a link or button, not a div with onClick.

Interactive Example

Test the accessible semantic card implementation

Testing Guide

Keyboard Navigation

•Tab through card links/buttons
•Enter activates clickable cards

Screen Reader

•Heading hierarchy is clear
•Card content is readable

Card Title

Card description

This is a semantic card with proper heading structure and accessible content.

Clickable Card

This entire card is clickable as a link

When a card is clickable, wrap it in a link or button element, not just a div with onClick.

Code Implementation

Accessible semantic card implementation

Best Practices

Accessibility Considerations

Key Points:

•Use proper heading hierarchy in cards
•Ensure card content is readable in logical order
•Use semantic HTML (article, section, etc.)
•If clickable, use link or button, not div
•Provide clear focus indicators

Warnings:

⚠Don't use divs with onClick for clickable cards
⚠Don't skip heading levels

Additional Resources

Related WCAG Criteria