# Interactive Cards > Do you know how to build semantics and accessibles Interactive Cards using HTML and CSS? Do you know that Interactive Card can be simple and complex? Do you know what a streched technique? If the answer is no, read this post and learn how to build compliant Interactive Cards for your product! *By Micaela Avigliano — Frontend & Accessibility Engineer · Published September 21, 2026Published Sep 21, 2026* [Read the original on micaavigliano.com](https://micaavigliano.com/en/blog/interactive-cards) --- _DISCLAIMER: in this post I used AI generated images. Could I have used images from the internet? yes, but I did not. I won't make any disclaimer about the writing because as you might have noticed, it is not perfect and has a very informal and messy tone. English is not my first language and I only use it to communicate my ideas, my knowledge, etc so as long as you understand what I am trying to say, for me it is a win! I understand that reading a text generated by AI shuts the brain; it is like you automatically decide to avoid it. Bah, at least that is what happens to me._ ## [Introduction](#introduction) Lately, I have been working a lot on standardizing for myself and for my clients how should be built. To be honest, it took me a lot of time researching, building, testing and iterating to find the right examples to make this UI pattern accessible. First of all, we have to understand what a is. A Card is a UI pattern really helpful to group information in an engaging way. That information can be an image, a link, a paragraph, a button, heading, etc. Interactive Cards are an entry point into more information because the user can click a button to go to the PDP (Product Description Page) of a product or save a product to favorites, etc. What we need to know before building an interactive card: 1. Know the difference between and . _(pppss, [you can learn the difference here](http://micaavigliano.com/en/blog/link-or-button))_ 2. Know how to make the card interactive without breaking the logical HTML semantic. Interactive cards can be organized in two different categories: Simple and Complex. But first, we have to learn what a card is. ## [Static Cards](#static-cards) Since a Card is a visual group of a specific semantic concept, we have to use an HTML element that conveys that meaning and that element is... an . According to [HTML Standard](https://html.spec.whatwg.org/#the-article-element), an is: > The article element represents a complete, or self-contained, composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content. So, cool, an should be built using an `
`. We can move forward. Well, yes and no because I am pretty sure that only 10% of developers know how to build an accessible card. Let's break the example to understand its anatomy. ### [Anatomy](#anatomy) 1aria-labelledby="title"2 Kyoto, Japan Cultural Heritage Kinkaku-ji Temple3 id="title" 4'Temple of the Golden Pavilion' (...) is a Zen Buddhist temple in Kyoto, Japan and a tourist attraction. It is designated as a World Heritage Site, a National Special Historic Site, a National Special Landscape, and one of the 17 Historic Monuments of Ancient Kyoto.(...) 1. **
** wraps the whole card. 2. **aria-labelledby="title"** its value should be an IDREF pointing to the \`id\` value on the main heading inside the article. 3. **

** main topic of the card. 4. **

** a description or extra information related to the topic that the article groups. _The information from this example was extracted from [Wikipedia](https://en.wikipedia.org/wiki/Kinkaku-ji)_ ### [Code example](#code-example) ```

Main title of the article

Extra information or a description of the topic that the article groups

``` ## [Interactive Cards](#interactive-cards) are a whole different world. They combine the article structure and the interactive behavior of a link or a button and this is an extremely dangerous zone where all of you fail because you do not even know how to do a simple static card or to differentiate a link from a button. There could be a card that redirects the user to another location, opens a modal, when it receives focus or hover changes the images, expands the content or has complex interactions inside of it. I am going to cover all those cases and explain their risks and how to mitigate them. ### [Anatomy Interactive Cards](#anatomy-interactive-cards) Expand the sections to discover more information about the layers. 1. ### First Layer: `
` Should be a plain `article`. You should not force the interaction by adding a `tabindex="0"` or `tabindex="-1"` to force the focus programmatically or a `onclick` to force the functionality in JavaScript. The accessible name should be passed by adding an `aria-labelledby` pointing to the IDREF in the main heading of the card. The final step that will do the magic later is adding in CSS a `position: relative`. This property will help us to stretch that makes it the **containing block** the stretched pseudo-focus on the whole card when the main interactive element receives focus. ```
{content}
``` ``` article { position: relative; } ``` 2. ### Second Layer: `` The interactive element that will be stretched to make the whole card interactive with the techniques in points 3 and 4. ```

