Theo's Typesafe Cult•14mo ago

Improving accessibility of a Card component

Hi there, I'd like to make my ProductCard component more accessible and wanted to have your thoughts on it. It's a product card used several times throughout the website (ecommerce). What I've read was that I could replace the <div className={style.card}> for <article className={style.card}> - does it make sense in this case? Also, should I use <header> and <footer> inside the card? If so, which part should be wrapped in the header and footer? Because it seems weird for the image to be inside the <header>, but I could be wrong. On the other hand, should the Badge component have a role attribute? Here's the code and also an image of what the product card looks like

// src\components\ProductCard\ProductCard.tsx

import type { Product } from "@/utils/schemas/product";
import Image from "next/image";
import Link from "next/link";
import style from "./productCard.module.css";
import { Badge } from "@/components/Badge";

export const ProductCard = ({ id, name, category, imagePath }: Product) => {
  return (
    <Link href={/product/{id}}>
      <div className={style.card}>
        <Image
          src={imagePath}
          alt={`Product ${name}`}
          width={1200}
          height={900}
        />
        <div className={style.content}>
          <h2 className={style.title}>{name}</h2>
          <Badge category={category} />
        </div>
      </div>
    </Link>
  )
}

// src\components\ProductCard\ProductCard.tsx

import type { Product } from "@/utils/schemas/product";
import Image from "next/image";
import Link from "next/link";
import style from "./productCard.module.css";
import { Badge } from "@/components/Badge";

export const ProductCard = ({ id, name, category, imagePath }: Product) => {
  return (
    <Link href={/product/{id}}>
      <div className={style.card}>
        <Image
          src={imagePath}
          alt={`Product ${name}`}
          width={1200}
          height={900}
        />
        <div className={style.content}>
          <h2 className={style.title}>{name}</h2>
          <Badge category={category} />
        </div>
      </div>
    </Link>
  )
}

And the Badge component, which uses absolute positioning to place itself at the top left border of the card, it renders the product category:

// src\components\Badge\Badge.tsx
import type { Product } from "@/utils/schemas/product";
import style from "./badge.module.css";

export const Badge = ({ category }: Pick<Product, "category">) => {
  return (
    <div className={style.badge}>
      <span className={style.title}>{category}</span>
    </div>
  )
}

// src\components\Badge\Badge.tsx
import type { Product } from "@/utils/schemas/product";
import style from "./badge.module.css";

export const Badge = ({ category }: Pick<Product, "category">) => {
  return (
    <div className={style.badge}>
      <span className={style.title}>{category}</span>
    </div>
  )
}

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

Improving accessibility of a Card component