Accessible Product Comparison Tables That Actually Compare
Comparison tables decide big purchases, and their row headers, checkmarks, and sticky columns often defeat screen readers. Building tables people can use.
Comparing models is where careful shoppers spend money, and the comparison table is the tool they use. When tick marks are images with no text, row labels are missing, and the highlighted column is indicated by colour alone, the table excludes the shoppers who rely on it most.
A good comparison table is mostly good table craft: real headers, text instead of symbols, and a layout that survives a narrow screen without losing which value belongs to which product.
Headers do the heavy lifting
Each column needs a product name as a real header and each row needs its feature as a header too, so a screen reader can announce price, model B, or battery life, model A, as the shopper moves. Without row headers, a table reads as a list of orphaned values.
Keep product names short and consistent between the table, the page headings, and the buy buttons below it, so the winner a shopper picks in the table is the one they actually add to the basket.
Replace symbols with words
Ticks, crosses, and dots should carry text: included, not included, optional. Screen readers handle images inconsistently, and a column of identical tick images with the same alt text, or none, makes comparison impossible.
Where a value needs a footnote, such as battery life measured under specific conditions, put the note as text near the table and link it clearly. Shoppers comparing fairly need the conditions, not just the bigger number.
Make it work on a phone
Wide tables on mobile often squeeze into unreadable columns or require sideways scrolling that loses the row labels. Sticky first columns help sighted users; for everyone, letting shoppers choose two or three products keeps the table narrow enough to read.
Test the table zoomed to 200 percent as well. Comparison pages attract magnification users because the print is small, and a table that falls apart under zoom fails its main audience.
Let shoppers take the comparison with them
Offer the table in a form that survives leaving the page: a printable view that keeps headers attached to values, or a short list summary of the key differences in sentences. Shoppers compare over days and across devices, and a comparison that only works inside one interactive widget loses the careful customers it was built for.
Related reading
If this topic is useful, these earlier guides go deeper on connected questions: Making Size and Colour Swatches Accessible, Accessible Gift Cards: Buying, Sending, and Redeeming, and Accessible Product Bundles and Gift Sets.
Frequently asked questions
Why do comparison tables fail screen reader users?
Usually missing row headers and symbol only cells. Values get read without the feature they belong to, and ticks or crosses arrive as unlabelled images, so the comparison the table exists for never happens.
Should ticks and crosses have text alternatives?
Yes, real words: included, not included, optional extra. Text is unambiguous for screen readers, search, and anyone who cannot distinguish the symbols by colour or shape.
How many products should a comparison table hold?
Two to four is workable on most screens. More than that, let shoppers select which models to compare, which keeps columns readable and the table honest on mobile.
What is the quickest check of a comparison table?
Navigate it by keyboard with a screen reader and ask whether each cell announces its feature and product. Then repeat at 200 percent zoom and on a phone. Failures show up within a minute.