Avoid Using Tables for Layout
Tables have a very specific meaning and functionality in Web content: conveying 2-dimensional relationships between header cells and data cells.
Using tables for visual effect, to create multi-column layouts, creates two significant issues:
- Screen readers switch into table mode: users hear a great deal of information about their column and row position within the table when moving between paragraphs. This is both confusing and annoying when the content is not a table.
- The layout cannot stack into a single column when it is too wide for the window. When viewed with enlarged text or on a mobile phone, the layout becomes smushed and horizontal scrolling is required.
Whenever possible, use design elements in the site theme to create "real" content columns instead.
Don't do This
|
Cell 1 Dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam |
Cell 2 Dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam |
Cell 3 Dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam |
Why Is This Wrong?
Presenting multi-column layouts as data tables provides a confusing experience for screen reader users. In addition, the table will not break into two separate rows in a smaller viewport (i.e., it is not designed responsively).
Tables squish on mobile
Do This: Create Columns Using Layout Tools
Column 1
Dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam
Column 2
Dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam
Column 3
Dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam
Why is this better?
Screen readers and mobile devices recognize this is just text. The layout can change.
Columns stack on mobile
