E-commerce: Accessible Data Tables

<p>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.</p>

Notably, over 80% of these data tables were not properly implemented using accessible coding best practices.

Learn more about accessible data tables and how to address prevalent data table issues, which can potentially resolve up to 90% of the challenges commonly encountered by these platforms.

<p>If you need custom support for your accessibility project, we are experts ready to help.</p>
        <a href="/contact" target="_self" rel="noopener">
                        Get Support
        </a>
<h3>What is a data table?</h3>

To keep it simple, A data table is a structured arrangement of data in rows and columns that makes it easier to view, organize, and analyze information.

Broadly speaking, there are two types of tables:

• Presentation tables: Used purely to arrange page elements visually. These tables are not intended to convey structured data but rather to help with the layout and design of a webpage. They often involve merging cells or adding styles to achieve a desired appearance.
• Data tables: Used to present data in a logical and organized way. These tables are designed to display structured information, making it easy for users to read, compare, and analyze data.

In the context of e-commerce sites, data tables are often used to display product lists, customer information, order details, stock prices, financial records, and other relevant data in a systematic way. Each row typically represents a different item or entry, while each column represents a different attribute or piece of information about those entries.

Data tables allow users to quickly scan and compare different pieces of data, and they also facilitate various operations like sorting, filtering, and searching within the table.

Proper implementation of data tables includes ensuring accessibility features, such as using appropriate semantic HTML tags (<table>, <tr>, <th>, <td>) and providing descriptive headers and captions, to ensure that the information is accessible to all users, including those using assistive technologies.

Wrongly implemented data tables pose a significant challenge to users with disabilities. This is because assistive technologies may not be able to properly associate each piece of data within the table with its appropriate column and/or row headers.

<h3>Types of data tables</h3>

In the context of accessibility testing, we recognize three simple types of data tables, which are:

1. Tables with column headers only: These tables have headers at the top of each column, providing context for the data in that column. Each cell in the table is associated with a column header, but there are no row headers.
2. Tables with row headers only: These tables have headers at the beginning of each row, giving context for the data in that row. Each cell in the table is associated with a row header, but there are no column headers.
3. Tables with both column and row headers: These tables have headers for both columns and rows, offering a comprehensive context for each cell by providing relevant information from both dimensions. This type of table is particularly useful for displaying complex data where understanding the relationship between rows and columns is important.