Table accessibility basics in HTML - Cheat Sheet & Quick Revision

Recall & Review

beginner

Why should tables have <caption> elements?

The <caption> provides a clear, short description of the table's purpose. Screen readers use it to help users understand what the table is about.

beginner

What is the role of <th> in accessible tables?

<th> defines header cells that describe the content of rows or columns. They help screen readers announce the header when reading table data cells.

intermediate

How do scope attributes improve table accessibility?

The scope attribute on <th> tells screen readers if the header is for a row, column, or group. This clarifies relationships between headers and data cells.

intermediate

What is the purpose of using summary attribute or ARIA roles in tables?

The summary attribute (though deprecated) or ARIA roles provide extra context about complex tables for screen readers, helping users understand layout and data relationships.

beginner

Why should tables avoid using layout tables for design?

Using tables only for data keeps structure clear. Layout tables confuse screen readers because they expect tables to show data relationships, not page layout.

Which HTML element provides a title or description for a table?

A <title>

B <summary>

C <caption>

D <header>

The element is used to give a table a descriptive title that screen readers announce.

What attribute on <th> helps define if it is a header for a row or column?

A scope

B aria-label

C role

D id

The scope attribute specifies if the header applies to a row, column, or group, improving screen reader clarity.

Which tag should be used for table header cells?

A <th>

B <td>

C <tr>

D <thead>

defines header cells, while is for data cells.

Why is it bad to use tables for page layout?

A It slows down the page

B It confuses screen readers expecting data tables

C It uses too much CSS

D It breaks links

Screen readers expect tables to show data relationships, so layout tables cause confusion.

What helps screen reader users understand complex tables better?

A Removing headers

B Adding many colors

C Using only <td> cells

D Using ARIA roles and captions

ARIA roles and captions provide extra context for screen readers on complex tables.

Explain how to make a data table accessible for screen reader users.

Think about how screen readers understand table structure.

Describe why using and scope attributes is important in tables.

Headers guide users through table data.