Building Accessible Data Tables: Best Practices

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 appeared first on Accessmeter LLC.

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

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

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

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:

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

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

element to define the row and column headers and a 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.