Home arrow Design Usability arrow Page 7 - 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 Media, Frames and Forms
(Page 7 of 11 )

Under Section 508 standards, any content that is delivered using a plug-in is considered a piece of software. Therefore, media elements such Flash or Shockwave files must be evaluated using the software standards. For more information on the software standards, visit http://www.section508.gov.

In addition, designers might want to provide more information about the media element. As with images, when a media element is inserted, a dialog box


Figure 3-6.  Providing accessibility information on media objects

The title attribute is similar to the alt attribute for images, and it is useful in the design of forms when objects such as radio buttons and form fields need description.

Access key (the accesskey attribute) provides keyboard users with a quick means of moving directly to the element on the page. For example, if the access key for a Flash movie is set to P, users who rely on the keyboard rather than the mouse could press Alt+P to go directly to the Flash movie. It is necessary, however, for the designer to notify the user of the existence of the access key. In a form, underlining a letter in the label generally identifies the access key; however, media elements do not usually have labels associated with them. Consequently, the designer will have to provide this information on the page itself or on a separate page that provides directions for users with disabilities.

Tab index (the tabindex attribute) is a very helpful when working with Flash content. The tab index allows the designer to specify the order in which a user encounters the contents of a page when using Tab to navigate. With Flash content, a problem may arise if the ActiveX architecture traps the cursor inside the Flash movie. If a user presses Tab to enter a Flash navigation bar at the top of a page, it is likely that the user will be unable to access the links on the page. A common way around this problem is to set the Flash element to appear at the end of the tab order. It is important to remember, however, that a tab order must be set for all links, input elements, and objects in this instance.

Adding Frames

There was a time when frames posed a serious challenge to screen readers; however, most screen readers today can handle frames perfectly well. Most of the challenges that people with disabilities encounter with frames are the same as those for people without disabilities. It is difficult to link to individual pages, and the use of the Back button may be problematic.

Ironically, frames can provide a real benefit for accessibility. Most designers use them to segment the page by content. Often the banner appears in one frame, navigation in another, and the content in a third. A screen reader user can easily move from one frame to another, skipping over titles and links to get to the information the user wants.

However, frames are only helpful if titled properly. In Dreamweaver MX 2004, as a designer inserts a frameset, he or she is prompted to provide a title for each frame (see Figure 3-7). The drop-down menu at the top of the dialog box contains a list of all the frames in the frameset. For each of these frames, the designer will need to specify a different name. The names do not have to be long or detailed, but they should be meaningful. Names as simple as banner, nav, and content will suffice.


Figure 3-7.  Specifying titles for each frame in a frameset

Adding Forms

Creating accessible forms is easy with Dreamweaver MX 2004. With the Forms option selected in the Preferences dialog box, designers are prompted to provide a label for each form element along with an access key and the position in the tab order.

Traditionally, labels for form elements are simply placed to the left of the element itself. If the layout is more complex, however, and labels are placed away from the corresponding elements, people using a screen reader can have a very difficult time determining the purpose of each element. When the designer uses the dialog box shown in Figure 3-8 to add the label for an element, Dreamweaver MX 2004 also adds HTML markup that formally associates the text label with the element.

There are two styles available for this label-element association. The first option, Wrap with label tag, is used when the text label is immediately next to the form object. The second, Attach label tag using ‘for’ attribute, is used when the layout is more complex.


Figure 3-8.  Adding accessible form labels   

Let’s take a simple example. We’ll create a form with a single form field for an email address and a Submit button. In this example, the text label is immediately to the left of the form field so the designer would use to first option, Wrap with label tag, to create the form, shown in Figure 3-9.


Figure 3-9.  A simple form example

The code to generate this form is shown as follows. Notice that the

In the next example, the layout is slightly more complex. The text label is placed above the form element using a table, as shown in Figure 3-10. In this case, the method just described won’t work. Instead, the designer should use the for and id attributes to associate the text label with the form field. This is most easily accomplished by choosing the second option, Attach label tag using ‘for’ attribute in the Input Tag Accessibility Attributes dialog box.


Figure 3-10.  A slightly more complex form example

The code used to generate this example is shown as follows. Notice that the

<FORM name=form1 action="" method=post>
  <TABLE width=10 border=0> 
    <TR>
      <TD><LABEL for=textfield>Email</LABEL></TD>
    </TR>
    <TR>
      <TD><INPUT type="text" name="textfield" id="textfield"></TD>
    </TR>
    <TR>
      <TD><INPUT type="submit" value="Submit" name="Submit"></TD>
   </TR>
  </TABLE>
</FORM>

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