Kyoto, day to night

``` 3. ### Third Layer: `::after` to stretch the action target An empty pseudo-element on the link, absolutely positioned with `inset: 0`, so the entire card surface becomes the link's hit area for mouse and touch, and `.card:hover` fires anywhere on it and the whole article should have a `position: relative`. Screen reader users interact with the real link in layer 2. pss, you can make the text selectable by adding `user-select: text;` to force it. ``` .card__link::after { content: ""; position: absolute; inset: 0; } article { position: relative; } article > p { user-select: text; } ``` 4. ### Fourth Layer: `article:has([element]:focus-visible)` When the stretched interactive element in the interactive card receives focus a simil focus outline should wrap the whole card to point out that the whole area is interactive. ``` article:has(a:focus-visible) { outline: 2px solid black; outline-offset: 4px; } ``` ### [Simple Interactive Cards](#simple-interactive-cards) - Only have one interactive element with a single purpose which could be redirecting the user to a new location or expanding more information. - One stretched `` or `
``` ### [Complex Interactive Cards should NOT have a stretched link when:](#complex-interactive-cards-should-not-have-a-stretched-link-when) - The Interactive Card does not have a single destination but two CTAs, for example a "Start Trial" button and a "Compare Features" button. - The card contains controls such as swathcers, a quantity stepper or inline links. ## [Use Cases](#use-cases) 1. ### [Change the Image When Hovering or Focusing the Interactive Card](#change-the-image-when-hovering-or-focusing-the-interactive-card) Simple Interactive Card ### [](https://en.wikipedia.org/wiki/Kyoto#Culture) Hover the entire card or focus the main link to change the image of the card. This functionality is purely decorative and does not add any extra information and it is a demostration of stretched link card. 2. ### [Action Card: Save the Product to Favorites](#action-card-save-the-product-to-favorites) Complex Interactive Card with a stretched link over the whole card and then three more interactive elements: a bookmark button to save the place into favorites and a link to learn more about Kyoto in Wikipedia. ### [](https://en.wikipedia.org/wiki/Kyoto) Japan's old capital, famous for its classical Buddhist temples, imperial gardens, geisha districts, and traditional tea ceremonies. [Learn more about Kyoto in Wikipedia](https://en.wikipedia.org/wiki/Kyoto) 3. ### [Button Only Interactive Card](#button-only-interactive-card) Simple Interactive Card with a button that opens a modal dialog with more information about Kyoto. In this case, the button is not stretched because that technique is only for links. ### Kyoto, Japan Japan's old capital, famous for its classical Buddhist temples, imperial gardens, geisha districts, and traditional tea ceremonies. #### About Kyoto Kyoto served as Japan's imperial capital for over a thousand years. Today it is best known for its seventeen UNESCO-listed sites, including Kinkaku-ji and Kiyomizu-dera, and for the lantern-lit alleys of the Gion geisha district. 4. ### [Link Card](#link-card) Simple Interactive Card with a stretched link that when focused the entire card receives an outline as well to point out that the whole card is clickable via mouse. ### [Kyoto, Japan](https://en.wikipedia.org/wiki/Kyoto) Japan's old capital, famous for its classical Buddhist temples, imperial gardens, geisha districts, and traditional tea ceremonies. 5. ### [Booking Card](#booking-card) Complex Interactive Card with two action buttons: one to save to favorites and the other to book the trip and opens a modal dialog with a stepper. ### Kyoto: Fushimi Inari Path Ready to start your journey? Select your dates, determine your duration, and reserve your passage through the iconic vermilion Torii gates. 6. ### [Disclosure Card](#disclosure-card) Simple Interactive Card because it only contains one interactive element, an HTML details tag to expand more information. ### Arashiyama Bamboo Grove Kyoto, Japan Natural MonumentA historic walking path through thousands of towering stalks, renowned for its meditative natural soundscape. Arashiyama is famous for its towering bamboo paths. Walking through the soaring green stalks is like stepping into another world, where the wind rustles the leaves with a meditative sound. The Ministry of the Environment has named this grove one of the "100 Soundscapes of Japan". #### History and Heritage: Favored by Japanese nobles since the Heian Period (794–1185) for its serene autumn colors and cherry blossoms, this grove is part of a larger protected historic area. #### Visitor Information and Tips: Best time to visit Early morning (before 8:00 AM) to avoid crowds and hear the rustling wind. Admission Free and open 24/7. Getting there A 10-minute walk from JR Saga-Arashiyama Station. #### Accessibility Info: The main walking path is paved, flat, and wheelchair-accessible. Accessible restrooms are located near the main entrance and Tenryu-ji Temple. #### Eco-Tourism: Please stay on the designated paths to prevent soil compaction and protect the fragile root systems of the giant bamboo. [Explore Arashiyama on Wikipedia](https://en.wikipedia.org/wiki/Arashiyama) 7. ### [Promo Card with a Single CTA](#promo-card-with-a-single-cta) Simple Interactive Card with a stretched link, so the whole card has a visible outline when the link receives focus. ### The autumn table Stoneware, linen and hand-blown glass in warm neutrals. Free delivery over €60 until 5 October. [Shop the collection: The autumn table](#) 8. ### [Category Tile](#category-tile) A group of Simple Interactive Cards with their corresponding stretched link. - ### [Temples](#) 68 places - ### [Gardens](#) 24 places - ### [Cherry Blossoms](#) 41 places 9. ### [Product Card with a stretched link and two buttons: Add to Cart and Save](#product-card-with-a-stretched-link-and-two-buttons-add-to-cart-and-save) Complex Interactive Card with one stretched link that when focused an outline wraps the entire card and then two interactive buttons: one add to cart and the other to save to favorites. ### [Product](#) More information about the product €24 10. ### [Article Card with a Bookmark Button](#article-card-with-a-bookmark-button) Complex Interactive Card: a stretched link and a bookmark button. ### [Post about Interactive Cards](#) Interactive cards are great but complex 6 min read 11. ### [Product Card with Variant and Quantity Pickers](#product-card-with-variant-and-quantity-pickers) Complex Interactive Card: one stretched link, a radio button group, a quantity stepper and a add-to-cart button. In this case, the link is not stretched as we mentioned in the explanation of this technique. Really complex but not impossible! ### [Product](#) €69 Colour: Sand SandSageNavy Quantity 12. ### [Pricing Plan with Two CTAs](#pricing-plan-with-two-ctas) Complex Interactive Card with two CTAs. ### Pro €12 per month - 3 gifts - Unlimited products - Priority support [Start 14-day trial: Pro plan](#)[Compare features: Pro plan](#) 13. ### [Order Card with Copyable Details](#order-card-with-copyable-details) Complex Interactive Card with one button to copy the order number and two CTAs. ### Out for delivery Arriving today by 20:00 Stoneware mug, Linen tea towels Order 402-1187-5530 [Track package](#)[Return or replace items](#) 14. ### [Selectable Cards: Delivery Speed](#selectable-cards-delivery-speed) Delivery speed - Standard, free3 to 5 business days - Express, €6.90Next business day - Pickup point, €2.502 to 3 business days ## [WCAG 2.2 success criteria met](#wcag-22-success-criteria-met) | SC | Level | Met by | | --- | --- | --- | | [1.3.1 Info and Relationships](https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html) | A | Every card is an `
` named by its heading through `aria-labelledby` | | [2.1.1 Keyboard](https://www.w3.org/WAI/WCAG22/Understanding/keyboard.html) | A | Every action is a native `` or `