meaningful-sequence
Ensures that content is meaningfully sequenced or ordered in an HTML page
Description
Avoid using layout tables to present content on an HTML page. When you use a layout table, the actual order of content in the HTML code seldom corresponds to the logical order of the content.
If you want to include a table in your webpage to present data, ensure to add the table header tag <th> so that screen readers can read it correctly.
Why is it important?
While content presented using layout tables is meaningful to some users, it poses a problem to people who use technologies such as screen readers to read the on-screen content or navigate it using a keyboard.
Example
Consider the following HTML code which uses the layout table to structure content:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example: Layout Table Accessibility</title>
<style>
/* Styles for demonstration purposes */
table {
border-collapse: collapse;
width: 100%;
border: 1px solid #000;
}
th, td {
border: 1px solid #000;
padding: 8px;
text-align: left;
}
</style>
</head>
<body>
<table>
<tr>
<td>
<h1>Main Heading</h1>
<nav>
<ul>
<li><a href="#section1">Section 1</a></li>
<li><a href="#section2">Section 2</a></li>
<li><a href="#section3">Section 3</a></li>
</ul>
</nav>
</td>
<td>
<section id="section1">
<h2>Section 1: Introduction</h2>
<p>This is the introduction to Section 1.</p>
</section>
<section id="section2">
<h2>Section 2: Content</h2>
<p>This is the content of Section 2.</p>
</section>
<section id="section3">
<h2>Section 3: Conclusion</h2>
<p>This is the conclusion of Section 3.</p>
</section>
</td>
</tr>
</table>
<footer>
Footer content goes here.
</footer>
</body>
</html>
While this structure may seem desirable and meaningful, screen readers read this as tabular data which it is clearly not.
Now, here’s an accessible way of presenting the same content:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example: Accessible Layout</title>
<style>
/* Styles for demonstration purposes */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.container {
display: flex;
flex-wrap: wrap;
}
.sidebar {
flex: 0 0 200px;
background-color: #ddd;
padding: 10px;
}
.content {
flex: 1;
padding: 10px;
}
header, footer {
background-color: #ccc;
padding: 10px;
width: 100%;
}
</style>
</head>
<body>
<header>
<h1>Main Heading</h1>
</header>
<div class="container">
<div class="sidebar">
<nav>
<ul>
<li><a href="#section1">Section 1</a></li>
<li><a href="#section2">Section 2</a></li>
<li><a href="#section3">Section 3</a></li>
</ul>
</nav>
</div>
<div class="content">
<section id="section1">
<h2>Section 1: Introduction</h2>
<p>This is the introduction to Section 1.</p>
</section>
<section id="section2">
<h2>Section 2: Content</h2>
<p>This is the content of Section 2.</p>
</section>
<section id="section3">
<h2>Section 3: Conclusion</h2>
<p>This is the conclusion of Section 3.</p>
</section>
</div>
</div>
<footer>
Footer content goes here.
</footer>
</body>
</html>
In this case, screen readers read this HTML output as follows:
- The header
- The navigation links in the sidebar
- The content
- The footer
Here, the order in the code logically maps to the semantic organization of content on the page.
How to fix?
Use CSS-based layouts instead of layout tables to structure HTML content.
Avoid triggering the rule incorrectly for tables
Screen readers can’t properly interpret tables on your webpages that don’t have the table header tag <th>. Such tables without the <th> tag are considered as layout tables, and their meaning is not conveyed properly using screen readers. To avoid this error, always use the <th> tag while adding tables to your websites.
Reference
We're sorry to hear that. Please share your feedback so we can do better
Contact our Support team for immediate help while we work on improving our docs.
We're continuously improving our docs. We'd love to know what you liked
We're sorry to hear that. Please share your feedback so we can do better
Contact our Support team for immediate help while we work on improving our docs.
We're continuously improving our docs. We'd love to know what you liked
Thank you for your valuable feedback!