Is table markup used for all table information consistently?
WCAG 1.3.1 Info and Relationships
Introduction
This document provides information about the Acquia Web Governance accessibility check:
Is table markup used for all table information consistently?
What
This check verifies that all data presented in a table or grid format is marked up with the correct HTML table elements such as <table>, <tr>, <th>, and <td>. When information is organized in rows and columns to show relationships, it must use these specific semantic tags so that screen readers and other assistive technologies can accurately communicate the structure and data relationships to the user.
Why
Semantic table markup is essential for users who rely on assistive technology. Screen readers use these tags to enable users to navigate through data cells and understand which header applies to which piece of information. If a table is built with non-semantic elements like <div> or <span>, or if it is just an image of a table, users with visual impairments cannot understand the logical relationship between the data points. This also affects users with cognitive disabilities who may rely on consistent formatting and tool-assisted navigation to process complex data sets.
Who
Affected users
This check affects the following users who have:
Blindness or vision impairments: Who navigate websites with keyboard commands and use screen reader software.
Cognitive disabilities: Who benefit from consistent formatting and tool-assisted navigation to process complex data sets.
Examples
Pass example
A data table that uses the correct table elements to define its structure.
This section provides information on how to review and fix the issue.
How to review it
Identify any data on the page that is presented in a grid or tabular format.
You can use the Web Governance Browser Extension to identify the element on the page or in the HTML source code to see if it uses the <table> tag.
How to fix it
If you find data that looks like a table but is built with other elements, replace those elements with the appropriate HTML table tags: <table> for the container, <tr> for rows, <th> for headers, and <td> for data cells.
If a table is used for layout purposes rather than data, change it to CSS Grid or Flexbox to keep the content accessible.
Ensure that every data table has clearly defined headers so that screen reader users can maintain context while they navigate through the rows.
Additional resources
This section contains useful resources for this subject.
Is table markup used for all table information consistently?
WCAG 1.3.1 Info and Relationships
Introduction
This document provides information about the Acquia Web Governance accessibility check:
Is table markup used for all table information consistently?
What
This check verifies that all data presented in a table or grid format is marked up with the correct HTML table elements such as <table>, <tr>, <th>, and <td>. When information is organized in rows and columns to show relationships, it must use these specific semantic tags so that screen readers and other assistive technologies can accurately communicate the structure and data relationships to the user.
Why
Semantic table markup is essential for users who rely on assistive technology. Screen readers use these tags to enable users to navigate through data cells and understand which header applies to which piece of information. If a table is built with non-semantic elements like <div> or <span>, or if it is just an image of a table, users with visual impairments cannot understand the logical relationship between the data points. This also affects users with cognitive disabilities who may rely on consistent formatting and tool-assisted navigation to process complex data sets.
Who
Affected users
This check affects the following users who have:
Blindness or vision impairments: Who navigate websites with keyboard commands and use screen reader software.
Cognitive disabilities: Who benefit from consistent formatting and tool-assisted navigation to process complex data sets.
Examples
Pass example
A data table that uses the correct table elements to define its structure.
This section provides information on how to review and fix the issue.
How to review it
Identify any data on the page that is presented in a grid or tabular format.
You can use the Web Governance Browser Extension to identify the element on the page or in the HTML source code to see if it uses the <table> tag.
How to fix it
If you find data that looks like a table but is built with other elements, replace those elements with the appropriate HTML table tags: <table> for the container, <tr> for rows, <th> for headers, and <td> for data cells.
If a table is used for layout purposes rather than data, change it to CSS Grid or Flexbox to keep the content accessible.
Ensure that every data table has clearly defined headers so that screen reader users can maintain context while they navigate through the rows.
Additional resources
This section contains useful resources for this subject.
Web Governance