Examples of Table Semantics

The examples below can be used for screen reader testing of a range of techniques for table semantics.

The expectation is in all cases that the appropriate header labels should be announced when moving vertically or horizontally in the tables. For simple tables, when navigating vertically, the user should hear the row header along with the data cell contents. Similarly, we should hear the column header when moving horizontally. Headers-ID can reinforce the visual associations but does not have to — any association or set of associations can be made.

Example 1: Table with Single Header Row, Scope Not Used

Single header row used and no scope set
Header 1 Header 2 Header 3 Header 4 Header 5
col 1, row 2 col 2, row 2 col 3, row 2 col 4, row 2 col 5, row 2
col 1, row 3 col 2, row 3 col 3, row 3 col 4, row 3 col 5, row 3
col 1, row 4 col 2, row 4 col 3, row 4 col 4, row 4 col 5, row 4
col 1, row 5 col 2, row 5 col 3, row 5 col 4, row 5 col 5, row 5

Example 2: Table with Single Header Row, Scope Used

Single header row used and scope set to column
Header 1 Header 2 Header 3 Header 4 Header 5
col 1, row 2 col 2, row 2 col 3, row 2 col 4, row 2 col 5, row 2
col 1, row 3 col 2, row 3 col 3, row 3 col 4, row 3 col 5, row 3
col 1, row 4 col 2, row 4 col 3, row 4 col 4, row 4 col 5, row 4
col 1, row 5 col 2, row 5 col 3, row 5 col 4, row 5 col 5, row 5

Example 2a: Table with Single Header Row, Scope Used, Two Non-Header Cells

Single header row used and scope set to column, two non-header cells present
Non-Header Cell 1 Header 2 Non-Header Cell 3 Header 4 Header 5
col 1, row 2 col 2, row 2 col 3, row 2 col 4, row 2 col 5, row 2
col 1, row 3 col 2, row 3 col 3, row 3 col 4, row 3 col 5, row 3
col 1, row 4 col 2, row 4 col 3, row 4 col 4, row 4 col 5, row 4
col 1, row 5 col 2, row 5 col 3, row 5 col 4, row 5 col 5, row 5

Example 2b: Table with Single Header Row, Scope Used, One Non-Header Cell with a Labeled Checkbox

Single header row used and scope set to column, label in a non-header cell at the left
Header 2 Header 3 Header 4 Header 5
col 1, row 2 col 2, row 2 col 3, row 2 col 4, row 2 col 5, row 2
col 1, row 3 col 2, row 3 col 3, row 3 col 4, row 3 col 5, row 3
col 1, row 4 col 2, row 4 col 3, row 4 col 4, row 4 col 5, row 4
col 1, row 5 col 2, row 5 col 3, row 5 col 4, row 5 col 5, row 5

Example 2c: ARIA Roles Used to Turn Off Heading Status of Top Left Column

Single header row used and scope set to column, label in a header cell at the left, with ARIA Roles used throughout, left header cell changed role from header via ARIA role
Header 2 Header 3 Header 4 Header 5
col 1, row 2 col 2, row 2 col 3, row 2 col 4, row 2 col 5, row 2
col 1, row 3 col 2, row 3 col 3, row 3 col 4, row 3 col 5, row 3
col 1, row 4 col 2, row 4 col 3, row 4 col 4, row 4 col 5, row 4
col 1, row 5 col 2, row 5 col 3, row 5 col 4, row 5 col 5, row 5

Example 2d: Table with Single Header Row, Scope Used, Table Contains Empty Column

Single header row used and scope set to column, with empty column
Header 1 Header 2 Header 3 Header 5 Header 6
col 1, row 2 col 2, row 2 col 3, row 2 col 5, row 2 col 6, row 2
col 1, row 3 col 2, row 3 col 3, row 3 col 5, row 3 col 6, row 3
col 1, row 4 col 2, row 4 col 3, row 4 col 5, row 4 col 6, row 4
col 1, row 5 col 2, row 5 col 3, row 5 col 5, row 5 col 6, row 5

