Accessibility and Dreamweaver MX 2004 - Adding Tables
(Page 8 of 11 )
Creating accessible tables for presenting data is perhaps the most complex issue for designers. Dreamweaver MX 2004 has greatly simplified this process by providing fields for adding all the necessary markup for simple tables with one or two sets of headers.
When inserting a data table within Dreamweaver MX 2004, designers are immediately asked to provide a caption, summary information, and the position of headers in the table. A table caption is used to provide a title for the table. These captions are visible and placed at the top of the table. Summaries should be used to provide a general description of the data in the table. This information is not visible but is easily accessible to screen reader users.
Identifying headers makes it significantly easier for screen readers to navigate tables. This step is tremendously important but often overlooked by designers. When the designer specifies a header using the Table in the figure dialog box (shown in Figure 3-11), Dreamweaver MX 2004 identifies the row or column of headers and adds the scope attribute for that header. The scope attribute associates data in the data cells with the corresponding headers so that a screen reader will read the headers along with the data.
Figure 3-11. Accessible tables in Dreamweaver MX 2004
Figure 3-12 is a relatively simple table with a single row of headers. Under these headers, there is a brief list of individuals.
Figure 3-12. A simple table
In the code used to generate this table, all the cells in the first row use the element. This lets the screen reader know that these cells are headers for the information displayed below them. In addition, each of these elements contains the scope attribute with the value set to col. This lets the screen reader know that the header organizes a column of information, as opposed to a row and that all of the cells below use this header.
<TABLE width=150 summary="This table shows three columns of data displaying last name, city and state.">
<CAPTION>Participants 2003</CAPTION>
<TR>
<TH scope=col>Last Name</TH>
<TH scope=col>City</TH>
<TH scope=col>State</TH>
</TR>
<TR>
<TD>Flynn</TD>
<TD>Raleigh</TD>
<TD>NC</TD>
</TR>
<TR>
<TD>Marsh</TD>
<TD>Madison</TD>
<TD>WI</TD>
</TR>
<TR>
<TD>Gandin</TD>
<TD>Madison</TD>
<TD>WI</TD>
</TR>
<TR>
<TD>Rick</TD>
<TD>Columbus</TD>
<TD>OH</TD>
</TR>
</TABLE>
 This chapter is from ASP Web Development with Macromedia Dreamweaver MX 2004, by Rachel Andrew et al., (Apress, 2004, ISBN: 1590593499). Check it out at your favorite bookstore today.
Buy this book now. |
Next: Accessibility Validation >>
More Design Usability Articles
More By Apress Publishing
/ 10 
