Table accessibility basics in HTML - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Why use in tables?

What is the main purpose of the element in an HTML table for accessibility?

A To provide a visible title or description for the table that screen readers announce.

B To add a footer note at the bottom of the table.

C To create a clickable link inside the table header.

D To style the table with colors and borders.

💡 Hint

Think about how screen readers understand what a table is about.

The element gives a clear, descriptive title for the table. Screen readers use it to announce the table's purpose, helping users understand the content quickly.

📝 Syntax

intermediate

Correct use of for headers

Which option correctly marks the first row as header cells in a table for accessibility?

HTML

<table>
  <tr>
    <td>Product</td>
    <td>Price</td>
  </tr>
  <tr>
    <td>Apple</td>
    <td>$1</td>
  </tr>
</table>

A

<table>
  <thead>
    <tr>
      <td>Product</td>
      <td>Price</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Apple</td>
      <td>$1</td>
    </tr>
  </tbody>
</table>

B

<table>
  <tr>
    <td>Product</td>
    <td>Price</td>
  </tr>
  <tr>
    <th>Apple</th>
    <th>$1</th>
  </tr>
</table>

C

<table>
  <tr>
    <th>Product</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Apple</td>
    <td>$1</td>
  </tr>
</table>

D

<table>
  <thead>
    <tr>
      <th>Product</th>
      <td>Price</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Apple</td>
      <td>$1</td>
    </tr>
  </tbody>
</table>

💡 Hint

Headers should use the tag, not .

The first row cells should be to mark them as headers. This helps screen readers identify column headers.

❓ selector

advanced

Selecting header cells for row headers

Which CSS selector correctly styles all row header cells in a table for accessibility?

A table td[scope="row"] { font-weight: bold; }

B table td[scope="col"] { font-weight: bold; }

C table th[scope="col"] { font-weight: bold; }

D table th[scope="row"] { font-weight: bold; }

💡 Hint

Row headers use with a specific scope attribute.

Row headers are marked with <th scope="row">. Styling these helps visually distinguish row headers.

❓ layout

advanced

Responsive table design for accessibility

Which CSS approach best helps make a wide table accessible on small screens?

A Use overflow-x: auto on a container around the table to allow horizontal scrolling.

B Hide some columns with display: none to fit the screen.

C Set table width to 100% and use fixed column widths with px units.

D Use float: left on table cells to stack them vertically.

💡 Hint

Think about preserving all data while allowing easy navigation on small screens.

Wrapping the table in a container with overflow-x: auto lets users scroll horizontally, preserving all content and accessibility.

❓ accessibility

expert

Using ARIA roles for complex tables

In a complex data table with merged cells, which ARIA role helps assistive technologies understand the table structure best?

A role="presentation" on the table element

B role="grid" on the table element

C role="button" on the table element

D role="list" on the table element

💡 Hint

This role treats the table like a grid of cells with keyboard navigation support.

The role="grid" indicates a complex interactive table, helping screen readers and keyboard users navigate merged cells properly.