Example 2e: Table with Single Header Row, Scope Used, Table Contains Almost Empty Column

Single header row used and scope set to column, with column containing only one data cell with contents
Header 1 Header 2 Header 3 Header 5 Header 6
col 1, row 2 col 2, row 2 col 3, row 2 col 5, row 2 col 6, row 2
col 1, row 3 col 2, row 3 col 3, row 3 col 5, row 3 col 6, row 3
col 1, row 4 col 2, row 4 col 3, row 4 lonely data cell col 5, row 4 col 6, row 4
col 1, row 5 col 2, row 5 col 3, row 5 col 5, row 5 col 6, row 5

Example 2f: Table with Single Header Row, Scope Used, Table Nested in Header Cell

Single header row used and scope set to column, with a table nested in a header cell
Header 1 Header 2 Header 3
a table as
a header cell
Header 5
col 1, row 2 col 2, row 2 col 3, row 2 col 4, row 2 col 5, row 2
col 1, row 3 col 2, row 3 col 3, row 3 col 4, row 3 col 5, row 3
col 1, row 4 col 2, row 4 col 3, row 4 col 4, row 4 col 5, row 4
col 1, row 5 col 2, row 5 col 3, row 5 col 4, row 5 col 5, row 5

Example 2g: Table with Single Header Row, Scope Used, Table Nested in Data Cell

Single header row used and scope set to column, with a table nested in a data cell
Header 1 Header 2 Header 3 Header 4 Header 5
col 1, row 2 col 2, row 2 col 3, row 2 col 4, row 2 col 5, row 2
col 1, row 3 col 2, row 3
a table as
a data cell
col 4, row 3 col 5, row 3
col 1, row 4 col 2, row 4 col 3, row 4 col 4, row 4 col 5, row 4
col 1, row 5 col 2, row 5 col 3, row 5 col 4, row 5 col 5, row 5

Example 3: Table with Single Header Column, Scope Not Used

Single header column used and no scope set
Header 1 col 2, row 1 col 3, row 1 col 4, row 1 col 5, row 1
Header 2 col 2, row 2 col 3, row 2 col 4, row 2 col 5, row 2
Header 3 col 2, row 3 col 3, row 3 col 4, row 3 col 5, row 3
Header 4 col 2, row 4 col 3, row 4 col 4, row 4 col 5, row 4
Header 5 col 2, row 5 col 3, row 5 col 4, row 5 col 5, row 5

Example 4: Table with Single Header Column, Scope Used

Single header column used and scope set to row
Header 1 col 2, row 1 col 3, row 1 col 4, row 1 col 5, row 1
Header 2 col 2, row 2 col 3, row 2 col 4, row 2 col 5, row 2
Header 3 col 2, row 3 col 3, row 3 col 4, row 3 col 5, row 3
Header 4 col 2, row 4 col 3, row 4 col 4, row 4 col 5, row 4
Header 5 col 2, row 5 col 3, row 5 col 4, row 5 col 5, row 5

Example 4a: Table with Single Header Column, Scope Used, Contains Empty Row

Single header column used and scope set to row, with empty row
Header 1 col 2, row 1 col 3, row 1 col 4, row 1 col 5, row 1
Header 2 col 2, row 2 col 3, row 2 col 4, row 2 col 5, row 2
Header 3 col 2, row 3 col 3, row 3 col 4, row 3 col 5, row 3
Header 5 col 2, row 5 col 3, row 5 col 4, row 5 col 5, row 5
Header 6 col 2, row 6 col 3, row 6 col 4, row 6 col 5, row 6

Example 4b: Table with Single Header Column, Scope Used, Contains Almost Empty Row

