Understanding Federal Accessibility Requirements


In all, 16 different specific guidelines make up Section 508 as they pertain to web-based intranet and Internet information and applications. The guidelines cover everything from commonplace images to timed tests for online learning. The letter designations (a) through (n) are referenced in Dreamweaver validation reports , as discussed later in this chapter. The following table gives a quick overview of all the sections and the HTML elements that are most affected:

Guideline

Area

HTML Elements Affected

1194.22(a)

Non-text elements

<img> tags; alt , longdesc attributes

1194.22(b)

Multimedia presentations

Flash, QuickTime, Real and Windows Media Player movies

1194.22(c)

Color

<img> and <font> tags; color attributes

1194.22(d)

Style sheets

Cascading Style Sheets, code layout

1194.22(e)

Server-side image maps

<map> and <a> tags

1194.22(f)

Client-side image maps

<map> tags

1194.22(g)

TableSimple headers

<table> , <th> , and <td> tags

1194.22(h)

TableComplex headers

<table> , <th> , and <td> tags

1194.22(i)

Frames

<frameset> and <frame> tags; name attribute

1194.22(j)

Screen flicker

<script> tags

1194.22(k)

Text-only page

Page layout

1194.22(l)

Scripted pages

<script> tags, data-driven pages

1194.22(m)

Applets and plug-ins

<embed> , <object> , and <applet> tags

1194.22(n)

Forms

<input> and <label> tags; accesskey attributes

1194.22(o)

Navigation links

<a> and named anchor tags

1194.22(p)

Timed responses

<form> and <input> tags

NOTE

For the full text of these guidelines, visit the "Guide to the Section 508 Standards for Electronic and Information Technology" at http://www.access-board.gov/sec508/guide/index.htm.


Setting Accessibility Preferences in Dreamweaver

So, you've heard about all the new accessibility features that are built into Dreamweaver MX, and you start to work right away. You insert an image and examine the code, but nothing seems different. The alt attribute should have been automatically added, and there's no longdesc attribute in sight. What gives?

The accessibility features in Dreamweaver MX are implemented as an additional optional layer on the existing user interface and must be enabled in Preferences. Choose Edit > Preferences and then select the Accessibility category. In this category, shown in Figure 2.1, select any or all of the five options to display the associated accessibility dialog boxes. Additional accessibility dialog boxes are available for the following:

Figure 2.1. Choose whatever accessibility options you need through Preferences.

graphics/02fig01.gif

  • Form objects Text fields, text areas, radio buttons , and check boxes

  • Frames Framesets, frames, and no-frames content

  • Media Flash movies, Flash buttons, Flash text, Shockwave movies, Applets, QuickTime movies, ActiveX controls, and plug-ins

  • Images JPEGs, GIFs, and PNGs

  • Tables Structured data tables, not tables for layout

In almost all cases, if an option is selected, a secondary dialog box containing the accessibility options appears after the standard Dreamweaver interface. Only the form input objects are somewhat different. Because the input objects do not normally use a dialog boxall parameters are set through the Property Inspectoronly the accessibility dialog box appears.

The Guidelines

The following sections present interpretations of the standards. If you have a legal question regarding compliance, consult with the enforcing agency. This is especially true for countries other than the U.S. where standards are not mandatory but are expected.

Note that the bold text is the same wording as the actual guideline.

1194.22(a): Text Tags

