Table accessibility basics in HTML

Introduction

Tables show data in rows and columns. Making them accessible helps everyone, including people using screen readers, understand the data clearly.

When you want to display a schedule or calendar on a website.

When showing product prices or features in a comparison chart.

When presenting data like survey results or statistics.

When creating a list of contacts with details like phone and email.

When you need to organize information that fits best in rows and columns.

Syntax

HTML

<table>
  <caption>Table title</caption>
  <thead>
    <tr>
      <th scope="col">Column header</th>
      <th scope="col">Column header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Row header</th>
      <td>Data cell</td>
    </tr>
  </tbody>
</table>

The <caption> tag gives the table a clear title for screen readers.

Use scope="col" for column headers and scope="row" for row headers to help screen readers understand the table structure.

Examples

This table has a caption and uses scope attributes for headers, making it easy to understand.

HTML

<table>
  <caption>Monthly Sales</caption>
  <thead>
    <tr>
      <th scope="col">Month</th>
      <th scope="col">Sales</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">January</th>
      <td>$1000</td>
    </tr>
    <tr>
      <th scope="row">February</th>
      <td>$1200</td>
    </tr>
  </tbody>
</table>

Row headers help screen readers announce the name before the role for each person.

HTML

<table>
  <caption>Team Members</caption>
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">Role</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Alice</th>
      <td>Designer</td>
    </tr>
    <tr>
      <th scope="row">Bob</th>
      <td>Developer</td>
    </tr>
  </tbody>
</table>

Sample Program

This example shows a simple accessible table with a caption and proper header scopes. It is easy to read visually and by screen readers.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Accessible Table Example</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 1rem;
      line-height: 1.5;
    }
    table {
      border-collapse: collapse;
      width: 100%;
      max-width: 600px;
      margin: 1rem 0;
    }
    caption {
      caption-side: top;
      font-weight: bold;
      font-size: 1.25rem;
      margin-bottom: 0.5rem;
    }
    th, td {
      border: 1px solid #333;
      padding: 0.5rem 1rem;
      text-align: left;
    }
    th {
      background-color: #f0f0f0;
    }
  </style>
</head>
<body>
  <main>
    <table>
      <caption>Weekly Schedule</caption>
      <thead>
        <tr>
          <th scope="col">Day</th>
          <th scope="col">Activity</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">Monday</th>
          <td>Yoga class</td>
        </tr>
        <tr>
          <th scope="row">Tuesday</th>
          <td>Grocery shopping</td>
        </tr>
        <tr>
          <th scope="row">Wednesday</th>
          <td>Work meeting</td>
        </tr>
      </tbody>
    </table>
  </main>
</body>
</html>

Important Notes

Always use <caption> to describe the table's purpose.

Use scope attributes on <th> to help screen readers link headers to cells.

Keep tables simple and avoid using tables for layout to improve accessibility.

Summary

Tables organize data in rows and columns for easy reading.

Use <caption> and scope attributes to make tables accessible.

Accessible tables help everyone, especially people using screen readers, understand the data clearly.

Practice

1. What is the main purpose of the <caption> element in an HTML table?

easy

A. To add a footer row at the bottom of the table.

B. To provide a title or description for the table, improving accessibility.

C. To create a header cell for each column.

D. To style the table with colors and fonts.

Solution

1. Step 1: Understand the role of <caption>

   The <caption> element is used to give a title or description to a table, which helps screen readers and users understand the table's content.

2. Step 2: Compare with other options

   Options B, C, and D describe other table parts or styling, but only <caption> provides a descriptive title.

3. Final Answer:

   To provide a title or description for the table, improving accessibility. -> Option B

4. Quick Check:

   <caption> = Table title [OK]

Hint: Caption tags give tables a clear title for screen readers [OK]

Common Mistakes:

• Confusing <caption> with <tfoot> or <thead>
• Thinking <caption> styles the table
• Ignoring accessibility benefits of <caption>

