Building Accessible Data Tables: Best Practices

Samuel Enyi — Sat, 15 Jun 2024 09:18:06 +0000

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.

Web: Your Accessibility FAQ Guide

Samuel Enyi — Fri, 14 Jun 2024 16:44:06 +0000

Ensuring that your website is accessible to all users, including those with disabilities, is not only a legal obligation but also a way to enhance user experience and expand your audience. This FAQ session aims to address some of the most common questions and provide practical advice on making your website more accessible. While the […]

The post Web: Your Accessibility FAQ Guide appeared first on Accessmeter LLC.

DEV Community: Samuel Enyi

Building Accessible Data Tables: Best Practices

Web: Your Accessibility FAQ Guide