Skip to main content

Accessibility UI Guidelines: Cards

Cards

3.12 Cards

Cards are versatile UI components used to display grouped information in a visually distinct container. Ensuring that cards are accessible is essential to make the content within them usable by everyone, including those relying on assistive technologies.

3.12.1 Semantic Markup

Use semantic HTML to structure cards. Wrap the card content in a <section> or <article> element to make it a standalone, meaningful unit.

<!-- Accessible Card -->
<article aria-labelledby="cardTitle1">
    <h3 id="cardTitle1">Card Title</h3>
    <p>Description of the card content goes here. This provides a brief summary or details.</p>
    <a href="/details" aria-label="Read more about Card Title">Read More</a>
</article>

3.12.2 Keyboard Accessibility

Ensure cards and their interactive elements (e.g., links, buttons) are keyboard accessible. Users should be able to navigate to and interact with all actionable elements using the Tab key.

<!-- Keyboard Accessible Card -->
<article>
    <h3>Card Title</h3>
    <p>Card content goes here.</p>
    <button>Action</button>
    <a href="/learn-more">Learn More</a>
</article>

3.12.3 Focus Management

Provide clear focus styles for interactive elements within cards to assist keyboard users in identifying their current position.

/* Focus Styles for Card Elements */
article button:focus,
article a:focus {
    outline: 2px solid #005fcc;
    background-color: #e0f0ff;
}

3.12.4 ARIA Attributes

Use ARIA attributes to enhance accessibility when needed. For example, use aria-labelledby and aria-describedby to associate a card's title and description.

<!-- Card with ARIA Attributes -->
<article aria-labelledby="cardTitle2" aria-describedby="cardDesc2">
    <h3 id="cardTitle2">Card Title</h3>
    <p id="cardDesc2">Brief description of the card content.</p>
    <a href="/details" aria-label="Read more about Card Title">Learn More</a>
</article>

3.12.5 Responsive Design

Design cards to be responsive and adapt gracefully to different screen sizes. Use flexible layouts and ensure content remains legible on smaller screens.

/* Responsive Card Styling */
article {
    border: 1px solid #ccc;
    border-radius: 0.3rem;
    padding: 1rem;
    margin: 1rem 0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

article h3 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

article p {
    font-size: 1rem;
    margin-bottom: 1rem;
}

@media (max-width: 768px) {
    article {
        padding: 0.8rem;
    }

    article h3 {
        font-size: 1.3rem;
    }
}

3.12.6 Testing Cards for Accessibility

Test cards with assistive technologies to ensure they are accessible. Verify correct keyboard navigation, focus management, and screen reader announcements.

// Test Checklist
// - Verify all interactive elements are keyboard accessible.
// - Ensure proper use of ARIA attributes, like aria-labelledby.
// - Check screen reader announcements for card content and actionable elements.
// - Validate responsive behavior for smaller screens.

Best Practices for Cards

  • Use Semantic HTML: Structure cards with <section> or <article> to provide meaning and context.
  • Ensure Keyboard Accessibility: Make all interactive elements within cards navigable using the keyboard.
  • Provide Visible Focus Styles: Highlight focused elements to aid keyboard users.
  • Use ARIA Attributes: Enhance accessibility with attributes like aria-labelledby and aria-describedby.
  • Design Responsively: Ensure cards adapt to different screen sizes and remain usable on mobile devices.
  • Test Thoroughly: Regularly test cards with assistive technologies and automated tools to identify and resolve accessibility issues.