Wireless Headphones
$79.99
Product Card
A product card presents key shopping details — image, name, price, rating, and a quick-add action — in an accessible, self-contained unit that exposes all content programmatically to assistive technology.
Demo
Tab through the product card below to explore its interactive elements. Notice that the card presents a single, meaningful tab stop for its primary action. With a screen reader, navigate to the card and listen to the complete context it announces — product name, price, and rating — before reaching the action button.
Bluetooth Speaker
$49.99
USB-C Fast Charging Cable… USB-C Fast Charging Cable (6ft Braided)
$14.99
What to Observe
- The product image has a descriptive alt text that conveys the product it depicts, not just a generic filename or caption.
- The card's add-to-cart button carries a full accessible name that includes the product name, so users navigating by buttons can identify which product they are adding.
- The product name, price, and star rating are all exposed as real text in the DOM — not images or purely visual elements — so screen readers can read them.
- The card is structured so that all informational content is encountered before the interactive control, allowing users to understand the product before acting on it.
- Visual focus indicators are clearly visible on interactive elements, making it easy for keyboard users to see where they are in the card.
Anatomy
[Anatomy image placeholder — will be added when assets are available]
- Card container: The outer wrapper that scopes the product's content and establishes a coherent reading unit for assistive technologies.
- Product image: A linked or stand-alone image with descriptive alt text that communicates what the product looks like.
- Product name: The primary textual identifier of the product, rendered as a heading or prominent text element so it anchors the card's reading order.
- Price display: The monetary value of the product, rendered as real text with currency context included in the accessible label.
- Star rating summary: A compact representation of the product's average rating, expressed as text (e.g., "4.2 out of 5") rather than a purely visual row of stars.
- Add-to-cart button: The primary action for the card; its accessible name includes the product name so it is uniquely identifiable among multiple cards.
Accessibility Behavior
- The product image conveys the product visually and has a meaningful alt text; if the image is a link to the product page, the alt text also serves as the link's accessible name.
- The add-to-cart button's accessible name references the product name (e.g., "Add Merino Crew Neck to cart") so each button in a list of cards is uniquely identifiable.
- The star rating is communicated as text to screen readers — not as five decorative star icons alone — so the rating value is always accessible.
- All content within the card follows a logical reading order: image, name, price, rating, action, ensuring a coherent experience when navigated linearly.
- The card has a single primary tab stop at the action button; decorative links or redundant product-image links do not create unnecessary extra tab stops.
- If an "add" confirmation or error occurs, the outcome is communicated via a live region or focus management so the user receives immediate feedback.
Common Mistakes
- Using the product name as the alt text for the product image rather than describing what is depicted, which provides less useful context when the image content matters.
- Labeling the add-to-cart button simply "Add to Cart" without the product name, making it indistinguishable from every other card's button when navigating by button.
- Rendering the star rating as five decorative star images with no text equivalent, leaving the rating value completely hidden from screen readers.
- Creating duplicate links to the product page — one on the image and one on the product name — which adds unnecessary tab stops and redundant announcements.
- Wrapping the entire card in a single large link that absorbs all interactive children, creating an enormous and confusing accessible name.
Why This Matters
Product cards appear in high-density contexts — search results, category pages, recommendation carousels — where screen reader users may encounter dozens of them in sequence. If every card's action button sounds identical, or if prices and ratings are conveyed only through visual styling, users navigating by form controls or headings have no way to distinguish one product from another. A well-structured product card ensures that every shopper, regardless of how they access the page, receives the full product context they need to make a purchase decision without extra effort.
Accessibility Validation
This component is validated against internal accessibility criteria aligned with WCAG standards, using our internally developed system, Resonance Specs.
To learn more, please contact us.
Code