Understanding Accessibility

Guideline 5. Create tables that transform gracefully.

Checkpoint 5.1 - For data tables, identify row and column headers

Data tables need to be correctly marked up with headers so that blind individuals can conceptualise the structure of the table. Data tables are those tables where there is a relationship between the cell content and its positioning within the table.

How do I do it?

Use <TH> tags to denote header cells rather than <TD> and <strong> tags combined, which give the same visual effect but have different meanings. <TH> around text means that this text is a table header. <TD> and <strong> tags around a piece of text means that the information is probably important, but it is not necessarily a header.

<TABLE border="1">
<TR>
<TH>Module Name</TH>
<TH>Software</TH>
<TH>Hours per week</TH>
<TH>Tutor</TH>
</TR>
<TR>

<TD>Multimedia Principles</TD>
<TD>Macromedia Director</TD>
<TD>2</TD>
<TD>Vivienne Trulock</TD>
</TR>
<TR>

<TD>Professional Team Brief</TD>
<TD>Various</TD>
<TD>4</TD>
<TD>To be decided</TD>
</TR>
</TABLE>

How do I check that it meets the WCAG criteria?

Pages should be checked visually for data tables. Where no data tables exist, the page will be deemed to have passed, as headers are not required for layout tables. Where there are data tables, the source code should be inspected for use of the following tags: <TH> for header information and <TD> for table data. Where these tags are present and used correctly the page will pass the check. Where the tags are not present or used incorrectly, the page will fail the check.

guideline 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9 - 10 - 11 - 12 - 13 - 14