This document gives information about the related Acquia Optimize checks:
HTML layout tables must be implemented in a way that ensures their content makes logical sense when they are read in a linear sequence.
A "layout" table is a table primarily used for arranging visual content on a webpage, rather than for semantically presenting tabular data. While it may contain data, its main purpose is to control the page's design and structure, rather than to convey meaningful relationships between data points.
Users who rely on assistive technologies such as screen readers navigate through website content in a linear order. If the sequence of elements within a layout table does not follow a logical flow, it can create confusion and make it difficult for users to understand the content or context. For example, when a screen reader reads through a page, it might present content in an order that seems disjointed or out of place if the layout table is not implemented correctly. This can disrupt the user’s experience and hinder their ability to interact effectively with the webpage, and will ultimately affect their access to important information or functionality.
Ensure that layout tables make sense when linearized to help provide a seamless and intuitive experience for all users, regardless of how they navigate the content.
Bridgit is a blind mother to a five-year-old girl and an 11-year-old boy:
"I had an upcoming hospital appointment to check on some chronic pain issues I have been dealing with, and they sent me a link to fill out a pre-visit questionnaire online. I sat down with my screen reader, expecting it to be straightforward, but it was a complete mess. The reader went through all the labels first—‘Name,’ ‘Date of Birth,’ ‘Allergies’—without any input fields. Then, after listing all the labels, it finally started reading the fields.
By the time I got to the fields, I had no idea which label matched which input. It was so confusing, like trying to put together a puzzle without knowing where any of the pieces fit. I am sure the layout looked fine for someone who could see, but for me, it was chaos. In the end, I had to ask my 11-year-old son for help. It is humiliating to depend on him for something as basic as filling out a form. It made me feel so helpless in a situation where I should have been able to handle things independently."
This section gives some examples of the issue.
A news website displays three categories — "Breaking News," "Sports," and "Culture" — in three columns using a layout table.
<table>
<tr>
<td><h2>Breaking News</h2></td>
<td><h2>Sports</h2></td>
<td><h2>Culture</h2></td>
</tr>
<tr>
<td>Breaking News article 1...</td>
<td>Sports article 1...</td>
<td>Culture article 1...</td>
</tr>
<tr>
<td>Breaking News article 2...</td>
<td>Sports article 2...</td>
<td>Culture article 2...</td>
</tr>
</table>Although the layout looks clear visually, screen readers read all the headlines first, followed by the articles. This makes it hard for users to match each headline with its corresponding content.
How a screen reader interprets this:
Heading level 2, Breaking News
Heading level 2, Sports
Heading level 2, Culture
Breaking News article 1
Sports article 1
Culture article 1
Breaking News article 2
Sports article 2
Culture article 2
A news website displays three categories:
Breaking News
Sports
Culture
These are presented in three columns.
Use semantic HTML elements combined with CSS techniques such as "flexbox" or "grid" for layout to ensure that the content maintains a logical reading order for screen readers.
<div class="news-columns">
<section>
<h2>Breaking News</h2>
<p>Breaking News article 1...</p>
<p>Breaking News article 2...</p>
</section>
<section>
<h2>Sports</h2>
<p>Sports article 1...</p>
<p>Sports article 2...</p>
</section>
<section>
<h2>Culture</h2>
<p>Culture article 1...</p>
<p>Culture article 2...</p>
</section>
</div>Use HTML and CSS for the column layout instead of a table to make it much easier for screen reader users to understand the relationship between headings and articles. This is because the screen reader reads the content in the same order as it appears in the HTML structure.
How a screen reader interprets this:
Heading level 2, Breaking News
Breaking News article 1
Breaking News article 2
Heading level 2, Sports
Sports article 1
Sports article 2
Heading level 2, Culture
Culture article 1
Culture article 2
How to review it.
The Acquia Optimize platform highlights tables that, based on their code structure, appear to be used for layout purposes rather than for presenting data.
It is now your task to assess the following:
1. Confirm that it is indeed a layout table.
2. Ensure that the layout table still works properly when linearized.
First, check if the Acquia Optimize platform is correct in identifying the table as a layout table. It is most likely a layout table, but there is a small chance that the platform made a mistake, and it is actually a data table. Further down, you will find a detailed explanation of how to tell the difference between layout tables and data tables.
If it turns out to be a data table, you can simply mark it as "reviewed" There is nothing else you need to do.
If you have confirmed that it is indeed a layout table, your next step is to check if it works properly when linearized. This simply means viewing the table’s content in a straight line, without the visual layout provided by the table.
One way to do this is to select all of the text within the table, copying it, and pasting it into a simple text editor like Notepad, which does not support table formatting. Once pasted, remove any white space characters like tabs and spaces. This will show the text in a linear form, similar to how it would be read by a screen reader.
Now, check if the order of the content still makes sense. If it does, you can mark this issue as "reviewed."
If the linearized version has a confusing order, you will need to either fix the layout table or, even better, avoid using table code for layout altogether. Instead, build your layout using semantic HTML and CSS for a more accessible and logical structure.
For further instructions, see the user guide article:
How to review an accessibility issue.
A layout table is like a tool that organizes things neatly on a page. Imagine a table that lines up a picture on the left and some text on the right. It is only there to make the page look nice. If you take away the table, the picture and text would still make sense, but they might not be side-by-side anymore.
A data table is used when the information needs to be organized in a specific way to make sense. Think of a list of your favorite movies and their release years. Without the table, it would be hard to see which year matches which movie. The rows and columns work together to show important connections.
To figure out what kind of table it is, ask:
If this content did not answer your questions, try searching or contacting our support team for further assistance.
Mon Nov 25 2024 10:27:01 GMT+0000 (Coordinated Universal Time)