Grid

What Is a Grid (Data Grid)?

A grid is an interactive UI that lets users navigate tabular data freely using arrow keys. Like a spreadsheet, you can move focus from cell to cell to interact with the data.

This kind of grid is different from the CSS layout grid. Also, if you just need to display data in a table, use a plain <table> — there's no need for a grid. Only use a grid when interaction is required, such as when you need cell-level focus movement or cells contain interactive elements.

Why Does Accessibility Matter?

The more interactive a table becomes, the more people get locked out when it's built incorrectly.

• Keyboard-only users: If cells only have onclick, they can't be reached by Tab or arrow keys — making the table completely inoperable.
• Screen reader users: Without role="grid", the table isn't recognized as a grid — the row/column structure and current cell position aren't communicated.

The solution is to declare the structure with role="grid" and move focus with arrow keys (roving tabindex). The entire grid becomes a single tab stop, and navigation within it is handled by arrow keys.

Live Demo (Recommended Implementation)

The employee directory below is an interactive grid built following the APG.Without using a mouse, press Tab to enter the grid, then use arrow keys to move between cells.

Keyboard Interaction

Required WAI-ARIA Roles and Properties

Implementation: Recommended Pattern (Good)

Markup:

<div role="grid" aria-labelledby="grid-cap">
  <div role="row">
    <span role="columnheader" tabindex="-1">Employee ID</span>
    <span role="columnheader" tabindex="-1">Name</span>
    <span role="columnheader" tabindex="-1">Department</span>
    <span role="columnheader" tabindex="-1">Extension</span>
  </div>
  <div role="row">
    <!-- Only the first cell in the entire grid has tabindex="0" (the rest are -1) -->
    <span role="gridcell" tabindex="0">E-001</span>
    <span role="gridcell" tabindex="-1">Hanako Sato</span>
    <span role="gridcell" tabindex="-1">Sales</span>
    <span role="gridcell" tabindex="-1">1201</span>
  </div>
  <!-- Subsequent rows also use role="row" + role="gridcell" tabindex="-1" -->
</div>

Keyboard interaction script (focus movement and tabindex management):

const grid = document.getElementById('grid-good');
if (grid) {
  // Represent cells as a 2D array (array of cells per row)
  const rows = Array.from(grid.querySelectorAll<HTMLElement>('[role="row"]'));
  const cells = rows.map((row) =>
    Array.from(row.querySelectorAll<HTMLElement>('[role="columnheader"],[role="gridcell"]'))
  );

  let r = 0; // Current row
  let c = 0; // Current column

  // Set tabindex="0" only on the current cell, -1 on all others (single tab stop)
  function focusCell(nextR: number, nextC: number) {
    const maxR = cells.length - 1;
    r = Math.max(0, Math.min(nextR, maxR));
    const maxC = cells[r].length - 1;
    c = Math.max(0, Math.min(nextC, maxC));
    cells.flat().forEach((cell) => cell.setAttribute('tabindex', '-1'));
    const target = cells[r][c];
    target.setAttribute('tabindex', '0');
    target.focus();
  }

  grid.addEventListener('keydown', (e) => {
    switch (e.key) {
      case 'ArrowRight': focusCell(r, c + 1); break;
      case 'ArrowLeft':  focusCell(r, c - 1); break;
      case 'ArrowDown':  focusCell(r + 1, c); break;
      case 'ArrowUp':    focusCell(r - 1, c); break;
      case 'Home':
        if (e.ctrlKey) focusCell(0, 0);            // First cell
        else focusCell(r, 0);                       // First cell in row
        break;
      case 'End':
        if (e.ctrlKey) focusCell(cells.length - 1, // Last cell
          cells[cells.length - 1].length - 1);
        else focusCell(r, cells[r].length - 1);    // Last cell in row
        break;
      default: return; // Let the browser handle other keys
    }
    e.preventDefault();
  });

  // Sync current position when a cell is clicked
  cells.forEach((row, ri) =>
    row.forEach((cell, ci) => {
      cell.addEventListener('click', () => focusCell(ri, ci));
    })
  );
}

Anti-pattern (Bad)

Below is a table where cells only have onclick — it looks interactive but isn't.You can click cells with a mouse, but keyboard interaction is completely impossible.Try Tab → arrow keys and compare the experience to the demo above.

<!-- ❌ Anti-pattern -->
<!-- Looks like a table but doesn't function as an interactive grid -->
<table>
  <tr>
    <th>Employee ID</th><th>Name</th><th>Department</th><th>Extension</th>
  </tr>
  <tr>
    <!-- onclick only. No role, tabindex, or key handling -->
    <td onclick="select(this)">E-001</td>
    <td onclick="select(this)">Hanako Sato</td>
    <td onclick="select(this)">Sales</td>
    <td onclick="select(this)">1201</td>
  </tr>
</table>

Implementation Checklist

• The outer wrapper has role="grid" and a name (aria-label / aria-labelledby)
• Rows use role="row", headers use role="columnheader", and cells use role="gridcell"
• Exactly one cell has tabindex="0" and all others have "-1" (roving tabindex)
• Arrow keys move between cells, and Home / End move to the edges of the row
• (Recommended) Ctrl+Home / End moves to the edges of the grid
• Tab exits the grid rather than moving between cells
• All operations are keyboard-accessible and focus is visible (focus ring is not hidden)

Source (English):Grid Pattern — W3C APG(opens in a new tab)