HTML table - summary and caption

Ideally, the <caption> element and summary attribute should be used to describe the purpose of the table.

In line-by-line mode

If a summary attribute is present, it should be announced before the table is announced in JAWS and with the table in NVDA
If a caption is present, it should be announced after the table element is announced in JAWS an with the table in NVDA

In T mode:

If a summary attribute is present, it should be announced with the table in both JAWS and NVDA
If a caption is present, it should be announced with the table in both JAWS and NVDA

Example 1: Table only

Example

header cell 1 a	header cell 1 b
cell 1 a	cell 1 b

Code sample

<table>
	<tr>
		<th>header cell 1 a</th>
		<th>header cell 1 b</th>
	</tr>
	<tr>
		<td>cell 1 a</td>
		<td>cell 1 b</td>
	</tr>
</table>

Example 2: Table with summary

Example

header cell 2 a	header cell 2 b
cell 2 a	cell 2 b

Code sample

<table summary="Summary2">
	<tr>
		<th>header cell 2 a</th>
		<th>header cell 2 b</th>
	</tr>
	<tr>
		<td>cell 2 a</td>
		<td>cell 2 b</td>
	</tr>
</table>

Example 3: Table with caption

Example

Caption3
header cell 3 a	header cell 3 b
cell 3 a	cell 3 b

Code sample

<table>
	<caption>Caption3</caption>
	<tr>
		<th>header cell 3 a</th>
		<th>header cell 3 b</th>
	</tr>
	<tr>
		<td>cell 3 a</td>
		<td>cell 3 b</td>
	</tr>
</table>

Example 4: Table with caption and summary

Example

Caption4
header cell 4 a	header cell 4 b
cell 4 a	cell 4 b

Code sample

<table summary="summary4">
	<caption>Caption4</caption>
	<tr>
		<th>header cell 4 a</th>
		<th>header cell 4 b</th>
	</tr>
	<tr>
		<td>cell 4 a</td>
		<td>cell 4 b</td>
	</tr>
</table>

Support chart - line-by-line
OS	Browser	NVDA 2014.4	JAWS 16	VoiceOver
Windows 7	IE 11	Example 1: Table only "Table with 2 rows and 2 columns. Row 1. Column 1. Header cell 1 a" Example 2: Table with summary "Table with 2 rows and 2 columns. Summary 2" Example 3: Table with caption "Table with 2 rows and 2 columns. Caption 3" Example 4: Table with caption and summary "Table with 2 rows and 2 columns. Summary 4" "Caption 4"	Example 1: Table only "Table with 2 columns and 2 rows" Example 2: Table with summary "Summary. Colon. Summary 2" "Table with 2 columns and 2 rows" Example 3: Table with caption "Table with 2 columns and 2 rows" "Caption 3" Example 4: Table with caption and summary "Summary. Colon. Summary 4" "Table with 2 columns and 2 rows" "Caption 4"
Windows 7	IE 8	x	x
Windows 7	Chrome 39	Example 1: Table only "Table with 2 rows and 2 columns. Row 1. Column 1. Header cell 1 a" Example 2: Table with summary "Table with 2 rows and 2 columns. Summary 2" Example 3: Table with caption "Table with 2 rows and 2 columns. Caption 3" Example 4: Table with caption and summary "Table with 2 rows and 2 columns. Summary 4" Caption not announced	Example 1: Table only "Table with 2 columns and 2 rows" Example 2: Table with summary "Summary. Colon. Summary 2" "Table with 2 columns and 2 rows" Example 3: Table with caption "Table with 2 columns and 2 rows" Caption not announced Example 4: Table with caption and summary "Summary. Colon. Summary 4" "Table with 2 columns and 2 rows" Caption not announced
Windows 7	Firefox 34	Example 1: Table only "Table with 2 rows and 2 columns. Row 1. Column 1. Header cell 1 a" Example 2: Table with summary "Table with 2 rows and 2 columns. Summary 2" Example 3: Table with caption "Table with 2 rows and 2 columns. Caption 3" Example 4: Table with caption and summary "Table with 2 rows and 2 columns. Summary 4" "Caption 4"	Example 1: Table only "Table with 2 columns and 2 rows" Example 2: Table with summary "Summary. Colon. Summary 2" "Table with 2 columns and 2 rows" Example 3: Table with caption "Table with 2 columns and 2 rows" "Caption 3" Example 4: Table with caption and summary "Summary. Colon. Summary 4" "Table with 2 columns and 2 rows" "Caption 4"
OSX 10.9	Chrome 39			Example 1: Table only "Table. 2 columns. 2 rows" Example 2: Table with summary "Table. 2 columns. 2 rows" Summary not announced Example 3: Table with caption "Caption 3. Table. 2 columns. 2 rows" Example 4: Table with caption and summary "Caption 4. Table. 2 columns. 2 rows" Summary not announced
OSX 10.9	Firefox 34			Example 1: Table only "Header cell 1a. header cell 1b. List box" Example 2: Table with summary "Header cell 2a. header cell 2b. Summary 2. List box" Example 3: Table with caption "Caption 3" "Header cell 3a. header cell 3b. Caption 3. List box" Example 4: Table with caption and summary "Summary 4. Group with 3 items"
OSX 10.9	Safari 7			Example 1: Table only "Table. 2 columns. 2 rows" Example 2: Table with summary "Table. 2 columns. 2 rows" Summary not announced Example 3: Table with caption "Table. 2 columns. 2 rows" Caption not announced Example 4: Table with caption and summary "Table. 2 columns. 2 rows" Summary and caption not announced

