Why Table accessibility basics in HTML? - Purpose & Use Cases

The Big Idea

Discover how a few simple tags can make your tables friendly to everyone, not just sighted users!

The Scenario

Imagine you create a table with rows and columns to show data, but you only use plain <table> and <td> tags without any extra info.

The Problem

Screen readers and keyboard users get confused because they can't tell which cells are headers or how cells relate to each other. This makes your table hard or impossible to understand for many people.

The Solution

Using proper table markup like <th> for headers, scope attributes, and captions helps assistive technologies understand the table structure and read it clearly.

Before vs After

✗ Before

<table>
  <tr><td>Jan</td><td>100</td></tr>
  <tr><td>Feb</td><td>150</td></tr>
</table>

✓ After

<table>
  <caption>Monthly Sales</caption>
  <tr><th scope="row">Jan</th><td>100</td></tr>
  <tr><th scope="row">Feb</th><td>150</td></tr>
</table>

What It Enables

It enables everyone, including people using screen readers, to understand and navigate your tables easily and quickly.

Real Life Example

Think about a website showing a schedule or price list; accessible tables let users with disabilities find the info they need without confusion.

Key Takeaways

Tables need clear headers and captions for accessibility.

Use <th> and scope to define relationships.

Accessible tables improve experience for all users.