Learn how to build a semantic, accessible and interactive Card UI using HTML and CSS

Building a semantic, accessible and interactive Card UI can be achieved using HTML and CSS. Interactive Cards are a helpful way to group information in an engaging manner, allowing users to click a button to access more details or save items to favorites. Before creating an interactive Card, it's important to understand the difference between links and buttons and how to maintain HTML semantic structure.

There are two main types of Interactive Card: Simple and Complex. Let's start with the Simple Card, which is built using an HTML element called ARTICLE. This element signifies a complete and self-contained composition in a document, page, application, or site. The article element should be used to wrap the entire Card, with the main heading linked using a corresponding IDREF and an aria-labelledby attribute.

The anatomy of a Static Card consists of an ARTICLE element containing an H3 for the main topic, a P for extra information, and a clickable LINK or BUTTON for user interaction. A Simple Card is built by organizing elements in a structured way, following the rules for accessible and semantic HTML.

For Interactive Cards, the first layer involves creating a plain ARTICLE element without forcing interaction through tabindex or onclick attributes. The accessible name is passed through an aria-labelledby attribute linking to the main heading IDREF. The final step is adding a position: relative in CSS, which helps create the stretched pseudo-focus area for the whole card when the interactive element receives focus.

The second layer involves the interactive element (a LINK or BUTTON) that will stretch to make the entire card interactive. This element is wrapped in a H3 with an ID matching the ARTICLE's aria-labelledby attribute. The ::after pseudo-element is added to stretch the action target, allowing mouse and touch interactions. Screen reader users can interact with the real link in layer 2.

The third layer adds a ::after pseudo-element on the link, making the entire card surface the hit area for mouse and touch interactions. Screen reader users can interact with the real link in this layer, and selectable text can be added to the CARD element using user-select: text.

The fourth layer involves adding a focus-visible outline to the stretched interactive element when it receives focus, highlighting that the entire area is interactive.

Simple Interactive Cards have only one interactive element with a single purpose, such as redirecting users to a new location or expanding information. One tab stop per card is recommended, ensuring that when the link is focused, the entire card is visually highlighted and announced in a hierarchical way by screen readers. This approach can be used on blog or news teasers, category tiles, team member cards, or promo cards with a single call-to-action.