Skip to main content

meaningful-sequence

Ensures that content is meaningfully sequenced or ordered in an HTML page

Severity: Moderate

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.

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:

HTML
Copy icon Copy snippet

Content structured using layout table

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:

HTML
Copy icon Copy snippet

Content structured without layout table

In this case, screen readers read this HTML output as follows:

  1. The header
  2. The navigation links in the sidebar
  3. The content
  4. 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.

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






Thank you for your valuable feedback

Is this page helping you?

Yes
No

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!

Talk to an Expert
Download Copy