Lists and tables need matching semantics
Aliases: list role · table headers · fake list fake table
What it is
Bullets on a page are not yet a list, and a drawn grid is not yet a table. What the reader needs is “list, five items,” and cell movement that speaks column and row headers. Lists and tables need matching semantic nodes: unordered, ordered, and definition lists; data tables with headers. A div with a bullet glyph, a flex grid that looks tabular, still reads as a flat stream of blocks.
Headings give people a way to jump sections. Lists and tables give a different movement unit — the item, and the cell. Do not mix the units, and do not impersonate them with style.
Why it happens
List semantics announce how many items there are, which item you are on, and nesting. Users move by “next item” instead of hearing each line as an unrelated paragraph and guessing the boundary. Table semantics give two-dimensional movement: row, column, and the header as the current cell’s name. Without those nodes the reader cannot enter list mode or table mode; it is ordinary text. A four-by-three price grid made of divs is twelve paragraphs, with no coordinate that says “this column is monthly fee.”
Item counts and headers are cognitive scaffolding. “List, seven items” lets someone decide to listen or skip; a header keeps you oriented on cell 19 in the “stock” column. Scaffolding comes from semantics, not from dots and rules.
Studying it
In the reader’s element list or rotor, count list objects and table objects, and compare with lists and tables on the visual page. Dependent: visual versus semantic list count, visual versus semantic table count; time and errors to find “the value in row three, column two” on a real table versus linear listening on a fake one.
An independent variable is two implementations of the same content: semantic list/table versus visually identical divs. Do not open the general “style impersonating structure” mechanism here — compare only whether these two object types have matching roles.
Where it stops holding
One or two short parallel phrases can live in a sentence with commas; they do not need a list just because they “look list-like.” Layout grids (three header blocks, a card array) are not data tables; marking them as tables sends people into cell navigation with no headers to find. A presentational “table” that merely lines up a few numbers is often more honest as a list or a description list. Equivalence tables for complex graphics belong with long descriptions; the premise is still that the equivalent table is a real table.
Applying it
- Mark parallel items (steps, feature bullets, search results) as a list; use an ordered list for sequence, a definition list for name–value pairs.
- Use a table when both rows and columns mean something. Mark the first row or column as headers, and let those headers be the cell’s name — bold type is not a header.
- Do not draw either object with unsemantic containers plus bullets or borders.
- How to check: the rotor or element list should show lists and tables in numbers that match the visual inventories. Inside a table, moving one cell should speak the row/column header. A fake list with no item count, or a fake table you cannot walk by cell, has unmatched semantics.