Single header column used and scope set to row, with row having only one data cell with contents
Header 1 col 2, row 1 col 3, row 1 col 4, row 1 col 5, row 1
Header 2 col 2, row 2 col 3, row 2 col 4, row 2 col 5, row 2
Header 3 col 2, row 3 col 3, row 3 col 4, row 3 col 5, row 3
lonely in this row
Header 5 col 2, row 5 col 3, row 5 col 4, row 5 col 5, row 5
Header 6 col 2, row 6 col 3, row 6 col 4, row 6 col 5, row 6

Example 5: Two-Dimensional Table, Scope Not Used

Header row and header column with no scope set
Col Header 2 Col Header 3 Col Header 4 Col Header 5
Row Header 2 col 2, row 2 col 3, row 2 col 4, row 2 col 5, row 2
Row Header 3 col 2, row 3 col 3, row 3 col 4, row 3 col 5, row 3
Row Header 4 col 2, row 4 col 3, row 4 col 4, row 4 col 5, row 4
Row Header 5 col 2, row 5 col 3, row 5 col 4, row 5 col 5, row 5

Example 5a: Two-Dimensional Table, Scope Not Used, Non-Header at Top-Left

Header row and header column with no scope set, and non-header cell at top left
Col Header 2 Col Header 3 Col Header 4 Col Header 5
Row Header 2 col 2, row 2 col 3, row 2 col 4, row 2 col 5, row 2
Row Header 3 col 2, row 3 col 3, row 3 col 4, row 3 col 5, row 3
Row Header 4 col 2, row 4 col 3, row 4 col 4, row 4 col 5, row 4
Row Header 5 col 2, row 5 col 3, row 5 col 4, row 5 col 5, row 5

Example 6: Two-Dimensional Table, Scope Used

Header row and header column with scope set
Col Header 2 Col Header 3 Col Header 4 Col Header 5
Row Header 2 col 2, row 2 col 3, row 2 col 4, row 2 col 5, row 2
Row Header 3 col 2, row 3 col 3, row 3 col 4, row 3 col 5, row 3
Row Header 4 col 2, row 4 col 3, row 4 col 4, row 4 col 5, row 4
Row Header 5 col 2, row 5 col 3, row 5 col 4, row 5 col 5, row 5

Example 6a: Two-Dimensional Table, Scope Used, Extra Header

Header row and header column with scope set, header in top left, with scope row
Col Header 1, Scoped for Row only Col Header 2 Col Header 3 Col Header 4 Col Header 5
Row Header 2 col 2, row 2 col 3, row 2 col 4, row 2 col 5, row 2
Row Header 3 col 2, row 3 col 3, row 3 col 4, row 3 col 5, row 3
Row Header 4 col 2, row 4 col 3, row 4 col 4, row 4 col 5, row 4
Row Header 5 col 2, row 5 col 3, row 5 col 4, row 5 col 5, row 5

Example 6b: Two-Dimensional Table, Scope Used, Extra Header, THEAD used

Header row and header column with scope set, header in top left, with scope to column, with entire row wrapped in a thead
Col Header 1, Scoped for Column Col Header 2 Col Header 3 Col Header 4 Col Header 5
Row Header 2 col 2, row 2 col 3, row 2 col 4, row 2 col 5, row 2
Row Header 3 col 2, row 3 col 3, row 3 col 4, row 3 col 5, row 3
Row Header 4 col 2, row 4 col 3, row 4 col 4, row 4 col 5, row 4
Row Header 5 col 2, row 5 col 3, row 5 col 4, row 5 col 5, row 5

Example 7: Two-Dimensional Table, Multiple Row and Column Headers, No Scope Set

Table with two column and row headers with no scope set on headers
Col Header A
Col Header 3 Col Header 4
Row Header A Row Header 3 col 3. row 3 col 4. row 3
Row Header 4 col 3, row 4 col 4, row 4

Example 8: Two-Dimensional Table, Multiple Row and Column Headers, With Scope Set and Rowgroup and Colgroup Used

Table with two column and row headers with scope set on headers. Colgroup and rowgroup used to set multiple headers for second level headers
Col Header A
Col Header 3 Col Header 4
Row Header A Row Header 3 col 3. row 3 col 4. row 3
Row Header 4 col 3, row 4 col 4, row 4

