Tables and Accessibility

intermediate

By FrontendAtlas Editorial · Updated Jan 30, 2026

The goal is to provide a semantic table that screen readers can navigate, with a clear caption and correct header associations. Add headers with scope, captions, and keyboard considerations; test with screen readers and complex tables.

Solution

Overview

Assistive tech relies on th scope to announce headers correctly. Without proper thead/tbody structure and caption, users lose context when navigating cell by cell.

Approach 1 – Accessible Employee Table

Include a caption describing the dataset, use thead for column headers, and tbody for data rows. If rows have headers, mark them with th scope='row'. Avoid layout tables and keep the markup purely semantic.

<html>

<!DOCTYPE html>
  <html lang='en'>
    <head>
      <meta charset='UTF-8'>
      <title>
        Accessible Table
      </title>
    </head>
    <body>
      <table>
        <caption>
          Employee Directory
        </caption>
        <thead>
          <tr>
            <th scope='col'>
              Name
            </th>
            <th scope='col'>
              Role
            </th>
            <th scope='col'>
              Email
            </th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>
              Alice Johnson
            </td>
            <td>
              Designer
            </td>
            <td>
              alice@example.com
            </td>
          </tr>
          <tr>
            <td>
              Bob Smith
            </td>
            <td>
              Developer
            </td>
            <td>
              bob@example.com
            </td>
          </tr>
          <tr>
            <td>
              Carol Lee
            </td>
            <td>
              Manager
            </td>
            <td>
              carol@example.com
            </td>
          </tr>
        </tbody>
      </table>
    </body>
  </html>

# CSS

body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  margin: 2rem;
  line-height: 1.6;
}
table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
}
caption {
  caption-side: top;
  font-weight: 600;
  text-align: left;
  margin-bottom: 0.5rem;
}
th, td {
  border: 1px solid #ccc;
  padding: 0.5rem 1rem;
  text-align: left;
}
th {
  background-color: #f5f5f5;
}

Notes & Pitfalls

Pitfalls

Forgetting to add a <caption> makes the table less accessible to screen readers.
Leaving out scope attributes can confuse assistive technologies.
Avoid using tables for layout purposes — use them only for structured data.

Techniques

Use <thead> and <tbody> to separate structure from content.
Always include <caption> for a clear summary.
Use scope='col' for column headers and scope='row' for row headers if present.

Resources

Guides

Frontend interview preparation guideGuide Frontend coding interview questions and prep guideBlueprint JavaScript Problems That Actually Show UpBlueprint Build Great UI in 60 MinutesBlueprint

Preparing for interviews? Use Frontend Coding Challenges first, then move into a concrete Study Plan before targeted Company Prep.

Open frontend interview questions Browse HTML interview questions Open HTML/CSS interview questions Open Essential 60 Open Machine Coding Hub Open Frontend Coding Challenges Open System Design Open Interview Prep Guide Open System Design Blueprint Open Framework Prep Paths Open Study Plans Open 7-day crash study plan Open Company Prep