Table accessibility basics in HTML - Mini Project: Build & Apply

Table accessibility basics

📖 Scenario: You are creating a simple data table for a website that shows a list of fruits and their colors. The table must be easy to understand for everyone, including people who use screen readers.

🎯 Goal: Build an accessible HTML table with proper headers and ARIA attributes so that screen readers can read the table correctly.

📋 What You'll Learn

Create a table with 3 rows of fruit data and 2 columns: Fruit and Color

Use <table>, <thead>, <tbody>, <tr>, <th>, and <td> elements correctly

Add scope="col" to header cells to define column headers

Add a caption describing the table content

Ensure the table is keyboard accessible and screen reader friendly

💡 Why This Matters

🌍 Real World

Accessible tables are important on websites that show data, like product lists, schedules, or reports. They help everyone, including people using screen readers, understand the information clearly.

💼 Career

Web developers must create accessible content to meet legal standards and provide a good user experience for all visitors.

1

Create the basic table structure with fruit data

Create a table element with a thead containing one row with two header cells: Fruit and Color. Then add a tbody with three rows containing these exact fruit-color pairs: Apple - Red, Banana - Yellow, and Grape - Purple.

HTML

Hint

Use <thead> for the header row and <tbody> for the data rows. Each row uses <tr>. Headers use <th> and data cells use <td>.

2

Add scope="col" to header cells

Add the attribute scope="col" to both <th> elements inside the thead to specify that these headers apply to columns.

HTML

  
    
      Fruit
      Color
    
  
  
    
      Apple
      Red
    
    
      Banana
      Yellow
    
    
      Grape
      Purple
    
  

Hint

The scope="col" attribute tells screen readers that these headers describe columns.

3

Add a caption describing the table

Add a caption element inside the table as the first child. The caption text should be exactly Fruit colors list.

HTML

  Fruit colors list
  
    
      Fruit
      Color
    
  
  
    
      Apple
      Red
    
    
      Banana
      Yellow
    
    
      Grape
      Purple
    
  

Hint

The caption element gives a short description of the table for screen readers and users.

4

Add keyboard accessibility and finalize

Ensure the table uses semantic HTML as before. Add the attribute tabindex="0" to the table element so keyboard users can focus on the table easily.

HTML

  Fruit colors list
  
    
      Fruit
      Color
    
  
  
    
      Apple
      Red
    
    
      Banana
      Yellow
    
    
      Grape
      Purple
    
  

Hint

Adding tabindex="0" makes the table focusable by keyboard users, improving accessibility.

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