Example 9: Two-Dimensional Table, No Scope, Headers-ID Used to Create Complex Semantic Associations

Table with four quadrants, each data cell associated to headers from a different quadrant
Quad 1 Header Quad 2 Header
Quad A Header Cell Cell Quad B Header Cell Cell
Cell Cell Cell Cell
Quad 3 Header Quad 4 Header
Quad C Header Cell Cell Quad D Header Cell Cell
Cell Cell Cell Cell

Example 9a: Using Headers-ID for Left-Most Column Association with Second Column Header Row with Scope Set on It

Row 1 header Some data Some data Some data
Row 2 header Some data Some data Some data
Row 3 header Some data Some data Some data
Row 4 header Some data Some data Some data
Row 5 header Some data Some data Some data

Example 10: Table Using Headers-ID for Cell Semantics and ARIA-Describedby for Summary

This example is Example 2 from Techniques for describing tables from the HTML5.1 Recommendation

In the following table, characteristics are given in the second column, with the negative side in the left column and the positive side in the right column.

Characteristics with positive and negative sides
Negative Characteristic Positive
Sad Mood Happy
Failing Grade Passing

Example 11: Table Using Scope Row and Rowgroup (No Col Scope)

This example is Example 7 from The th element from the HTML5.1 Recommendation. Table is modified to use the abbr attribute — Cats should read Panthers, Englisher speakers should read British, if the attribute is honored. The tbody tag is used to constrain the scope of the rowgroup attributes to apply only to the appropriate section.

Measurement of legs and tails in Cats and English speakers
ID Measurement Average Maximum
Cats
93 Legs 3.5 4
10 Tails 1 1
English speakers
32 Legs 2.67 4
35 Tails 0.33 1

Example 12: Two-Dimensional Table, Scope Used, Visual and Non-Visual “Extras” in the Headers

Table headers contain four spans, in addition to the regular heading text — one that is aria-hidden (and visible), one that is set to display none, one that is set hidden, and one that is non-visible accessible text. They also contain a link that uses aria-label for its accessible name, a link that uses aria-labelledby pointing to the aria-hidden text, and a button that user aria-label for its name.

Header row and header column with scope set, + extra visual and non-visual content in headers
Col Header 2 non-visual item YTD Col Header 3 non-visual item YTD (using abbr tag) Col Header 4 YTD Col Header 5 non-visual item
Row Header 2 non-visual item col 2, row 2 col 3, row 2 col 4, row 2 col 5, row 2
Row Header 3 non-visual item col 2, row 3 col 3, row 3 col 4, row 3 col 5, row 3
Row Header 4 non-visual item col 2, row 4 col 3, row 4 col 4, row 4 col 5, row 4
Row Header 5 non-visual item col 2, row 5 col 3, row 5 col 4, row 5 col 5, row 5

Example 13: A Small Table, Only Three Columns

We have noticed in the past that mobile browsers sometimes do not report table semantics on very small tables.

Also, there is no caption on this table. Does this maybe trick the screen reader into thinking it is a layout table?

Header One Header Two Header Three
col 1, row 2 col 2, row 2 col 3, row 2
col 1, row 3 col 2, row 3 col 3, row 3

Example 14: An Even Smaller Table, Only Two Columns

Header One Header Two
col 1, row 2 col 2, row 2
col 1, row 3 col 2, row 3

Example 15: An Even Smaller Table, Right Column Differently Aligned

Putting the table in a div and messing with the right column's alignment.

Header One Header Two
col 1, row 2 col 2, row 2
col 1, row 3 col 2, row 3

Example 16: Two-Column, Two-Row Mini Table with Bad Attributes (Rowspans)

Does messing with attributes and styles cause Firefox to “think ”this is not a tiny data table?

Header One Header Two
Col 1, Row 2 Col 2, Row 2