|
|
|
|
|
|
For the sake of accessibility, it is best to avoid this type of layout because it may lead to confusion for visitors using certain screen readers. Though tables are used to lay out screen elements in Access Art, they are never used to place sections of text side by side, thus avoiding this potential problem.
WAI Guideline 5 addresses the accessibility issues associated with tables, though it does not rule out their use entirely. It instructs Web designers to "ensure that tables have necessary markup to be transformed by accessible browsers." This implies that additional HTML code should be embedded to provide non-visual users with clues about how the table is constructed. Depending on the browser used, visitors may be able to access this additional information and better understand the table's purpose and design.
Tables on Web documents are created using a somewhat complex combination of HTML code, beginning with the "table" tag itself. The opening table tag indicates the beginning of the table, and the closing tag shows the end.
<table> </table>The table tag can include several optional attributes that affect its size and placement on the page. There are also certain attributes that should be added for the sake of accessibility. The first is the "title" attribute that can be used to give the table a brief title that identifies its purpose.
<table title = "Brief table title"> </table>In addition, the "summary" attribute should also be used to describe the layout of the table for the benefit of visitors who cannot see it.
<table title = "Brief table title" summary = "Description of table layout."> </table>The example below shows part of the HTML code for a table layout found in Access Art. Below the HTML code is the table itself as it is displayed on the page.
<table title = "Thumbnail table"
summary = "This table has two columns. The left column shows a
small picture of a work of art. The right column has
a brief text description of the object.">
<tr>
<td>
<img src = "77.jpg" alt = "THE PANTHEON">
</td>
<td>
Giovanni-Antonio Canaletto (1697 - 1768) Italian<br>
THE PANTHEON, ca. 1720
</td>
</tr>
</table>
|
Giovanni-Antonio Canaletto (1697 - 1768) Italian THE PANTHEON, ca. 1720 |
WAI Guideline 5 also stresses the importance of "identifying rows and column information" within tables. This pertains to tables in which certain sections are somehow related to others. For example, many tables have a top row with headers, and the information contained by the columns below falls into the categories indicated by the headers. In this situation, it is necessary to use additional HTML code to explicitly identify headers and the columns that relate to them.
Headers can be identified using the "table header" tag, which is abbreviated "th" and used along with the "id" attribute. The keywords used to name the headers are chosen arbitrarily by the Web designer. (The "tr" tag in the example below is used to create a horizontal table row.)
<table title = "Brief table title"
summary = "Description of table layout.">
<tr>
<th id = "ColumnA">Heading for left column</th>
<th id = "ColumnB">Heading for center column</th>
<th id = "ColumnC">Heading for right column</th>
</tr>
</table>
Once the headers are named, it is necessary to identify the columns that
relate to them. This is done by using the "headers" attribute within
the "td" (or "table data") tag. Columns that correspond to a particular
header are identified with that header's keyword.
<table title = "Brief table title"
summary = "Description of table layout.">
<tr>
<th id = "ColumnA">Heading for left column</th>
<th id = "ColumnB">Heading for center column</th>
<th id = "ColumnC">Heading for right column</th>
</tr>
<tr>
<td headers = "ColumnA">Second level of left column</td>
<td headers = "ColumnB">Second level of center column</td>
<td headers = "ColumnC">Second level of right column</td>
</tr>
<tr>
<td headers = "ColumnA">Third level of left column</td>
<td headers = "ColumnB">Third level of center column</td>
<td headers = "ColumnC">Third level of right column</td>
</tr>
</table>
The example below shows part of the HTML code for a table layout found in Access Art. Below the HTML code is the table itself as it is displayed on the page.
<table title = "Custom Tour search form"
summary = "This table contains an input form that visitors can
use to design their own Custom Tour. The left column
lists the eight search categories; the center column
contains input fields for each category; the right
column contains sample search terms.">
<tr>
<th id = "header1">CATEGORY</th>
<th id = "header2">YOUR PREFERENCE</th>
<th id = "header3">SAMPLE TERMS</th>
</tr>
<tr>
<td headers = "header1">Artist</td>
<td headers = "header2"><input type = "text" title = "Artist"></td>
<td headers = "header3">Claude Monet, Monet, Mon
</td>
</tr>
<tr>
<td headers = "header1">Title</td>
<td headers = "header2"><input type = "text" title = "Title"></td>
<td headers = "header3">Waterlilies, Water
</td>
</tr>
</table>
| CATEGORY | YOUR PREFERENCE | SAMPLE TERMS |
|---|---|---|
|
||
| Claude Monet, Monet, Mon | ||
| Waterlilies, Water | ||