Support chart - "T" - jump to table
OS	Browser	NVDA 2014.4	JAWS 16	VoiceOver
Windows 7	IE 11	Example 1: Table only "Table with 2 rows and 2 columns. Row 1. Column 1. Header cell 1 a" Example 2: Table with summary "Table with 2 rows and 2 columns. Summary 2" Example 3: Table with caption "Table with 2 rows and 2 columns. Caption 3" Example 4: Table with caption and summary "Table with 2 rows and 2 columns. Summary 4"	Example 1: Table only "Table with 2 columns and 2 rows. Column 1. Row 1. Header cell 1 a" Example 2: Table with summary "Table with 2 columns and 2 rows. Summary2. Column 1. Row 1. Header cell 2 a" Example 3: Table with caption "Table with 2 columns and 2 rows. Caption3. Column 1. Row 1. Header cell 3 a" Example 4: Table with caption and summary "Table with 2 columns and 2 rows. Summary4. Caption4. Column 1. Row 1. Header cell 4 a"
Windows 7	IE 8	x	x
Windows 7	Chrome 39	Example 1: Table only "Table with 2 rows and 2 columns. Row 1. Column 1. Header cell 1 a" Example 2: Table with summary "Table with 2 rows and 2 columns. Summary 2" Example 3: Table with caption "Table with 2 rows and 2 columns. Caption 3" Example 4: Table with caption and summary "Table with 2 rows and 2 columns. Summary 4"	Example 1: Table only "Table with 2 columns and 2 rows. Column 1. Row 1. Header cell 1 a" Example 2: Table with summary "Table with 2 columns and 2 rows. Summary2. Column 1. Row 1. Header cell 2 a" Example 3: Table with caption "Table with 2 columns and 2 rows. Column 1. Row 1. Header cell 3 a" Caption not announced Example 4: Table with caption and summary "Table with 2 columns and 2 rows. Summary4. Column 1. Row 1. Header cell 4 a"
Windows 7	Firefox 34	Example 1: Table only "Table with 2 rows and 2 columns. Row 1. Column 1. Header cell 1 a" Example 2: Table with summary "Table with 2 rows and 2 columns. Summary 2" Example 3: Table with caption "Table with 2 rows and 2 columns. Caption 3" Example 4: Table with caption and summary "Table with 2 rows and 2 columns. Summary 4"	Example 1: Table only "Table with 2 columns and 2 rows. Column 1. Row 1. Header cell 1 a" Example 2: Table with summary "Table with 2 columns and 2 rows. Summary2. Column 1. Row 1. Header cell 2 a" Example 3: Table with caption "Table with 2 columns and 2 rows. Caption3. Column 1. Row 1. Header cell 3 a" Example 4: Table with caption and summary "Table with 2 columns and 2 rows. Caption4. Summary4. Column 1. Row 1. Header cell 4 a"
OSX 10.9	Chrome 39			Example 1: Table only "Table. 2 columns. 2 rows" Example 2: Table with summary "Table. 2 columns. 2 rows" Summary not announced Example 3: Table with caption "Caption 3. Table. 2 columns. 2 rows" Example 4: Table with caption and summary "Caption 4. Table. 2 columns. 2 rows" Summary not announced
OSX 10.9	Firefox 34			Example 1: Table only "Header cell 1a. header cell 1b. List box" Example 2: Table with summary "Header cell 2a. header cell 2b. Summary 2. List box" Example 3: Table with caption "Caption 3" "Header cell 3a. header cell 3b. Caption 3. List box" Example 4: Table with caption and summary "Summary 4. Group with 3 items"
OSX 10.9	Safari 7			Example 1: Table only "Table. 2 columns. 2 rows" Example 2: Table with summary "Table. 2 columns. 2 rows" Summary not announced Example 3: Table with caption "Table. 2 columns. 2 rows" Caption not announced Example 4: Table with caption and summary "Table. 2 columns. 2 rows" Summary and caption not announced

Bottom of page - Back to home