Andrée Lange has over ten years of experience working as a digital designer at several agencies. At heart she is a true UX and visual designer. In recent years she has specialised in web accessibility. And more specific: in accessible design.
In web development, tables are essential for structuring data and content. They offer a clear and organised way to present information, making data easy to process and understand.
However, tables without proper structure can introduce significant accessibility challenges and become difficult for users who use assistive technologies.
In this article, we’ll shed light on essential guidelines for creating an accessible table design. By the end, you’ll be equipped with strategies to make layout tables accessible to all internet users, providing a seamless interactive experience for everyone.
Layout tables vs. data tables
In web design, there are two primary types of tables – layout and data tables. Let’s take a look at each one (using a data table to compare the two, naturally!).
| Layout tables | Data tables | |
| Origin | Emerged in the early days of web development to control visual structure using HTML. | Designed to present data in an orderly and understandable format. |
| Purpose | A framework for positioning and aligning elements on a webpage, such as images, text blocks, and navigation menus. | A way to turn complex information into digestible pieces, offering a concise overview that is easier to understand. |
| Use case | Control over page layout and design elements arrangement. | Presentation of structured data like financial figures, event schedules, or statistical data. |
| Impact on accessibility | Can be problematic for assistive technologies if improperly coded, leading to misinterpretation or jumbled/out-of-order information. | Generally more straightforward for assistive technologies to interpret, as they are structured specifically for data display. |
| Examples | A layout table might be used to structure visual elements, such as positioning text and images in relation to one another. However, this non-sequential information presentation can confuse screen readers. | A data table could display a company’s quarterly sales figures, clearly organizing the information row by row and column by column. |
As you can see, traditionally, layout tables have been used to overcome limitations in layout and presentation using HTML, but with a modern solution like Cascading Style Sheets (CSS), that’s no longer necessary.
CSS provides a wide range of layout controls, like the ability to precisely position elements, dictate margins and padding, and even create flexible grid-based designs. This leap forward in web design technology makes layout tables obsolete in most cases, offering a cleaner, simpler, and more flexible web structure and significantly reducing potential accessibility issues.
While you can still use layout tables to organise content, the modern recommendation leans towards a CSS-based layout like CSS-grid and flexbox for most cases.
Essential guidelines for accessible layout table design
If you still want to use tables for layout purposes, there are ways to make them more accessible.
Table HTML markup
When putting together a layout table, avoid using structural markup elements like <th> (table header) or <caption> (table caption). Instead, use the ARIA presentation role by adding the attribute role=”presentation” to the <table> element. This is essentially a signal to assistive technologies to treat this table as strictly presentational rather than a traditional data table so that all content within remains accessible.
💡Tip: ARIA might sound like a mysterious technical term, but fear not! It’s a powerful tool to make your website even more accessible. Don’t skip the chance to dive deeper into it by checking out our comprehensive introductory guide on ARIA.
Table linearisation
Table linearisation is how a table, especially a complex one with multiple rows, columns, and possibly nested tables, appears after all formatting is removed. The goal is to create a linear, sequential format that can be more easily interpreted by assistive technologies, such as screen readers.
And since we’re using the ARIA role “presentation” instructing assistive technologies to ignore the table format, the content order – or linearisation – becomes even more essential for the user to comprehend the intended message or information.
Caitlin de Rooij, CPWA-certified Accessibility Consultant & Developer, emphasises that the logic behind the code’s structure is as important as the content itself.
Caitlin de Rooij, Accessibility Consultant & Developer, Level-LevelAccessible online content begins with a logically structured code that mirrors the intended content flow.
This logical order not only guides the user through the content but also ensures a seamless and accessible experience. It forms the backbone of ensuring your layout tables are not just visually appealing but also accessible to all users.
WCAG guidelines for accessible table design
Besides these specific recommendations, you can find more information on how to make tables accessible in the Web Content Accessibility Guidelines (WCAG).
Keep in mind that because using the ARIA’s presentation role in the HTML markup of layout tables makes them unreadable to assistive technologies, the majority of the following tips only apply to data tables.
This suggestion is supported by the World Wide Web Consortium (W3C), the developer of WCAG, and they also recommend against using tables for layout purposes. This advice was born from the evolution of CSS as a more flexible and semantics-focused alternative for web page structure and layout design. Unlike traditional table layouts, CSS allows developers to separate a website’s content from its presentation, resulting in cleaner code and fewer inherent accessibility issues.
Let’s look at a couple of WCAG guidelines to see how they apply to table creation:
- 1.3.1 Info and Relationships: This is a Level A guideline that advises, “Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text”. Here, ‘presentation’ refers to aspects that we tend to associate with visual browsers (like text colour or layout positioning), while ‘programmatically determined’ relates to information that non-visual, programmatically accessible user agents, like screen readers, can make sense of.
- 1.3.2 Meaningful Sequence: Also a Level A guideline, this instructs, “When the sequence in which content is presented affects its meaning, a correct reading sequence can be programmatically determined”. In this context, we’re talking about making sure that the content order in your code makes sense to assistive technologies, even when it’s read without any formatting cues.
Incorporating a few essential design principles can significantly improve the accessibility of tables. Here, we lay out some important tips proposed by W3C’s Web Accessibility Initiative (WAI):
- Maintain simplicity in tables: Wherever possible, ensure that your tables are simple, and if necessary, divide them into multiple individual tables.
- Separate tables and data: In instances where several tables immediately follow one another, avoid combining them into a single table with an extra row of <th> cells. Every distinct data set should retain its own cell for clear segmentation and easier access.
- Align information correctly: Always align text to the left and numerical data to the right so you can create a consistent layout that aids in content clarity.
- Use proper markup: Header cells should always utilise <th> elements and avoid substituting them with styled <td> elements. This is because assistive technologies, such as screen readers, recognise <th> tags as headers, which aids users in distinguishing headers from data cells.
- Create visual differentiation: Headers should stand apart from other cells, and alternating styles between even and odd rows can benefit users with visual impairments or reading difficulties.
- Ensure flexible viewing: Accessibility is all about catering to users across devices. Ensure that your tables are responsive or use alternative methods for displaying data on smaller screens so that regardless of screen size, all data is available to users.
To learn more about accessible table design, check out the general tips shared by W3C’s Web Accessibility Initiative (WAI).
Next steps in accessible website design
Accessibility in web design should never be an afterthought – it should be the end goal for every designer and web developer.
When it comes to tables, it’s widely recommended to avoid using them for layout purposes and instead rely on CSS for its flexibility and accessibility benefits. You should also make sure that you maintain a logical order when writing your accessible code and always follow the latest recommendations from web accessibility guidelines, specifically the WCAG.
Thoughtful table design is a great way to start being more considerate of other users, but there’s much more to full website accessibility. To truly embrace and excel in accessible web design, continuous learning and skill enhancement are key.
At The A11y Collective, we offer you an invaluable resource with our suite of courses on web accessibility and The A11y Collective’s Accessibility Quiz that you can use to get a better idea of your current understanding of web accessibility and identify areas for improvement.
Take your next step towards mastering accessible website design by enrolling in “Accessible design, the basics” today. This course represents a fantastic starting point or a way to refresh your knowledge to create inclusive web experiences for all users!
Ready to take the next step?
Get started with “Accessible design, the basics” today to learn more about the fundamentals of accessible website design.
