What makes this accessible?

  • summary provides brief description to screen reader users
  • scope attribute provides meaning to row and column data
Example of an Accessible Data Table
Student ID First Name Last Name
91234 John Jones
92345 Vicky Brown
93456 Dan Dixon

What the HTML looks like

<table summary="Example of a table that is coded to demonstrate accessibility">
	<caption>Example of an Accessible Data Table</caption>
	<thead>
		<tr>
			<th scope="col">Student ID</th>
			<th scope="col">First Name</th>
			<th scope="col">Last Name</th>
		</tr>
	</thead>
	<tr>
		<th scope="row">91234</th>
		<td>John</td>
		<td>Jones</td>
	</tr>
	<tr>
		<th scope="row">92345</th>
		<td>Vicky</td>
		<td>Brown</td>
	</tr>
	<tr>
		<th scope="row">93456</th>
		<td>Dan</td>
		<td>Dixon</td>
	</tr>
</table>