Skip to main content

Accessible Design System v1

Type to filter components by name, description, or keywords

Cards

Flexible container components for grouping related content. Cards provide visual boundaries and hierarchy for content organization.

Basic Card

Simple card with title and description. Use cards to group related information and improve content scanability.

Feature Card

Cards can contain multiple elements including buttons and links.

List Card

  • First item
  • Second item
  • Third item

HTML

<div class="ads-card">
    <h3>Card Title</h3>
    <p>Card content goes here. Cards are useful for grouping related information.</p>
</div>

<!-- Card with action -->
<div class="ads-card">
    <h3>Feature Card</h3>
    <p>Description of the feature or content.</p>
    <button type="button" class="ads-button-primary">Learn more</button>
</div>

CSS

.ads-card {
    background-color: var(--ads-bg-color);
    border: 1px solid var(--ads-border-color);
    border-radius: 4px;
    padding: 1.5rem;
}

.ads-card h3 {
    margin-bottom: 0.5rem;
    font-size: 1.25rem;
}

.ads-card p {
    color: var(--ads-text-secondary);
    line-height: 1.6;
}

/* Responsive grid for cards */
.ads-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
}

Accessibility Guidelines

Key Requirements

  • Semantic headings: Use proper heading hierarchy (h2, h3) for card titles
  • Sufficient contrast: Border and background colors meet 3:1 non-text contrast requirement
  • Keyboard accessible: If cards are interactive, ensure keyboard access
  • Visual hierarchy: Use consistent padding and spacing within cards
  • Responsive design: Cards should stack on mobile devices

Clickable Cards

If an entire card is clickable, consider these approaches:

  • Option 1: Wrap entire card in an anchor tag with descriptive text
  • Option 2: Use a prominent call-to-action button within the card
  • Avoid: Using JavaScript click handlers on divs without proper keyboard support

When to Use Cards

  • Content grouping: Organize related pieces of information
  • Feature highlights: Showcase products, services, or features
  • List items: Display collections of similar items (blog posts, products)
  • Dashboards: Separate different metrics or data points

Custom Implementation Notes

Card as link: If making an entire card clickable, wrap it in an anchor tag and ensure the link text is descriptive. Avoid "Click here" or "Read more" without context. Instead use "Learn more about [topic]" where the topic is visible in the link text or provided to screen readers.

Complex cards: For cards with multiple interactive elements (buttons, links), don't make the entire card clickable. This creates confusion about what is clickable and can lead to nested interactive elements, which violates accessibility guidelines.

How to Test for Accessibility

  1. Screen Reader Test:
    • Navigate through cards using headings (H key in NVDA/JAWS)
    • Verify heading hierarchy is logical
    • If cards are links, verify descriptive link text
  2. Keyboard Navigation:
    • Tab to interactive elements within cards
    • Verify all buttons and links are reachable
    • Check focus indicators are visible
  3. Visual Test:
    • Verify border provides 3:1 contrast against background
    • Test on mobile - cards should stack appropriately
    • Ensure text within cards meets 4.5:1 contrast

References