Web Governance
Using white space characters to create multiple columns or to format tables in plain text content
1.3.2 Meaningful Sequence
This document provides information about the related accessibility checks:
Using white space characters to create multiple columns or to format tables in plain text content.
Avoid white space characters such as spaces, tabs, line breaks, or carriage returns to create columns or format tables in plain text.
Columns and tables must not be created with white space characters. This limits the ability of some users to adjust the content according to their preferences and needs. For example, users that access the content on mobile devices may struggle with content that is formatted with white space characters, as it does not adapt well to smaller screen sizes. Additionally, users of assistive technologies such as the screen readers that are used by blind individuals may not be able to read the content in the correct or intended order if columns or tables are formatted with white space characters.
This check affects the following users who have:
Visual impairments: Who access the site contents with a screen reader or screen magnification software.
No impairments: Who view the content on different screen sizes.
Bridgit is a blind mother to a five-year-old girl and an 11-year-old boy:
“I think the best way to explain it is to imagine you are sitting and reading a book. You see two pages, the one on the left and the one on the right. First, you read the left page from the top line down to the bottom, and then you move over to the right page and read it the same way.
Sometimes, when I need to read a webpage that is laid out in columns, I should first read the left column, and then the right column, just like reading a book. But what I experience is that it feels like my screen reader reads the top line of the left side, then the top line of the right side, then the second line of the left side, then the second line of the right side, and so on. It is completely impossible to understand the content when it reads like this.”
This section gives some examples of the issue.
Here is a table created using text and whitespace characters, such as spaces. This table may be difficult to read and navigate with screen reader software and may break or become less readable on smaller screens.
Population | 1900 | 1950 | 2000
Women | approx. 0.83 bn | approx. 1.26 bn | approx. 3.05 bn
Men | approx. 0.85 bn | approx. 1.31 bn | approx. 3.09 bn
Total | approx. 1.68 bn | approx. 2.57 bn | approx. 6.14 bn
Here is a table created using HTML code instead of white space characters. Because semantic HTML tags for tables, headers, and other elements are used, screen reader users can navigate the information and easily understand the relationships between years and population figures.
Web Governance<table border="1">
<thead>
<tr><th>Population</th><th>1900</th><th>1950</th><th>2000</th></tr>
</thead>
<tbody>
<tr><td>Women</td><td>approx. 0.83 bn</td><td>approx. 1.26 bn</td><td>approx. 3.05 bn</td></tr>
<tr><td>Men</td><td>approx. 0.85 bn</td><td>approx. 1.31 bn</td><td>approx. 3.09 bn</td></tr>
<tr><td>Total</td><td>approx. 1.68 bn</td><td>approx. 2.57 bn</td><td>approx. 6.14 bn</td></tr>
</tbody>
</table>The Web Governance platform highlights elements where columns or tables are arranged using whitespace characters.
To fix the issue, update your content so that you no longer use whitespace characters to create a table or column layout.
For data tables: Use the correct semantic HTML tags, such as <table>, <th>, <td>, and so on.
For columns: Use CSS techniques such as grid layout to create columns, and do not rely on whitespace characters.
If this content did not answer your questions, try searching or contacting our support team for further assistance.
If this content did not answer your questions, try searching or contacting our support team for further assistance.