Home arrow Design Usability arrow Page 8 - Accessibility and Dreamweaver MX 2004
DESIGN USABILITY

Accessibility and Dreamweaver MX 2004


An accessible website is compatible with the assistive technologies used by people with disabilities. Dreamweaver MX 2004 automates many elements of creating accessible sites and prompts designers to provide information when necessary. It has also been modified to provide better keyboard access and to work with screen readers. (From the book ASP Web Development with Macromedia Dreamweaver MX 2004 by Rachel Andrew et al., Apress, 2004, ISBN: 1590593499.)

Author Info:
By: Apress Publishing
Rating: 4 stars4 stars4 stars4 stars4 stars / 14
September 29, 2004
TABLE OF CONTENTS:
  1. · Accessibility and Dreamweaver MX 2004
  2. · Accessibility Overview
  3. · Defining Disabilities
  4. · Assistive Technologies
  5. · Accessibility Standards
  6. · Accessibility in Dreamweaver MX 2004
  7. · Adding Media, Frames and Forms
  8. · Adding Tables
  9. · Accessibility Validation
  10. · Cascading Stylesheets
  11. · Accessible Authoring Environment

print this article
SEARCH DEVARTICLES

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.


blog comments powered by Disqus
DESIGN USABILITY ARTICLES

- Responsive Web Design: More Than Just a Buzz...
- Add New Website Features to Please Users
- Gzip Components in Action
- Configuring Gzip Components
- Gzip Components
- Create Great JavaScript and CSS Menus Simply
- Design Principles that Shape a Web Site
- Creating Aqua Style Images
- Easy as A,B,C dynamic A to Z indexes
- EasyChart: a Usability Teaching Tool to Demo...
- Building Friendly Pop-up Windows
- Back to School: Design Usability
- Using HTML_QuickForm To Manage Web Forms, Pa...
- Using HTML_QuickForm To Manage Web Forms, Pa...
- More Website Knick Knack

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials