Are HTML tables on websites good for user experience and accessibility?

Lewis Wake
Tuesday 30 January 2024

Tables are often used in web design for organising data, but their usage raises questions about accessibility and experience.


Tables are a staple in web design for organising data. However, their usage raises several questions about user accessibility and experience. This article explores the challenges and considerations when incorporating tables into web pages.

Does the web page really need a table?

Before adding an HTML formatted table to a web page, it’s crucial to ask: ‘Does this need to be a table? Can it be presented in a different, more accessible format?’

This initial assessment can significantly impact the usability and accessibility of your website.

Real world scenario

Imagine you are being given two different presentations from two different people.

Complex presentation
The first presentation shows slides with complicated spreadsheets and the presenter is explaining each data point in depth so you fully understand the complexity of what is being shown.

Will you be able to effectively remember what all of this means? Did it take a long time to explain?

Visual presentation
The second presentation shows slides with simple infographics that visually explain the most important parts of the data instantly, and no additional explaination is required.

Would this presentation style be easier for you to interpret?

What is the problem with tables on web pages?

Cognitive load of deciphering web page tables

Tables present a wealth of information, often overwhelming users with data to process.

This cognitive load is especially high in large tables, where comparing across rows and columns can be complex.

High cognitive load increases the risk of errors and strains memory, making data analysis time-consuming and potentially less accessible, especially for those with impairments.

Consequently, user engagement and satisfaction may decrease, and the ability to generate meaningful insights from the data is hindered.

Layout complexity in web design

As tables grow in columns and rows, tracking data categories becomes more challenging, particularly in tables with complex structures or many categories, leading to user confusion and difficulty in maintaining their place.

This problem is amplified on smaller screens, where fitting elaborate tables can result in a cramped, hard-to-navigate display, often requiring both horizontal and vertical scrolling.

To address these challenges, simplicity in table design is key, especially for mobile viewing.

Limiting tables to a maximum of two columns enhances readability and user experience, ensuring data is presented clearly and comprehensibly.

A person at a desk with a computer, overwhelmed by an avalanche of papers from a giant screen.

Accessibility concerns with HTML tables

Incorrect coding can significantly hinder the accessibility of tables for screen reader users, creating barriers for those with visual impairments.

It’s vital to use semantic HTML and proper table tags to ensure screen readers can accurately interpret and convey table content.

This not only involves using correct header tags but also ensuring a logical structure that screen readers can follow.

Prioritising these coding practices is essential for inclusive web design, ensuring that all users, regardless of their abilities, can access and understand table data.

The scanning difficulty of tables

Tables challenge the typical scanning behavior of web users by demanding detailed reading to grasp the relationships between data points.

This need for in-depth analysis disrupts the quick information gathering that most online readers prefer, potentially leading to a negative user experience. To mitigate this, tables should be designed with clear headings and concise data to facilitate easier scanning.

Striking a balance between comprehensive data presentation and scan-friendly layout is key to maintaining user engagement and satisfaction.

Limited context in data presentation

Tables often focus solely on raw data, lacking necessary context or explanations. Providing clear context is key to helping users comprehend the data’s significance.

Alternatives to using tables on web pages

While tables are effective for data organisation, their complexity can deter user-friendliness in a web environment. It’s essential to weigh the benefits against potential user experience challenges.

Alternatives to tables can enhance usability and accessibility, offering a better experience for a wider range of users. Here are some effective alternatives.

Infographics

Transform complex data into visually engaging and easily digestible infographics. This format is particularly useful for conveying statistics or trends in a more engaging and less text-heavy manner.

Lists and bullet points

For simpler datasets, presenting information in lists or bullet points can improve readability. This format allows users to quickly scan through key points without the need to navigate through rows and columns.

Charts and graphs

Visual representations like pie charts, bar graphs, or line charts can illustrate data patterns and comparisons more effectively than tables, especially for numerical data.

Stylized graphic of assorted data visualization elements in blue and orange.

Filters and accordions

Interactive web elements like filters or collapsible sections allow users to engage with the data actively. This approach is particularly useful for complex datasets, as it lets users focus on specific data points of interest to them.

Tabbed interfaces

For data that can be categorised into distinct sections, a tabbed interface can help in organising information without overwhelming the user. Each tab can present a part of the data in a more focused and less cluttered way.

Narrative descriptions

Sometimes a well-written explanatory text can be more effective than a table, particularly for qualitative data. Descriptive narratives can provide context and insights that raw data in tables might lack.

Data cards

Displaying key data points in separate cards (like tiles or panels) can be an effective way to break down information. Each card can focus on a particular aspect of the data, making it easier for users to absorb the information piece by piece.

Conclusion

While tables are a traditional method for data organisation, it’s crucial to consider their impact on user experience.

Alternatives like infographics, lists, and interactive elements can enhance usability and accessibility, offering a better experience for a broader audience.

As web and content designers, our goal should always be to present information in the most simple, user-friendly, and accessible format possible.


Resources

Images in this article were created using DALL·E 3.

Related topics

Share this story