2. Which of the following is the correct way to mark a header cell for a column in an HTML table?

easy

A. <td scope="col">Header</td>

B. <td>Header</td>

C. <th scope="row">Header</th>

D. <th scope="col">Header</th>

Solution

1. Step 1: Identify the correct element for header cells

   The <th> element is used for header cells, not <td>.

2. Step 2: Understand the scope attribute

   For column headers, scope="col" is correct. <th scope="col">Header</th> uses <th scope="col">, which is the proper syntax.

3. Final Answer:

   <th scope="col">Header</th> -> Option D

4. Quick Check:

   <th scope="col"> = Column header [OK]

Hint: Use <th> with scope="col" for column headers [OK]

Common Mistakes:

• Using <td> instead of <th> for headers
• Mixing scope="row" with column headers
• Omitting the scope attribute

3. Given the following table snippet, what will screen readers associate the header "Name" with?

<table>
  <caption>User List</caption>
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alice</td>
      <td>30</td>
    </tr>
  </tbody>
</table>

medium

A. The header "Name" is linked to the first column cells like "Alice".

B. The header "Name" is linked to the first row cells like "Alice" and "30".

C. The header "Name" is ignored by screen readers because it lacks an id.

D. The header "Name" is linked to the entire table caption.

Solution

1. Step 1: Understand scope="col" usage

   The scope="col" attribute on the <th> means the header applies to the entire column below it.

2. Step 2: Identify which cells belong to the "Name" column

   The first column cells, such as "Alice", are associated with the "Name" header for screen readers.

3. Final Answer:

   The header "Name" is linked to the first column cells like "Alice". -> Option A

4. Quick Check:

   scope="col" links header to column cells [OK]

Hint: scope="col" links header to column cells below [OK]

Common Mistakes:

• Confusing row and column scope
• Thinking headers need id attributes to link
• Assuming caption links headers

4. What is wrong with this table snippet regarding accessibility?

<table>
  <tr>
    <td>Product</td>
    <td>Price</td>
  </tr>
  <tr>
    <td>Book</td>
    <td>$10</td>
  </tr>
</table>

medium

A. The table is missing <caption> for description.

B. The header cells use <td> instead of <th>.

C. All of the above.

D. The scope attribute is missing on header cells.

Solution

1. Step 1: Check for caption element

   The table lacks a <caption>, which helps describe the table for screen readers.

2. Step 2: Check header cell tags and attributes

   The first row uses <td> instead of <th> for headers, and no scope attributes are present.

3. Final Answer:

   All of the above. -> Option C

4. Quick Check:

   Missing caption, wrong header tags, and no scope = C [OK]

Hint: Headers need <th> with scope and caption for full accessibility [OK]

Common Mistakes:

• Using <td> for headers
• Skipping caption element
• Not adding scope attribute to headers

5. You want to create an accessible table showing students and their scores. Which combination of elements and attributes is best practice?

hard

A. Use <caption> for the title, <th scope="col"> for column headers, and <th scope="row"> for row headers.

B. Use <caption> for the title, <td> for all cells, and no scope attributes.

C. Use <thead> with <td> for headers and <tbody> for data rows.

D. Use <caption> for the title and aria-label on each <td> cell.

Solution

1. Step 1: Use <caption> for table description

   This helps all users understand the table's purpose.

2. Step 2: Use <th> with proper scope for headers

   Column headers get scope="col", row headers get scope="row". This clarifies relationships for screen readers.

3. Final Answer:

   Use <caption> for the title, <th scope="col"> for column headers, and <th scope="row"> for row headers. -> Option A

4. Quick Check:

   Caption + th with scope col/row = best accessibility [OK]

Hint: Caption plus <th> with scope="col" and scope="row" is best [OK]

Common Mistakes:

• Using <td> for headers
• Skipping scope attributes
• Relying only on aria-labels on data cells