Example of Table Headers in Code
Scenario:
A computer user who is blind faces barriers to accessing information from the Internet is several ways:
- The content of a table with complex data is read across the rows by the screen reader, resulting in a confusing and meaningless interpretation.
Solution:
- Provide column and row headers (<th>) for data tables and text summaries and/or descriptions.
EXAMPLE of table and appropriate code:
In order for a data table to be accessible, it must have the proper markup in the HTML.
The summary tag provides a description of the table contents.
<table…. Summary=”description”>
The caption tag provides the title of the table, and should be placed after the opening table tag.
<table… summary=”xx”>
<caption>title of table</caption>
The table head tag provides the names of the column headers of the table, and should be placed after the caption tag.
<table… summary=”xx”>
<caption>title xx</caption>
<THEAD>
<tr>
<th scope="col">Year Passed </th>
<th scope="col">Title </th>
<th scope="col">Summary </th>
</tr>
</THEAD>
The very first step toward creating an accessible data table is to designate row and/or column headers. To change data cells into header cells, the <td> tag is used for table data cells and the <th> tag is used for table header cells.
<table… summary=”xx”>
<caption>title xx</caption>
<THEAD>
<tr>
<th scope=”col”>…</th>
<th scope=”col”>..</th>
<th scope=”col”>..</th>
</tr>
</THEAD>
The scope tag tells the browser and screenreader that everything under the column is related to the header at the top, and everything to the right of the row header is related to that header. The scope tag should be placed inside the table row tag that follows the table head tag.
<table… summary=”xx”>
<caption>title xx</caption>
<THEAD>
<tr>
<th scope=”col”>…</th>
<th scope=”col”>..</th>
<th scope=”col”>..</th>
</tr>
</THEAD>
The table body tag encloses the content of the table and follows the table header tag.
<table… summary=”xx”>
<caption>title xx</caption>
<THEAD>
<tr>
<th scope=”col”>…</th>
<th scope=”col”>..</th>
<th scope=”col”>..</th>
</tr>
</THEAD>
<TBODY>
<tr>
<td>1973 </td>
<td>Section 504, Rehabilitation Act </td>
<td>Provides g uidelines for accessible software design. </td>
</tr>
<tr>
<td>1990<
/td>
<td>Americans With Disabilities Act </td>
<td>Covered entities must furnish appropriate auxiliary aids and services where necessary to ensure effective communication with individuals with disabilities . </td>
</tr>
<tr>
<td>1996 </td>
<td>Telecommunications Act </td>
<td>Telecommunications equipment must be designed, developed, and fabricated to be accessible to and usable by individuals with disabilities . </td>
</tr>
<tr>
<td>1998 </td>
<td>Section 508 (amended) of Rehabilitation Act<br>
§ 1194.22 Web-based intranet and internet information and applications. </td>
<td>Federal agencies' electronic and information technology is accessible to people with disabilities . </td>
</tr>
</TBODY>