tableTwin: sort, a missing value, an empty list
tableTwin is src/parts/table-twin.js. announce() writes into one live region (role=status), which the last line reads back after 300 ms. Its output stays in UTC-independent text, so it is the same everywhere.
A real HTML table beside every chart holds the same numbers, and it works for screen readers, for keyboards, for people who want exact values and for anyone who wants to copy the data. Sort it, cap it, and summarise big data first.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write the HTML for a table twin of two stations: Quay 7,078 and Lantern 7,260, with the right caption and scopes.
A column mixes numbers and the text n/a. Write a one-line clean step before the table.
Explain it without notes
Why a real table and not styled divs?
What is the difference between display:none and a details element for a table twin?
How should a sortable column be built, and what must it tell a screen reader?
What are the two honest ways to handle a 365-row twin?
Preview
Console
Nothing logged yet.Expected console output
start : Mon2,979 | Tue3,992 | Wed– | Thu3,742 | aria-sort: none
Rides once : Tue3,992 | Thu3,742 | Mon2,979 | Wed– | aria-sort: descending
Rides twice: Mon2,979 | Thu3,742 | Tue3,992 | Wed– | aria-sort: ascending
Day : Mon2,979 | Thu3,742 | Tue3,992 | Wed– | aria-sort: ascending
Summary : Show the numbers as a table (4 rows)
The chart's own array is unchanged: Mon,Tue,Wed,Thu
Empty : Show the numbers as a table (no rows) | table hidden: true | There are no rows to show.
Spoken : Table sorted by Day, lowest first.