How to make tables in your HTML and/or VXML application usable, readable for blind users

1. Usable Tables
4.2.2008 - Pavel Růžička [MCPD]
Product Development Department

2. Define headers of rows and
columns
 The T H element defines a cell that contains header
information
 Correct using ofT H elements causes, that table can be
easily readed by the rows and by the columns
<thead>
<tr>
<td>&nbsp;</td>
<th>Leden</th>
<th>Únor</th>
<th>Březen</th>
</tr>
</thead>
<tbody>
<tr>
<th>Jablka</th>
<td>100</td>
<td>125</td>
<td>80</td>
</tr>
</tbody>
2
4.2.2008 - Pavel Růžička [MCPD]
Product Development Department

3. Scope of header cell
• use attributte s c o p e with row or col value
• it specifies the set of data cells for which the current header cell
provides header information
<thead>
<tr>
<td>&nbsp;</td>
<th scope="col">Leden</th>
<th scope="col">Únor</th>
<th scope="col">Březen</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Jablka</th>
<td>100</td>
<td>125</td>
<td>80</td>
</tr>
</tbody>
3
4.2.2008 - Pavel Růžička [MCPD]
Product Development Department

4. Summary of table
 Use attribute summary
 This attribute provides a summary of the table's purpose
and structure for user agents rendering to non-visual media
such as speech and Braille.
<table summary="Přehled cen jablek, hrušek a švestek za 1.Q roku">
4
4.2.2008 - Pavel Růžička [MCPD]
Product Development Department

5. a b b r attribute should be used to provide an
abbreviated form of the cell's content
<tr>
<th scope="row" abbr="Množství jablek">Jablka</th>
<td>100</td>
<td>125</td>
<td>80</td>
</tr>
may be rendered by user agents when appropriate in place of the
cell's content
names should be short since user agents may render them
repeatedly
speech synthesizers may render the abbreviated headers relating
to a particular cell before rendering that cell's content.
5
4.2.2008 - Pavel Růžička [MCPD]
Product Development Department

6. Don’t use tables for layout!
 Tables should be used only for structured data – not
for layout!
 Don’t use headers if you do it!
 Use <div> elements and CSS for layout rather using
tables
6
4.2.2008 - Pavel Růžička [MCPD]
Product Development Department

7. Complicated nested tables
• http://www.w3.org/WAI/wcag-curric/sam45-0.htm
7
4.2.2008 - Pavel Růžička [MCPD]
Product Development Department

8. Table in audio applications
8
4.2.2008 - Pavel Růžička [MCPD]
Product Development Department