Accessible Tables Quick Guide

  1. Use tables only for data
    1. Use tables for data relationships
    2. Do NOT use tables for layouts
  2. Provide table header structure
    1. Your tables must have headers to be accessible
    2. Ensure header names are descriptive of the column or row data they govern
    3. If inspecting your code, table headers are defined in HTML with <th>
  3. Avoid Blank Cells
    1. Fill empty cells with “N/A”
  4. Ensure color contrast is sufficient if using colors
    1. Text must meet 4.5:1 contrast ratio
  5. Do not rely on color alone
    1. Use icons or text in addition to color
  6. Keep tables simple when possible
    1. Break large tables into smaller tables
    2. Avoid nesting tables
  7. Provide accessible alternatives if needed
    1. Include a summary or alternate format for complex tables
    2. Use AI to create these descriptions