Tables & Accessibility

Study guide

All 10 questions from this chapter, with every option, the correct answer, and the explanation. Expand an answer to review before you take the quiz above.

1. What is the only element you can place directly inside table (besides caption and table sections)?

   • tr (table row)
   • td (table cell)
   • th (header cell)
   • div
   Answer

   Correct: tr (table row)

   Tables are built row by row: table contains tr elements, and each tr holds td or th cells. caption describes the whole table and goes right after the opening table tag. div inside table is invalid structure.

2. When should you use th instead of td?

   • For every cell to make text bold
   • For header cells that label a row or column
   • Only in the last row of the table
   • When the cell spans multiple columns with colspan
   Answer

   Correct: For header cells that label a row or column

   th marks header cells — column titles in the first row or row labels in the first cell of a row. td is for data cells. Browsers bold th by default, but the point is semantic structure, not styling.

3. What do thead and tbody help with?

   • They replace the need for th cells
   • They make tables responsive on mobile automatically
   • They group header rows and body rows for clearer structure and styling
   • They are required or the table will not render
   Answer

   Correct: They group header rows and body rows for clearer structure and styling

   thead wraps header rows, tbody wraps data rows — optional but useful on larger tables. tfoot exists for footer rows. They help browsers, CSS, and assistive tech understand which rows are headers vs data.

4. Where should caption appear?

   • After the last tr in the table
   • Inside the first td of the first row
   • Only in thead alongside th elements
   • Immediately after the opening table tag, before any rows
   Answer

   Correct: Immediately after the opening table tag, before any rows

   caption gives the table an accessible title — "Dogs age", "Quarterly sales", etc. It belongs right after table opens. Screen readers announce it with the table. Good for accessibility and clarity.

5. When is a table the wrong tool for layout?

   • When building a page layout or aligning unrelated content — use CSS Grid or Flexbox instead
   • When displaying tabular data with rows and columns
   • When you only need a price list with labels and values in two columns of data
   • When data might be sorted or filtered later
   Answer

   Correct: When building a page layout or aligning unrelated content — use CSS Grid or Flexbox instead

   Tables are for tabular data — spreadsheets, comparisons, schedules. In the 1990s people used tables for layout; today CSS Grid and Flexbox handle layout without the accessibility problems of fake grid tables.

6. What does scope="col" on a th indicate?

   • The cell spans every column
   • The header applies to cells in its column
   • The table has no row headers
   • The column should be hidden on mobile
   Answer

   Correct: The header applies to cells in its column

   scope tells assistive tech whether a th labels its column (col), its row (row), or a group. It helps screen readers associate data cells with the right header — especially important in complex tables.

7. Which heading structure follows accessibility best practices?

   • h1 then h3, skipping h2 because it looks too big
   • Three h1 tags on one page for three equal sections
   • h1 for the page title, h2 for sections, h3 for subsections — no skipped levels
   • Use h4 for everything and style with CSS
   Answer

   Correct: h1 for the page title, h2 for sections, h3 for subsections — no skipped levels

   Headings form an outline — like a table of contents for screen readers. One h1 per page is typical; descend in order without skipping levels. Visual size is CSS; the level carries meaning.

8. Why prefer a button element over a div with onclick for an action?

   • div cannot have CSS applied to it
   • div onclick works only on mobile
   • button elements cannot be styled
   • button is keyboard-focusable, has a built-in role, and activates with Enter/Space by default
   Answer

   Correct: button is keyboard-focusable, has a built-in role, and activates with Enter/Space by default

   Native button already works with keyboard and assistive tech — focusable, announced as a button, activated with Enter or Space. A clickable div needs tabindex, role, and key handlers duplicated by hand.

9. What is the first rule of ARIA?

   • Always add role attributes to every element
   • Use aria-label on all images instead of alt
   • Prefer native HTML elements with built-in semantics before adding ARIA roles or attributes
   • Never use semantic tags like nav or main
   Answer

   Correct: Prefer native HTML elements with built-in semantics before adding ARIA roles or attributes

   If a native element already gives the semantics and behavior you need — button, nav, label, input — use it. ARIA fills gaps when HTML cannot, not as a replacement for good markup. No ARIA is better than wrong ARIA.

10. When is aria-label appropriate on an input?

    • On every input instead of a visible label
    • Instead of alt on images
    • To replace the name attribute on form submit
    • When a visible label is impossible and you need an accessible name, such as a search box identified only by placeholder
    Answer

    Correct: When a visible label is impossible and you need an accessible name, such as a search box identified only by placeholder

    aria-label provides an accessible name when visible text is not available — but visible labels are better when you can use them. It does not replace name for form submission or alt for images. Use it sparingly and intentionally.