Building an Accessible Semantic HTML Product Card

What is Accessibility?

At its core, web accessibility (often abbreviated as "a11y") is the practice of ensuring that your websites and applications can be used by everyone, regardless of their physical or cognitive abilities. This includes users who are visually impaired and rely on screen readers, users who cannot operate a mouse and depend on keyboard navigation, and many others.

A key concept in how browsers support this is the accessibility tree. It's a structure, similar to the DOM, that browsers create specifically for assistive technologies. Using the right HTML elements is the most direct way to provide correct and useful information to this tree.

Let's begin with a video that introduces the concept of accessible development and the role of the accessibility tree.

Semantic HTML: The Foundation of Accessibility

As you just saw, the single most effective thing you can do to improve accessibility is to use semantic HTML. This simply means using HTML elements for their intended purpose. An <h1> is for the main heading, a <p> is for a paragraph, and a <button> is for an interactive button.

When you use semantic HTML, you get a huge amount of accessibility for free. The browser already knows how a <button> should behave with a keyboard, and it knows how to announce a list (<ul>) to a screen reader.

The following reading from the MDN Web Docs, the definitive resource for web developers, explains this principle further.

Building the Product Card: Element by Element

Now, let's apply these principles to build our product card. We'll go through each part of the card and choose the most appropriate semantic element.

A product card is a self-contained piece of content, so the <article> tag is a perfect choice for the main container. It signals that the content inside forms a complete, standalone item in the document.

1. The Product Image

For the product image, we'll use the <img> tag. Crucially, we must include the alt attribute. This attribute provides a text alternative for the image, which is read aloud by screen readers. It's also displayed if the image fails to load. A good alt text is descriptive but concise.

2. The Product Name and Price

The product name is the title of our article, so a heading tag is appropriate. Since the main page title will be an <h1>, we should use an <h2> for the product card title to create a logical document outline. The price can be a simple <p> (paragraph) element.

This structure is vital for screen reader users, who can navigate a page by jumping between headings.

3. The "Add to Cart" Button

This is perhaps the most critical element for accessibility. An "Add to Cart" action must be performed by a <button> element. It is tempting to use a <div> or an <a> tag and style it to look like a button, but this is an accessibility anti-pattern.

• A native <button> is focusable with the Tab key by default.
• It can be activated with the Enter or Space key by default.
• Screen readers announce it as a "button," telling the user it's an interactive element.

If you use a non-semantic element like a <div>, you lose all of this built-in functionality and have to add it back manually with extra attributes and JavaScript.

To see a practical demonstration of the problems you create by not using a native button, watch the following video segment.

Your Task: Building the Card

It's time to put it all together. Open your ecommerce-store project in VS Code and replace the entire contents of the client/product-card.html file with the following code.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Product Card</title>
</head>
<body>

  <!-- 
    The <article> tag is perfect for a self-contained component
    like a product card.
  -->
  <article class="product-card">
    <!-- 
      The product image. The alt text describes the image for screen readers
      and for situations where the image cannot load.
    -->
    <img src="https://via.placeholder.com/300" alt="A gray placeholder image for a product.">

    <!--
      An <h2> is a good choice for the product name, creating a clear
      document structure.
    -->
    <h2>Classic Tee</h2>

    <!-- A simple paragraph for the price. -->
    <p>$24.99</p>

    <!--
      A <button> is essential for actions. It's keyboard-accessible
      and announced correctly by screen readers by default.
    -->
    <button type="button">Add to Cart</button>
  </article>

</body>
</html>

After pasting this code, save the file. You can open product-card.html in your browser to see the unstyled result. Try pressing the Tab key; you should see the browser's focus outline move to the "Add to Cart" button. You can then press Enter or Space to "click" it. This is the native accessibility you get for free.

A Look Ahead: A List of Cards

While we've focused on a single card, our storefront will eventually display a grid of many products. When you have a collection of similar items, the most semantic way to group them is with an unordered list (<ul>), where each product card is a list item (<li>). This gives screen readers important context, allowing them to announce "List, 10 items" and letting the user know where they are in the collection.

We will implement this list structure in a future lesson when we build the full catalog page.

Conclusion

In this lesson, you've taken a significant step toward writing professional-grade HTML. You've learned that building for the web is about more than just visual appearance; it's about creating a meaningful structure that is robust and accessible to all users.

Here are the key takeaways:

• Semantic HTML is the practice of using elements for their intended meaning, not just their style.
• It is the foundation of web accessibility, providing a rich experience for users of assistive technologies like screen readers.
• For a product card, use <article> for the container, <img> with alt text for the image, a heading like <h2> for the name, and—most importantly—a <button> for interactive actions.
• Using native HTML elements gives you crucial features like keyboard navigation for free.

You now have a well-structured, accessible product card. It may not look like much yet, but you've built a solid foundation. In our next lesson, we will bring it to life by using CSS Flexbox and Grid to arrange the storefront navigation, product cards, and a responsive catalog.