Tables tutorial: caption, figure and figcaption elements

[gordongrace]

Reading:
https://www.w3.org/WAI/tutorials/tables/caption-summary/#using-the-figure-element-to-mark-up-a-table-summary

There's a variation on this approach that might be suitable for including things like table 'notes', separate to the table caption or summary, but still part of the broader figure.

Notes might tell users how to interpret information in the table or indicate the source of information in the table. They could contain abbreviations, notes to superscript locators, general notes for the table and external source references.

In the absence of support for a table summary element, this pattern might be able to address accessibility and accuracy concerns.

The figure and figcaption elements might be suitable to supplement the table and caption elements in this example:

<figure aria-describedby="table1-desc">  
  <table id="table1">
  <caption>Table 1: Australian population growth, March 2019</caption>
    
    <thead>
	<tr>
		<th scope="col">Preliminary Data</th>
		<th scope="col">Population<br/>'000</th>
		<th scope="col">Change over previous year<br/>'000</th>
		<th scope="col">Change over previous year<br/>%</th>
	</tr>
    </thead>

    <tbody>
	<tr>
		<td>New South Wales</td>
		<td>8 071.1</td>
		<td>114.1</td>
		<td>1.4</td>
	</tr>
	<tr>
		<td>Victoria</td>
		<td>6 566.2</td>
		<td>133.5</td>
		<td>2.1</td>
	</tr>
	<tr>
		<td>Queensland</td>
		<td>5 076.5</td>
		<td>88.1</td>
		<td>1.8</td>
	</tr>
	<tr>
		<td>South Australia</td>
		<td>1 748.6</td>
		<td>14.8</td>
		<td>0.9</td>
	</tr>
	<tr>
		<td>Western Australia</td>
		<td>2 615.8</td>
		<td>26.0</td>
		<td>1.0</td>
	</tr>

	<tr>
		<td>Tasmania</td>
		<td>533.3</td>
		<td>6.4</td>
		<td>1.2</td>
	</tr>

	<tr>
		<td>Northern Territory</td>
		<td>245.6</td>
		<td>–1.1</td>
		<td>–0.4</td>
	</tr>

	<tr>
		<td>Australian Capital Territory</td>
		<td>425.7</td>
		<td>6.9</td>
		<td>1.7</td>
	</tr>
	
</tbody>
<tfoot>
   <tr>
		<td>Australia<sup><a href="#table1-a">(a)</a></sup></td>
		<td>25 287.4 </td>
		<td>388.8 </td>
		<td>1.6 </td>
	</tr>
</tfoot>
</table>
<figcaption id="table1-desc">
  <ul>
	<li id="#table1-a"><sup>(a)</sup>Includes Other Territories comprising Jervis Bay Territory, Christmas Island, the Cocos (Keeling) Islands and Norfolk Island.</li>
	<li>Source: <a href="https://www.abs.gov.au/ausstats/abs@.nsf/mf/3101.0">3101.0 - Australian Demographics Statistics, Mar 2019 (Australian Bureau of Statistics)</a></li>
  </ul>
</figcaption>
</figure>

I'd suggest that this pattern may be a suitable enhancement of, or a replacement for, "Approach 3: Using the <figure> element to mark up a table summary".

It's possible that the aria-describedby attribute is replicating the native semantics of figcaption - the figure arguably includes:

• The table
• The table's caption
• Explanatory notes associated with the table

[yatil]

Hi @gordongrace – thanks for your contribution. I’ll look into it and see if/how we are going to use it.