Tables templates

3 templates

Tables are the component that breaks first on mobile, and the one where the accessible markup is most often skipped. These keep real table semantics while staying readable at 390 pixels.

The component that breaks first on a phone

The usual fix is to wrap the table in a horizontally scrolling box, which works and means nobody can see more than three columns at a time. The alternative is to turn each row into a small labelled card, which keeps everything readable at 390 pixels.

Either way, keep it a real table. <table>, <thead> and <th scope> are what let a screen reader announce "Customer, Priya Raman" instead of reading a disconnected value with no context. The mobile layout is a presentational change on top of that, not a replacement for it.

Which approach to use depends on width. Six columns of short values stack well. Twenty columns of financial data do not — that is genuinely a scrolling table, and the wrapper needs tabindex="0" and a label so keyboard users can scroll it.

Three details almost everyone skips

• scope on every header. scope="col" on the column headings and scope="row" on the cell that identifies each row. Without it, a screen reader reads values with no idea which column they belong to.
• font-variant-numeric: tabular-nums on numeric columns. Most typefaces give digits different widths by default, so columns of figures do not line up and a counting number visibly jitters. One property fixes it.
• A <caption>. It is the first thing announced, and it is what tells someone whether this is the table they wanted before they commit to reading it.

If the table sorts, the sort state belongs in aria-sort on the <th>, and only one column may carry it at a time. Leaving it set on a previously sorted column is the most common bug in sortable tables.

Other categories