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. Usage of scope on header cells with values of row, col, rowgroup, or colgroup values can help to clarify these associations and remove ambiguity. scope can be particularly useful in complex tables with multiple header rows or columns.

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

Example 2: Table with Single Header Row, Scope Used

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

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

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

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

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

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

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

Example 2h: Table with Single Header Row, Scope Not Used, Random Empty Cell Placeholders

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

Example 4: Table with Single Header Column, Scope Used

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

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

Example 5: Two-Dimensional Table, Scope Not Used

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

Example 6: Two-Dimensional Table, Scope Used

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

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

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

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

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

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

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.

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.

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.

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?

Example 14: An Even Smaller Table, Only Two Columns

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

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

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?

Example 17: A Table with Scope Attributes

This table demonstrates the use of scope attributes to clarify the relationships between header and data cells. It uses both rowgroup and colgroup scopes, along with col scope attributes to enhance accessibility and remove ambiguity of associations.

Example 18: Column headers needing no scope attributes

In this example, the column headers do not require scope attributes because the table layout is simple and the headers are clearly associated with their respective columns.

Example 19: Usage of row and rowgroup in a complex table

From the Table Examples section in the HTML spec, showing proper usage of row and rowgroup values. Note that the usage of the elements at the top of the table code have no impact on semantics in this case.

Example 20: Simple Irregular Table

This table has a header row but is missing some table cells in the data rows, making it irregular.

Example 21: Complex Irregular Table

This table has both header row and header column, uses rowspan, and is missing several table cells making it irregular.