Skip to Content
FeaturesAccessibilityTable Accessibility

Table Accessibility

Properly structured tables allow screen reader users to navigate and understand tabular data.

Why Table Structure Matters

Screen readers rely on table markup to:

  • Announce row and column headers
  • Navigate cell by cell
  • Understand data relationships
  • Provide context for each cell

Without proper structure, screen readers may read tables as a continuous stream of text, making data incomprehensible.

Table Components

Header Cells

Header cells (TH) identify columns or rows:

  • Column headers: Describe what’s in each column
  • Row headers: Describe what’s in each row
  • Both: Complex tables may have both

Data Cells

Data cells (TD) contain the actual information.

Caption and Summary

  • Caption: Visible title for the table
  • Summary: Description of table structure (for complex tables)

Setting Up Table Accessibility

Define Header Cells

Select the Table

Click anywhere in the table

Open Table Properties

Right-click → Table Properties or Tools → Accessibility → Table Structure

Identify Headers

Select header cells and mark them as headers:

  • First row as column headers
  • First column as row headers
  • Or both

Set Header Scope

Define what each header describes:

  • Column: Header applies to cells below
  • Row: Header applies to cells to the right

Apply Changes

Click OK to save

Header Scope

Column Headers

Headers that label columns:

| Name    | Email           | Phone       |  ← Column headers
|---------|-----------------|-------------|
| Alice   | alice@mail.com  | 555-1234    |
| Bob     | bob@mail.com    | 555-5678    |

Set scope to Column for these headers.

Row Headers

Headers that label rows:

|         | Q1    | Q2    | Q3    | Q4    |
|---------|-------|-------|-------|-------|
| Sales   | $100K | $120K | $115K | $140K |  ← "Sales" is row header
| Costs   | $80K  | $85K  | $82K  | $90K  |  ← "Costs" is row header

Set scope to Row for the first column.

Both Headers

Tables with headers in both directions:

|           | 2022    | 2023    | 2024    |
|-----------|---------|---------|---------|
| Revenue   | $1.2M   | $1.5M   | $1.8M   |
| Expenses  | $0.9M   | $1.0M   | $1.1M   |
| Profit    | $0.3M   | $0.5M   | $0.7M   |

Both the first row and first column are headers.

Complex Tables

Spanning Cells

For cells that span multiple columns or rows:

  1. Select the spanning cell
  2. Set Row Span or Column Span values
  3. Ensure headers still apply correctly

Nested Headers

For multi-level headers:

|              | 2023          |      | 2024          |      |
|              | Q1-Q2  | Q3-Q4 | Q1-Q2  | Q3-Q4 |
|--------------|--------|-------|--------|-------|
| Product A    | $50K   | $60K  | $55K   | $70K  |

Use the Headers attribute to associate data cells with the correct headers.

Irregular Tables

For tables that don’t follow a regular pattern:

  1. Add unique IDs to header cells
  2. Reference IDs in the Headers attribute of data cells
  3. This explicitly links each cell to its headers

Complex tables are harder to make accessible. Consider splitting into simpler tables when possible.

Table Summaries

For complex tables, add a summary:

  1. Select the table
  2. Open Table Properties
  3. Enter a Summary describing the table’s organization
  4. Screen readers announce this before reading the table

Example summary: “Sales data organized by product (rows) and quarter (columns), with yearly totals in the final column.”

Auto-Fix Table Issues

Penvio can automatically fix common table problems:

  1. Click Tools → Accessibility → Fix Table Structure
  2. Select the table to fix
  3. Review suggested changes:
    • Convert first row to headers
    • Add missing header scope
    • Fix irregular structure
  4. Click Apply

Validating Tables

Accessibility Checker

  1. Run Tools → Accessibility → Check Accessibility
  2. Look for table-related issues:
    • Tables without headers
    • Missing header scope
    • Irregular table structure
  3. Click issues to locate and fix

Manual Testing

Navigate the table with a screen reader:

  1. Enter the table
  2. Move cell by cell
  3. Verify headers are announced
  4. Check that data makes sense in context

Tables to Avoid

Layout Tables

Don’t use tables for visual layout. Instead:

  • Use proper document structure
  • Mark layout tables as artifacts if unavoidable

Nested Tables

Tables within tables cause confusion:

  • Flatten to a single table
  • Or split into separate tables

Tables as Images

Don’t insert table images:

  • Screen readers can’t read image content
  • Recreate as a real table

Best Practices

PracticeReason
Use simple structuresEasier to navigate and understand
Mark all headersProvides context for data
Set header scopeClarifies header relationships
Add captionsVisible table identification
Add summaries for complex tablesHelps users understand structure
Avoid empty cellsUse “N/A” or ”-” instead
Avoid merged cells when possibleSimplifies structure

Tips

  • Keep tables as simple as possible
  • Use captions to identify tables
  • Test with screen readers
  • Consider if a table is the best format for your data
  • Split complex tables into multiple simpler tables
  • Don’t use tables for visual layout

Next Steps

Last updated on
Alternative TextAccessibility Checker