WCAG 1.3.1 — Table Used for Layout

Who Is Affected

Blind and low vision users who rely on screen readers to navigate websites. Screen readers announce table structure and provide navigation commands that become meaningless when tables contain layout content instead of data.

What This Means

HTML tables should only be used to display tabular data — information that has a meaningful relationship between rows and columns, like budget figures or contact directories. When developers use tables to create visual layouts (like putting a sidebar next to main content), screen readers treat this as data and announce confusing table headers, row numbers, and column navigation that don't make sense.

Modern CSS provides better layout methods (flexbox, grid) that don't create accessibility barriers. If your site was built before 2010, it may still use outdated table-based layouts that need updating.

Fix: CMS / Theme

This is typically a theme-level issue requiring developer changes to the underlying HTML structure.

For Joomla Sites

1. Check if your template uses table-based layouts by viewing the page source and searching for <table> tags around content areas.
2. If using an older template, consider upgrading to a modern template that uses CSS flexbox or grid for layout.
3. For custom templates, have your developer replace layout tables with semantic HTML elements:
   • <div> containers with CSS flexbox or grid
   • <main> for primary content
   • <aside> for sidebars
   • <header> and <footer> for page sections

For WordPress Sites

1. Most WordPress themes created after 2015 use proper CSS layouts, but custom themes may still use tables.
2. Switch to a modern theme from the WordPress repository that follows current standards.
3. For custom themes, have your developer restructure the layout using CSS Grid or Flexbox instead of tables.

Fix: Content Editor

If tables are being used in page content for layout purposes:

1. Identify content where tables create visual columns but don't contain actual data relationships.
2. Remove the table structure and use alternative formatting:
   • For side-by-side content, use your CMS's column blocks or shortcodes
   • For spacing, use paragraph breaks or CSS margins instead of empty table cells
   • For alignment, use text alignment options in your editor
3. Reserve tables only for actual data like:
   • Budgets and financial reports
   • Staff directories
   • Program schedules
   • Comparison charts

Example of proper table use: A staff directory with Name, Title, and Phone columns where each row represents one person.

Example of improper table use: Using a table to place an image on the left and text on the right for visual layout.

Standard Reference

WCAG 2.1 Success Criterion 1.3.1 — Info and Relationships, Level A

Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.

• W3C Understanding SC 1.3.1
• WCAG Technique C6 — CSS for layout positioning
• WCAG Technique G57 — Ordering content meaningfully
• WCAG Technique H51 — Proper table markup
• WCAG Failure F46 — Tables for layout
• WCAG Failure F49 — Semantic markup misuse