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
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.
/ 11 