A text equivalent for every non-text element shall be provided (e.g., via "alt", "longdesc", or in element content) .

 (http://www.access-board.gov/sec508/guide/1194.22.htm#(a)) 

Perhaps because images are so prevalent on the web, the text equivalent for every non-text element guideline is one of the more time-consuming but vital ones to follow. When a screen reader or text-only browser encounters a graphic on the page, it merely says "Image" unless the image has one or more recognized attributes to assist the reader. The situation is especially bad when sliced images are used without accessibility attributes; then the reader can be heard to say, "Image. Image. Image." over and over again. It's not a very user-friendly experience, to say the least.

TIP

Many screen readers, when encountering an image that serves as a link, read the alt text in a different voice, making it redundant to specify that the graphic is a link to another page. Rather than entering the alt value as "link to site search page," just use "site search" and your meaning will still be clear.


Three basic techniques can be used to address this problem. The primary tool for making images accessible is the <img> tag's alt attribute. Any text assigned to the alt attribute is substituted by the screen reader for the term "Image."

The text in the alt attribute is best when it is short and to the point informative, but not chatty. The alt value is limited to 256 characters , but in most situations, you'll want to restrict the entry further. To add an alt value to an existing image on the page, select the image and enter the text into the Alt field of the Property inspector.

For images that require a more in-depth description, you can use two alternatives jointly or separately. First, another attribute to the <img> tag longdesc , which stands for long descriptionis readable by most of the newer screen readers. The longdesc attribute is a link to another HTML page that contains nothing more than the text description. The screen reader opensand readsthe longdesc page, but standard browsers ignore the attribute. Here's an example of the code for an <img> tag with both longdesc and alt attributes:

 <img src="/images/clarke.jpg" alt="Arthur C. Clarke on the set of  2001:A Space Odyssey" longdesc="/images/clarke.htm"> 

NOTE

The accessibility options for images appear after you insert a graphic through the Image object, through the Insert Image menu option, or when using the Assets panel. The additional dialog box does not appear if you drag a graphics file onto your page from the Files panel or from the desktop.


You can enter both alt and longdesc attributes when a graphic is inserted and the Image accessibility option has been selected. After the user chooses a graphic from the standard Select File dialog box, the Image Tag Accessibility Attributes dialog box appears (see Figure 2.2). For the alt attribute, enter the desired text in the Alternative Text field. To use the longdesc attribute, select the folder icon to locate a file or data source or enter the path directly into the Long Description field.

Figure 2.2. Use the alt and longdesc attributes together to provide two levels of information.

graphics/02fig02.gif

Although the longdesc attribute solves many problems for the present technology, it is not supported by many older screen readers that are still in operation. There is, however, a recognized convention that can supplement the attribute that places an uppercase D to the right of the image and links the letter directly to the longdesc HTML file, as shown in Figure 2.3. You must enter this techniquereferred to as the D or Descriptive link manually in Dreamweaver.

Figure 2.3. The D link is intended to add longdesc functionality to older screen readers.

graphics/02fig03.gif

Automating LongDesc Conversions

If you are tasked with adding D links to pages where longdesc attributes are already in place, you can use Dreamweaver's Find and Replace feature to automate the process. Here are the steps for doing that:

  1. Choose Edit > Find and Replace.

  2. Select the Use Regular Expressions option.

  3. In the Find and Replace dialog box, set the desired scope of the operation by selecting an option from the Find In list.

  4. Set the Search For list to Specific Tag and enter (or choose) img in the Tag field.

  5. Set a single set of conditions to the following:

     With Attribute longdesc = (.*) 

    With this regular expression, you're looking for any <img> tag with a longdesc attribute and value. The parentheses in the regular expression also serve to group and remember the longdesc value.

  6. Set the Add Action to this:

     Add After <a href="">D</a> 

    The $1 code is a regular expression that inserts the remembered longdesc value.

  7. Choose Replace or Replace All to effect the operation.

As with all Find and Replace proceduresespecially those that involve regular expressionsit's best to run a number of test cases when modifying an entire site and to always keep a backup available.

NOTE

Because this is a somewhat complex Find and Replace operation, you might want to save the query. Unfortunately, Dreamweaver MX has a bug that prevents the Add Action portion of a query from being loaded. You'll need to enter the <a href="$1">D</a> code each time you run the query.


One particular type of graphicused in sliced images deserves special mention. Called a spacer or shim , these transparent GIF images keep the table of images from breaking apart. When a screen reader encounters these spacers, it notes that they are images unless an empty alt attribute is included. In Dreamweaver, you have two ways to enter an empty alt attribute:

  • In code view, enter alt="" into the <img> tag.

  • In Design view, select the image and in the Alt field, choose <empty> from the drop-down list.

1194.22(b): Multimedia Presentations

Equivalent alternatives for any multimedia presentation shall be synchronized with the presentation.

http://www.access-board.gov/sec508/guide/1194.22.htm#(b)

The multimedia alternatives guideline basically mandates that any multimedia presentationsuch as a Flash or QuickTime moviemust provide some method of conveying the information for the impaired. This method could be internal to the movie, such as a closed captioning option that displays subtitles . It's also possible to embed content in an external layer on the page. However, unless the content is extremely limited, it is probably more difficult to synchronize the multimedia presentation and the external content than to provide a solution within the multimedia presentation.

To add an external layer that is visible only to screen readers, put the layer on top of the multimedia movie. All active content, including Flash and other movies that use plug-ins or ActiveX controls, rise to the top of a page. With a layer drawn out on top of the movie, the content layer is hidden from regular view but is accessible by the screen reader. Placement of the layer's <div> tag is key to working properly with the assistive technology; it's best to put the <div> tag just before the <object> tag that holds the Flash or other movie.

TIP

If you're trying to synchronize a Flash movie with HTML content, use Flash's LoadVars object, as described in Chapter 8, "Making Flash Connections."


The latest version of the Macromedia Flash Player has made great strides in accessibility with its built-in support for the Microsoft Active Accessibility (MSAA) protocol. MSAA serves as a bridge to communicate between the Flash Player and screen readers, such as GW Micro's Window-Eyes and other assistive technologies.

1194.22(c): Color

Web pages shall be designed so that all information conveyed with color is also available without color, for example from context or markup.

http://www.access-board.gov/sec508/guide/1194.22.htm#(c)

To comply with 1194.22(c), you must make sure that your designs do not rely on color alone to impart information. In an extreme example, let's say your client wanted to highlight the company color (red) and sponsored a contest in which a user who selected the bouncing red ball from amidst a bunch of bouncing green balls would be eligible for a prize. Without another way to designate the red ballsuch as an alt attributeyour site would not pass Section 508 regulations.

Color blindnessthe inability to distinguish between certain colorsis more widespread than generally believed. About 7% of menapproximately 10 million in the U.S.suffer from the most common form of color blindness and have difficulty telling red from green. [*] Additionally, saturation of color can be a problem. Text or graphics in two different colors with the same saturation can be seen as a single mass by the color blind. However, this guideline is intended to assist more than just those who experience color blindness; anyone who has a visual impairment or who is restricted to using a text-only browser benefits from the color guideline.

[*] Source: http://www.hhmi.org/senses/b130.html

1194.22(d): Readability

Documents shall be organized so they are readable without requiring an associated style sheet.

http://www.access-board.gov/sec508/guide/1194.22.htm#(d)

This guideline governing style sheets has become important with the increasing use of CSS for layout purposes. Basically, this guideline requires backward compatibility with non-CSS capable browsers considered by many to be a best practice in web design. One key problem lies with the absolute positioning ability of <div> tags: layers and poor planning. With a CSS-proficient browser, it is possible to insert the layers anywhere on the page and have the content render properly. Here's a simple example with three areas of content: headline, mainbody, and footer:

 <style type="text/css">  #footer {         position:absolute;         left:76px;         top:382px;         width:556px;         height:51px;         font-family: Verdana, Arial, Helvetica, sans-serif;         font-size: 10px;  }  #headline {         position:absolute;         left:76px;         top:23px;         width:556px;         height:67px;         font-family: Verdana, Arial, Helvetica, sans-serif;         font-size: 24px;  }  #mainbody {         position:absolute;         left:76px;         top:101px;         width:556px;         height:272px;         font-family: Verdana, Arial, Helvetica, sans-serif;         font-size: 12px;}  </style>  <div id="footer">Next issue: Warts!</div>  <div id="headline">In this issue: Fungus!</div>  <div id="mainbody">Ever wonder where fungus comes from?...</div> 

When this page is viewed in a CSS-enabled browser, it renders as the designer intended, as shown in Figure 2.4.

Figure 2.4. Absolute CSS positioning lays a trap for the unsuspecting designer.

graphics/02fig04.gif

However, the same page, viewed without CSS capability, reads like this:

 Next Issue: Warts!  In this issue: Fungus!  Ever wonder where fungus comes from?... 

In addition to placing the code in the same order as it is intended to be read (a process called linearization ), you need to be sure that the page is still legible if the CSS style sheet is not executed. Pages most often become unreadable under these circumstances when the page contains a combination of both CSS styles and presentation markup in HTML.

Let's say, for example, that a legacy page containing mostly HTML presentation markupwhere the <body> tag specifies a black background and white texthas been upgraded to CSS. Unfortunately, when the designer inserted the CSS code specifying the same color combination (white text on a black background), the bgcolor ="black" attribute was left in the <body> tag. Should the CSS be unable to load, the user would see the default text color (black) on a black background. If the page's presentation had been completely separated from its content in a CSS, the browser's default settings would have taken over and the page would be legible.

1194.22(e): Server-Side Image Maps

Redundant text links shall be provided for each active region of a serverside image map.

http://www.access-board.gov/sec508/guide/1194.22.htm#(e)

Two guidelines pertain to image maps: one for server-side maps and one for client-side maps. The first image map guideline, although geared specifically toward the server-side variety, is also a good idea when you're working with client-side image maps. Essentially, the guideline requests that for every linking region of a server-side image map, there must be a corresponding text link. If, for example, your page uses a server-side image map of the five New York boroughs, the page should also contain five text links connecting to the same files.

By default, Dreamweaver creates client-side image maps, so this guideline really only applies to legacy pages. In truth, server-side image maps are not used much any more, partially because of their lack of browser support but mostly because client-side image maps are far easier to create and maintain.

1194.22(f): Client-Side Image Maps

Client-side image maps shall be provided instead of server-side image maps except where the regions cannot be defined with an available geometric shape.

http://www.access-board.gov/sec508/guide/1194.22.htm#(f)

The W3C, in their Web Content Accessibility Guidelines, Priority 1 checkpointswhich formed the basis for the Section 508 guidelinesthrow their considerable weight behind client-side image maps. The instances where a hotspot cannot be defined with any of the available client-side shapes (rectangle, oval, and polygon) are few and far between.

When you're working with image maps, keep in mind that a hotspot falls into the category of a non-text element as covered under 1194.22(a). In short, the alt attribute must be completed for image map regions just as for standard graphics. Typically, alt is defined for both the basic image and the hotspots drawn on top of the image.

1194.22(g): Data Tables (Simple Tables)

Row and column headers shall be identified for data tables.

http://www.access-board.gov/sec508/guide/1194.22.htm#(g)

Although tables have long been subverted into performing layout chores, they really are intended to hold structured data. Structured data almost always has series of cells that act as the headings for the table. The headings can be in a row, in a column, or both. Standard data in a table cell is placed in a <td> tag. If a cell is designated to be a header cell, a <th> tag is used. Browsers generally render the unstyled <td> tag as bold and centered.

For existing tables, convert a <td> cell to a <th> by selecting that cell and then choosing the Header option in the Property inspector; the same technique can be applied to an entire row or column. For new tableswith the proper accessibility preference selectedDreamweaver sets the header cells at creation time. After the standard table dialog box is completed, the Accessibility Options for Tables dialog box appears (see Figure 2.5). Choose the desired option from the Header drop-down list: Row, Column, or Both.

Figure 2.5. The Accessibility Options for Tables dialog box permits you to choose whether the headers are in the first row, the first column, or both.

graphics/02fig05.gif

The Accessibility Options for Tables dialog box contains other options as well, including Caption and Summary, which are helpful but not required under Section 508. (Summaries for tables are a Priority 3 checkpoint.) I find captions to be useful in tables, although not all browsers support the <caption> tag.

This guidelinelike all legal regulationsis open to interpretation. Dreamweaver takes a somewhat relaxed view and depends exclusively on the row and column headers that are being identified by <th> tags. Other experts in the field are more rigid and believe additional markup is necessary. The goal of the added attributes is to associate each table cell explicitly with a specific header. A standard that renders like this:

Sales Region

Representative

YTD Sales

Northeast

Franklin Simons

$2,234,000

Southwest

Alicia Norway

$2,560,000

is coded like this in Dreamweaver:

 <table width="75%" border="1">      <tr>        <th>Sales Region</th>        <th>Representative</th>        <th>YTD Sales</th>      </tr>      <tr>        <td>Northeast</td>        <td>Franklin Simons</td>        <td>,234,000</td>      </tr>      <tr>        <td>Southwest</td>        <td>Alicia Norway </td>        <td>,560,000</td>      </tr>    </table> 

To specify the relationship between headers and individual cells, use id attributes in the <th> cells and headers attributes in the <td> cells, like this:

graphics/02icon01.gif

Such cell-by-cell designations are helpful for those users who require assistive technologies.

1194.22(h): Data Tables (Complex Tables)

Markup shall be used to associate data cells and header cells for data tables that have two or more logical levels of row or column headers.

http://www.access-board.gov/sec508/guide/1194.22.htm#(g)

Complex tables take the markup concepts covered in the previous section a step further. Consider the following table.

 

Northeast

Southeast

West

Totals

2001

 

In-Store Sales

$3.50M

$4.20M

$6.00M

$13.70M

Online Sales

$2.20M

$3.10M

$3.90M

$9.20M

Subtotal

$5.70M

$7.30M

$9.90M

$22.90M

2002

 

In-Store Sales

$4.50M

$3.20M

$4.00M

$11.70M

Online Sales

$3.20M

$2.10M

$4.90M

$10.20M

Subtotal

$7.70M

$5.30M

$8.90M

$21.90M

Totals

$13.40M

$12.60M

$18.80M

$44.80M

Without additional guidance, a screen reader that encounters this table would read many of the cells in one long indecipherable string. Not only must headers and header- related cells be identified, but so must the category or axis. The example table contains four different axes: regions , sale_types , years , and totals . The header cells take an additional attribute to assign the particular axis. Here is how the top row of regions is coded:

 <tr>    <td>&nbsp;</td>    <th id="Northeast" axis="regions">Northeast</th>    <th id="Southeast" axis="regions">Southeast</th>    <th id="West" axis="regions">West</th>    <th id="Subtotals" axis="regions">Totals</th>  </tr> 

After an axis is identified, the headers attribute for a particular <td> cell incorporates all the axes that are relevant to that cell, like this:

 <td headers="2001 Northeast in-store">.50M</td> 

Axes should be included in a readable fashion. For example, the cell that holds the grand total for the two years of sales is written like this:

 <td headers="2001 2002 Totals">.80M</td> 

Here's the code for the entire table:

 <table width="514" border="1">    <tr>      <td>&nbsp;</td>      <th id="Northeast" axis="regions">Northeast</th>      <th id="Southeast" axis="regions">Southeast</th>      <th id="West" axis="regions">West</th>      <th id="Subtotals" axis="regions">Totals</th>    </tr>    <tr>      <th id="2001" axis="year">2001</th>      <td>&nbsp;</td>      <td>&nbsp;</td>      <td>&nbsp;</td>      <td>&nbsp;</td>    </tr>    <tr>      <th id="in-store" axis="sales_types">In Store Sales</th>      <td headers="2001 Northeast in-store">.50M</td>      <td headers="2001 Southeast in-store">.20M</td>      <td headers="2001 West in-store">.00M</td>      <td headers="2001 Subtotals in-store">.70M</td>    </tr>    <tr>      <th id="online" axis="sales_types">Online Sales</th>      <td headers="2001 Northeast online">.20M</td>      <td headers="2001 Southeast online">.10M</td>      <td headers="2001 West online">.90M</td>      <td headers="2001 Subtotals online">.20M</td>    </tr>    <tr>       <th>Subtotal</th>      <td headers="2001 Northeast">.70M</td>      <td headers="2001 Southeast">.30M</td>      <td headers="2001 West">.90M</td>      <td headers="2001 Subtotals">.90M</td>    </tr>    <tr>      <th id="2002" axis="year">2002</th>      <td>&nbsp;</td>      <td>&nbsp;</td>      <td>&nbsp;</td>      <td>&nbsp;</td>    </tr>     <tr>      <th id="in-store" axis="sales_types">In Store Sales</th>      <td headers="2002 Northeast in-store">.50M</td>      <td headers="2002 Southeast in-store">.20M</td>      <td headers="2002 West in-store">.00M</td>      <td headers="2002 Subtotals in-store">.70M</td>    </tr>    <tr>      <th id="online" axis="sales_types">Online Sales</th>      <td headers="2002 Northeast online">.20M</td>      <td headers="2002 Southeast online">.10M</td>      <td headers="2002 West online">.90M</td>      <td headers="2002 Subtotals online">.20M</td>    </tr>    <tr>      <th>Subtotal</th>      <td headers="2002 Northeast">.70M</td>      <td headers="2002 Southeast">.30M</td>      <td headers="2002 West">.90M</td>      <td headers="2002 Subtotals">.90M</td>    </tr>    <tr>      <th id="totals" axis="totals">Totals</th>      <td headers="2001 2002 Northeast totals">.40M</td>      <td headers="2001 2002 Southeast totals">.60M</td>      <td headers="2001 2002 West totals">.80M</td>      <td headers="2001 2002 Totals">.80M</td>    </tr>  </table> 

As you can see, a great deal of detailed work goes into a table like this. At this point, all of the additional headers , id and axis attributes must be coded by hand.

1194.22(i): Frames

Frames shall be titled with text that facilitates frame identification and navigation.

http://www.access-board.gov/sec508/guide/1194.22.htm#(i)

This guideline reflects good coding standards and, to me, common sense: Give your frames meaningful titles. But why are frame titles important from an accessibility viewpoint? Although the standard browser does not give an indication of the names, text-only browsers, upon encountering a frameset, display a list of frame names if no title attribute is found. Would you find it easier to choose from a list that contains these items:

 lframe  bframe  mframe 

Or these items:

 banner  menu  content 

As the guideline suggests, the best course is to give the frames meaningful, functional titles. To add a title or change the title of an existing frameset in Dreamweaver, you need to alter the code of the frameset. The original frameset looks something like this:

 <frameset cols="*,80" frameborder="NO" border="0" frame spacing="0">    <frame src="mainstory.htm" name="mainFrame">    <frame src="nav.htm" name="rightFrame" scrolling="NO" noresize>  </frameset> 

The title attribute is added to each of the <frame> tags:

graphics/02icon02.gif

New framesets can give a proper title to each frame at creation, if you have the Frames Accessibility option enabled. When a Frame object is inserted, either from the Insert bar or from the Insert, Frames menu, Dreamweaver displays the Frame Tag Accessibility Attributes dialog box, shown in Figure 2.6. To title the frames, choose the frame name from the drop-down list and enter the desired title in the bottom frames.

Figure 2.6. Cycle through the frames in the frameset by choosing the items listed in the Frame list.

graphics/02fig06.gif

NOTE

The Frame Tag Accessibility Attributes dialog box does not appear if you build your frameset by Alt-dragging (Option-dragging on the Mac) the frame border.


1194.22(j): Flicker Rate

Pages shall be designed to avoid causing the screen to flicker with a frequency greater than 2 Hz and lower than 55 Hz.

http://www.access-board.gov/sec508/guide/1194.22.htm#(j)

If you've ever opened a page with an attention- grabbing , quickly flickering graphic or area, you know they can be tremendously annoyingbut did you also know they can be dangerous? People who suffer from a disease called photosensitive epilepsy are prone to seizures when they encounter these rapidly blinking, strobe-like effects.

To my mind, these types of effects should never be used; you're not much of a designer if you have to rely on them to get attention. However, if the client or boss insists on the flickering effect, to comply with this guideline, you need to warn visitors that selecting a particular link triggers a screen flicker and give them an alternative effect-less route to the same page.

1194.22(k): Text-Only Alternative

A text-only page, with equivalent information or functionality, shall be provided to make a web site comply with the provisions of this part, when compliance cannot be accomplished in any other way. The content of the text-only page shall be updated whenever the primary page changes.

http://www.access-board.gov/sec508/guide/1194.22.htm#(k)

I've termed this the "worst-case scenario" guideline. When all else fails, if the content in your page cannot be conveyed to screen readers and other assistive technologies, you need to create a parallel text-only page. Naturally, a link from the main page to the text-only page should be available. Although creating a text-only page is not too great a taskindeed, at first glance, many developers might see this as the easiest road to travelmaintaining that page is an ongoing chore.

Should you need to create text-only pages, I strongly suggest that you use server-side technology to do so. To change this worst-case scenario into the best of both worlds , the original page and its text-only equivalent should be constructed from the same data source. Using this technique, when the content is changed for one, it automatically is updated for the otherand the maintenance chore disappears.

1194.22(l): Scripts

When pages utilize scripting languages to display content, or to create interface elements, the information provided by the script shall be identified with functional text that can be read by assistive technology.

http://www.access-board.gov/sec508/guide/1194.22.htm#(l)

JavaScript programming has added a great deal of interactivity to the web. Unfortunately, many developers use JavaScript effects exclusively without providing a non-JavaScript alternative. For example, a rollover button that exposes a secondary menu is quite common; both Dreamweaver MX and Fireworks MX include such pop-up menu functionality. When a screen reader comes across such a navigation element, it has no way of seeing the secondary menus . A similar problem occurs when the JavaScript function document.write() is used. The document.write() function allows coders to construct a portion of their page on the fly; for example, a script detects the time of day and displays different content depending on whether it is morning, afternoon, or evening. If the content is significantnot just "Good Morning"the scripting languages guideline requires an alternative method of providing the content.

Aside from a text-only page link, one highly recommended alternative is server-side scripting. Unlike JavaScript, which is client-side scripting, server-side scripting preprocesses the pagedetecting the time, as in the previous example, and inserting the desired contentbefore delivering the HTML-only page to the browser.

1194.22(m): Applets and Plug-Ins

When a web page requires that an applet, plug-in, or other application be present on the client system to interpret page content, the page must provide a link to a plug-in or applet that complies with 1194.22(a) through (l).

http://www.access-board.gov/sec508/guide/1194.22.htm#(m)

Here, again, is a solid coding practice established as a legal regulation. If key content is contained in a Flash movie, plug-in, applet, or ActiveX control, make sure that users can get the required application if they don't already have it. Most multimedia applications that use the <object> or <embed> tag, such as Flash movies, have attributes that are designed to contain a link to a player. To play it safe, many developers provide another link, often using a logo provided by the application developer for that very purpose.

1194.22(n): Electronic Forms

When electronic forms are designed to be completed on-line, the form shall allow people using assistive technology to access the information, field elements, and functionality required for completion and submission of the form, including all directions and cues.

http://www.access-board.gov/sec508/guide/1194.22.htm#(n)

Online forms are difficult enough for people who don't have disabilities , and they present special challenges to those who are using assistive devices. Three accessibility elements can be used with forms:

  • Labels Specifically associates a text label with a particular form element, such as a check box or radio button.

  • Access Key Sets a keystroke that, when used in combination with the Alt key, focuses on the associated form element.

  • Tab Order Presets the sequence in which the form elements are tabbed through, regardless of their position on the page.

You can add all three elements through the Input Tag Accessibility Attributes dialog box, show in Figure 2.7. This dialog box appears when any input form elementtext field, text area, list/menu, option button, check box, image field, file field, or buttonis inserted, assuming that the Form Objects accessibility option has been selected in Preferences.

Figure 2.7. The Input Tag Accessibility Attributes dialog box contains options for labels, access keys, and tab order for almost all form elements.

graphics/02fig07.gif

Labels play a key role in making forms accessible. With standard form layouts, it is not always easy to tell which text description belongs to which form element. Labels solve that problem in one of two ways: implicitly or explicitly. The implicit method simply wraps the associated form element with the <label> tag:

 <label>First Name:     <input type="text" name="firstnameText">  </label> 

This example places the label to the left of the text field. You can easily place it to the right by moving the actual text after the <input> tag:

 <label>     <input type="text" name="firstnameText">First Name  </label> 

The second, explicit method of using the <label> tag is coded like this:

 <label for="firstnameText">First Name:</label>  <input type="text" name="firstnameText"> 

As with the previous method, the label can appear after the text field. With the explicit method, the entire <label> tag pair is moved. In fact, that's the key advantage for the explicit over the implicit technique. I prefer to use tables to align almost all of my forms, with the labels in one column and the form elements in another; such a layout technique is only possible with the explicit method. For example:

 <tr>    <td><label for="firstnameText">First Name:</label></td>    <td><input type="text" name="firstnameText"></td>  </tr>  <tr>    <td><label for="lastnameText">Last Name:</label></td>    <td><input type="text" name="lastnameText"></td>  </tr> 

TIP

In addition to labels making it easier for assistive technologies to identify form elements, they also provide a larger selectable region. In supporting browsers, such as Internet Explorer 5 and later, you can click on either the label or the form element to select it, just as you can with most non-web applications. Anyone who has spent a little too much time trying to select the right option button will certainly appreciate this feature.


The Dreamweaver accessibility dialog box for input objects also provides an easy method for setting keyboard shortcuts for form elements. The accesskey attribute allows the designer to assign a keystroke which, when combined with the Alt or Cmd key, brings focus to the associated form element. If, for example, you were to assign the "c" key to a credit card text field like this:

 <input type="text" name="creditcardText" accesskey="a"> 

then when the PC user selects Alt+C (or the Mac user selects Cmd+C), the cursor would jump to the Address text field. All form elements on the page should be given a unique accesskey value to avoid conflict.

TIP

Although it's probably best not to assign any of the letters used by the browser menus, such as F for File or E for Edit, you can do this if you need to. The accesskey attribute is given priority over the menu key.


The typical non-mouse method for navigating a form is to tab through the various input fields. Browsers interpret tab order according to the placement of the form elements, left-to-right , top-to-bottom. Although this is acceptable in many situations, it's certainly not applicable for all forms. To control the tabbing sequence, use the tabindex attribute. The tabindex attribute is a number between 0 and 32,767; the tabbing order follows the numbers from lowest to highest. For example, to explicitly set the tabbing order for three text fields, the code would look like this:

 <tr>     <td>City:<input type="text" name="cityText" tabindex="1"></td>     <td>State:<input type="text" name="stateText"     tabindex="2"></td>     <td>Zip:<input type="text" name="zipText" tabindex="3"></td>  </tr> 

The tabindex values need only be positive integers. You can start with any value, and the numbers don't have to be sequential; for three elements in a row, you could just as well set their tabindex values to 143, 436, and 999.

NOTE

If you intend to use the tabindex attribute, be sure to assign tabindex values to all form elements on a given page; failure to do so will result in an unexpected and undesired tabbing order.


1194.22(o): Navigation Links

A method shall be provided that permits users to skip repetitive navigation links.

http://www.access-board.gov/sec508/guide/1194.22.htm#(o)

When you're browsing a site, your eye tends to focus on the content and skips over the navigation elements on each page. Screen readers don't have that luxury. Every time a page loads, if a navigation bar is located on the top, that's the first thing the screen reader starts to announce. Anyone who is using such a screen reader must listen to the link selections each time before he arrives at some content. If you can understand how tedious and annoying this behavior would be, you can understand the reason behind the repetitive navigation links guideline.

To skip navigation links, use a link to a named anchor at the top of the page where the named anchor is placed right before the content starts. The link to a named anchor can either be visible, like this:

 <a href="#content">Skip Navigation</a> 

or you can use a transparent GIF. If the link is at the top of the page, the screen reader encounters it first and gives the user the option to jump past the navigation elements.

1194.22(p): Time Delays

When a timed response is required, the user shall be alerted and given sufficient time to indicate more time is required.

http://www.access-board.gov/sec508/guide/1194.22.htm#(p)

The thrust of the final guideline is to make sure that users who have cognitive disabilities are given the opportunity to complete any online testing for which a response within a certain time limit is needed. This guideline has two separate parts :

  • The web page must clearly state that the question is to be answered in a specific amount of time.

  • Users should also have a way to reset the timer if they require additional time to complete the question.



Joseph Lowery's Beyond Dreamweaver
Joseph Lowerys Beyond Dreamweaver
ISBN: B000H2MWYS
EAN: N/A
Year: 2001
Pages: 87
Authors: Joseph Lowery

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net