Building Accessible Data Tables: Best Practices
Tags: articles, a11y, webaccessibility
Published: 2024-06-15 09:18:06

---
title: Building Accessible Data Tables: Best Practices
published: true
date: 2024-06-14 09:18:06 UTC
tags: Articles,accessibility,webaccessibility
canonical_url: https://accessmeter.com/articles/building-accessible-data-tables/
---

E-commerce: Accessible Data Tables.
We evaluated several e-commerce sites and found that most of them feature data tables. This is likely because data tables effectively organize and present large amounts of information clearly. Notably, over 80% of these data tables were not properly implemented using accessible coding best practices. Learn more about accessible data tables […]

The post [Building Accessible Data Tables: Best Practices](https://accessmeter.com/articles/building-accessible-data-tables/) appeared first on [Accessmeter LLC](https://accessmeter.com).

Tables with Both Column & Row headers
Failing Example:
Code:
The following code snippet shows a data table with both row and column headers:


<table style="height: 238px;" width="548">
  <caption>Quarterly Sales Data</caption>
  <thead>
    <tr>
      <th></th>
      <th>Week 1</th>
      <th>Week 2</th>
      <th>Week 3</th>
      <th>Week 4</th>
      <th>Week 5</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td scope="row">1st Quarter</td>
      <td>100</td>
      <td>150</td>
      <td>80</td>
      <td>200</td>
      <td>530</td>
    </tr>
    <tr>
      <td scope="row">2nd Quarter</td>
      <td>120</td>
      <td>130</td>
      <td>100</td>
      <td>180</td>
      <td>530</td>
    </tr>
    <tr>
      <td scope="row">3rd Quarter</td>
      <td>80</td>
      <td>95</td>
      <td>70</td>
      <td>150</td>
      <td>395</td>
    </tr>
    <tr>
      <td scope="row">4th Quarter</td>
      <td>90</td>
      <td>110</td>
      <td>85</td>
      <td>160</td>
      <td>445</td>
    </tr>
  </tbody>
</table>

Result:
Quarterly Sales Data
Week 1	Week 2	Week 3	Week 4	Week 5
1st Quarter	100	150	80	200	530
2nd Quarter	120	130	100	180	530
3rd Quarter	80	95	70	150	395
4th Quarter	90	110	85	160	445
This table is a failing example because it lacks <th> elements to define the row headers. While screen readers will correctly associate each data cell with its column headers, they will not properly associate the data cells with their corresponding row headers.

Passing Example
Code:
The following code snippet shows a data table with both row and column headers:


<table style="height: 238px;" width="548">
  <caption>Quarterly Sales Data</caption>
  <thead>
    <tr>
      <th></th>
      <th>Week 1</th>
      <th>Week 2</th>
      <th>Week 3</th>
      <th>Week 4</th>
      <th>Week 5</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1st Quarter</th>
      <td>100</td>
      <td>150</td>
      <td>80</td>
      <td>200</td>
      <td>530</td>
    </tr>
    <tr>
      <th scope="row">2nd Quarter</th>
      <td>120</td>
      <td>130</td>
      <td>100</td>
      <td>180</td>
      <td>530</td>
    </tr>
    <tr>
      <th scope="row">3rd Quarter</th>
      <td>80</td>
      <td>95</td>
      <td>70</td>
      <td>150</td>
      <td>395</td>
    </tr>
    <tr>
      <th scope="row">4th Quarter</th>
      <td>90</td>
      <td>110</td>
      <td>85</td>
      <td>160</td>
      <td>445</td>
    </tr>
  </tbody>
</table>

Result:
 

Quarterly Sales Data
Week 1	Week 2	Week 3	Week 4	Week 5
1st Quarter	100	150	80	200	530
2nd Quarter	120	130	100	180	530
3rd Quarter	80	95	70	150	395
4th Quarter	90	110	85	160	445
This table is a passing example because there is a <th> element to define the row and column headers and a <tbody> element to define the table body. Screen readers will properly associate each data cell with its appropriate row and column headers.

Let’s Wrap It Up
The most common errors we often find when testing websites featuring data tables are improper associations of each cell with their corresponding column and row headers. Users with disabilities may find these kinds of tables difficult to comprehend.

Since most charts and graphs used to convey data on e-commerce sites can be made accessible by providing text alternatives in the form of data tables, it becomes very necessary to make these tables accessible.
Leave Questions below, I will get to it in a moment.