Commerce · Concept

A visual grid is usually a semantic list.

CSS controls columns. HTML communicates that the products form a collection. ARIA grid is an interactive widget with a different keyboard contract.

The principle

Use list semantics for a list of products. Use CSS Grid for its visual layout.

Choose by behavior

CSS grid and ARIA grid are not synonyms.

A CSS property changes presentation only. The ARIA grid role creates a composite widget where authors must manage focus and provide arrow-key navigation.

Usually don’tAdd role="grid" for columns

You inherit a keyboard contract

←→↑↓HomeEnd

An ARIA grid normally has one entry in the page tab sequence and requires code to move focus among cells. A role without that behavior is misleading.

<div role="grid" class="products">
  <!-- Visual columns alone do not make this a grid widget. -->
</div>
DoUse a list plus CSS Grid

Structure and presentation stay independent

List semantics expose the collection. Each item can contain a product article. Native links and buttons remain in the ordinary tab sequence.

<ul class="products">
  <li><article>…</article></li>
  <li><article>…</article></li>
</ul>

.products { display: grid; }

Responsive demo

Change columns, not meaning.

  • Harbor trail boot

    $128

  • Canvas day pack

    $84

  • Weather shell

    $156

Collection anatomy

Give each layer one job.

A list communicates quantity and grouping. A list item is the collection member. An article or heading provides a navigable boundary for the individual product.

<ul>

Groups products as peers and can expose the number of items.

<li>

Marks each product as one member of that collection.

Heading or article

Names the product and helps people navigate or understand its boundary.

Logical order

Let the DOM lead.

Responsive columns should reflow the same source order. Avoid CSS order, manual tabindex values, or visual rearrangement that makes reading and focus sequences disagree.

Harbor trail bootCanvas day packWeather shell

Quick test

Resize, read, and tab.

  1. Inspect the collection: ordinary product cards should normally use a list, not role="grid".
  2. Resize from several columns to one and confirm the reading order remains logical.
  3. Navigate headings or articles with a screen reader and confirm product boundaries are understandable.
  4. Press Tab and confirm native links and buttons follow DOM order.
  5. Check that CSS has not visually reordered products away from their source order.
  6. If you truly choose ARIA grid, implement and test its complete focus and arrow-key model.