"There are two basic uses for tables on the web: data tables and layout tables. The original intended use of HTML tables was for tabular data. A table is a data table when row headers, column headers, or both are present." Webaim - Table Uses Layout Tables vs. Data Tables
Tables should be used for tabular data rather than for layout purposes
Tables should primarily be used for presenting tabular data rather than for layout purposes. Using tables for layout design was a common practice in the early days of web development, but it has significant drawbacks in terms of accessibility and maintainability.
Reasons to Avoid Using Tables for Layout Purposes
Here are some reasons to avoid using tables for layout and instead reserve them for tabular data:
Semantic Markup:
Tables are semantic HTML elements intended for structuring and presenting data in a tabular format. When tables are used for layout, it can result in a less meaningful and semantically confusing document structure.
Accessibility
Screen readers and other assistive technologies rely on the semantic structure of HTML to interpret and convey information to users. Using tables for layout can lead to a less accessible experience for individuals with disabilities.
Loading Performance
Excessive use of tables for layout may result in larger HTML files, impacting page loading performance.
Simple vs. Complex Tables
A simple data table is one in which each cell corresponds with only one column and/or one row header. Complex tables on the other hand contains nested columns or rows. That means that cells within the table correspond to multiple column and/or rows. Complex tables are difficult for people with cognitive disabilities to understand. It is best to avoid complex tables and to split complex tables into multiple simple tables.Simple Data Table
Each cell in a simple data table corresponds to only one column and/or one row header. This straightforward structure makes it easier for users to understand and navigate the table, especially for individuals with cognitive disabilities.
Complex Table
Complex tables have nested columns or rows, meaning that cells within the table correspond to multiple column and/or row headers.
The complexity introduced by nested structures can make it challenging for some users, particularly those with cognitive disabilities, to comprehend the relationships between cells and headers.
Accessibility Considerations
The difficulty in understanding complex tables underscores the importance of considering accessibility in web design. Individuals with cognitive disabilities may benefit from content that is presented in a clear, straightforward manner, making it easier for them to process and interpret information.
Best Practice: Avoid Complex Tables
When faced with complex data, consider breaking it into multiple simple tables to enhance comprehension and accessibility.
Web accessibility standards, such as the Web Content Accessibility Guidelines (WCAG), emphasize the importance of providing content that is perceivable, operable, understandable, and robust. The considerations mentioned above align with these principles, aiming to make digital content more inclusive and user-friendly for diverse audiences, including those with cognitive disabilities.
Table Requirements
Important principles for creating accessible and well-structured tables on web pages include:
Heading Rows or Columns Must Be Explicitly Identified
Tables often contain header cells in the first row (heading row) or the first column (heading column) to provide context for the data in the table. Using appropriate HTML elements, such as <th> (table header), helps explicitly identify these heading cells, making it clear to both users and assistive technologies that they contain header information.
All Tables Should Have a Caption
Providing a caption for a table offers a concise description or summary of the table's purpose or content.
Standards and Best Practices
By following these practices, you enhance the accessibility and usability of tables, making them more understandable for all users, including those who rely on assistive technologies. These principles align with web accessibility guidelines, such as those outlined in the Web Content Accessibility Guidelines (WCAG).
Creating Accessible Tables in Ektron
In all Ektron smart forms use either the Paragraph Copy field or the Description (Optional) field to build tables in. The Tables (ADA Accessible) procedure is used to create heading and or column rows that are appropriately marked up, the caption can be added and the cells in the table are associated with the heading.