HTML · Exercise 5 of 5 Previous
Intermediate
Build a responsive, accessible plan comparison
Build a comparison of three phone plans (Basic, Plus, Max) across at least three features (for example Price, Data per day, Validity). It must work for screen readers and on a narrow phone screen.
Requirements: a caption; column headers in a thead with scope="col"; one body row per plan, starting with the plan name as <th scope="row">; single-line borders (border-collapse: collapse).
Wrap the table in a div that scrolls sideways (overflow-x: auto), can be focused with the keyboard (tabindex="0"), has role="region" and is named by the caption with aria-labelledby.
What Check tests
- A table sits inside an element with
role="region" - The region is named by the table's caption
- The wrapper scrolls sideways and can be focused
- At least 3 column headers with
scope="col"in athead - Three plan rows, each starting with a
th scope="row" - Borders collapse into single lines
Stuck? One hint at a time
The solution unlocks after your first Check. Try first: that is where the learning happens.
Runs in your browser. Your code is saved here.
Your page
Press Run to see the page.
Console
Nothing logged yet.