Are HTML tables on websites good for user experience and accessibility?
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.
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?
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.
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.
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
- Data Tables: Four Major User Tasks (Nielsen Norman Group)
- Tables with Multi-Level Headers (W3C Web Accessibility Initiative (WAI))
- Accessible Front-End Patterns For Responsive Tables (Part 1) (Smashing Magazine)
- Table component (GOV.UK Design System)
- Tables pattern (University of St Andrews Digital Pattern Library)
- DataTables pattern (University of St Andrews Digital Pattern Library)
Images in this article were created using DALL·E 3.