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

Need a 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
    
  

Need a 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
    
  

Need a 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
    
  

Need a hint?

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