WEBSITE PLANNING

Present Comparison Data as an Accessible Table

Give comparison tables meaningful headers, clear values and a usable narrow-screen presentation.

Confirm that a table fits the information

A table is useful when a reader needs to compare the same attributes across several options. Write the row and column labels before choosing a visual style. If every cell contains a different kind of story, a set of sections may be easier to understand. Do not use a data table merely to place unrelated content side by side.

Make relationships explicit

For a hypothetical package comparison, columns could identify packages while rows identify included pages, revisions and support. An empty cell is ambiguous: use a truthful value such as Not included or Confirm during scoping when that is what the business means. W3C explains how table headers communicate cell relationships. Captions should tell readers what the comparison covers and any assumptions that apply to the whole table.

Review the narrow-screen version

Check a phone-width view with long package names and the largest realistic values. If horizontal scrolling is needed, make the arrangement discoverable without losing row meaning. Have a reviewer read a cell together with its applicable headers. Confirm all prices and inclusions with the business owner; accessible markup cannot fix inaccurate package facts. Repeat the review whenever a new comparison column is added.

Reference and next step

Reference: W3C tables tutorial. For help reviewing a specific implementation, send the affected website address and describe the task customers are trying to finish.