ColdFusion and Section 508

 

Will your website be government ok for disabled access?

 

There is a new Federal law known as “Section 508.” That requires disabled accessibility on government websites. We will show you what you have to do to be compliant, show how ColdFusion can help (and hinder) and explain why 508 is not a bad thing after all.

 

As many programmers for the Federal Government already know, there are new standards for Web page accessibility. Currently these standards are mandatory for all Federally sponsored sites, but who knows when the law might be extended to all sites, as ADA (Americans with Disabilities Act) was. We suggest you check out disabled accessible and get the benefits of better web design now. Dealing with accessibility gets you thinking “out of the box.” Can your page function without a mouse? Plus you will get benefits for targeting your site to cell phone browsers too, as similar issues apply.

 

Section 508 basics

 

Section 508 ensures that the disabled can get access to the same public information as to others. On the last census there were 54 million Americans with some disability, including 10 million blind and visually impaired.  People with disabilities use tools such as screen and Braille readers. Think of their tools as  “alternative browsers.” Just like the issues between IE and Netscape, other browsers need consideration when you code.

 

 508 is hot - both Macromedia and Microsoft have web pages listing their 508 compliance initiatives, and Macromedia has released an extension to Dreamweaver with accessibility tools. Designing for maximum access to web content is spreading to education, local governments, and corporations.

 

Imagine

Imagine you cannot see and you have a friend read you the HTML source for a page over the phone so you can understand the site. That is what viewing a site with a screen reader is like. Imagine minutes of hearing header HTML code for navigation – with cryptic image file names and no English description. Imagine complex table layouts with no clue as to what each number means. Imagine applets that you don’t know any thing about because there is no HTML source for them.

 

Welcome to the world of the blind web user. Section 508 suggests how you can make their life easier when reading your webpages.

 

The regulations

Some of the requirements are listed in Table 1 (For a full review, visit http://www.access-board.gov/sec508/guide/1194.22.htm)

ColdFusion presents solutions to help you comply, and also has some problems for you to overcome.

 

 

 

TABLE 1 some 508 rules

Rule	Suggestions
A) A text equivalent must be supplied for every image.	ALL images except shims need an ALT tag describing the picture.
B) Alternatives for multimedia presentations must be synchronized with the presentation.	Provide a link to a text version, synchronizing captions with audio.
C) All information conveyed with color (e.g., red for a negative number) must be provided in an alternative form. (Color blindness).	Design web pages so that all information conveyed with color is also available without color, for example use a minus sign for negative numbers.
D) Documents must be readable without an associated style sheet.	If Style sheet removed, content must still be readable. Using external style sheets is safest.
E) Redundant text links must be provided for each active region of a server-side image map.	Use redundant links because readers can't see URLs on server-side image maps.
F) Client-side image maps should be provided instead of server-side image maps.	Client is better than server, as readers can see the URLs before clicking. Use the ALT tag on the areas.
G, H) Data tables must associated row and column headers with the data contained in them	SEE LISTING 2 and visit  http://www.w3.org/TR/WCAG10-HTML-TECHS/
I) Give frames readable names	Identify frames with plain English name when used, but it's best to avoid their use.
J) Avoid causing screen flicker.	Don’t loop your animation or use the <BLINK> tag.
K) If there's no way to comply with 508 standards, provide a text-only page, and update it whenever the primary page changes.	Provide text-only duplicate pages for any content that can’t be fixed. This is easy if the text is in a database and you use ColdFusion.
L) Any information provided by scripting languages must also be supplied in text readable with assistive technology.	Avoid pop-up windows and JavaScript alerts. When using JavaScript for DHTML, use the <NOSCRIPT> tag just after a closing </SCRIPT> to provide a text description of the action.
M) If an applet, plug-in, or other application must be present on the client, provide a link to a compliant plug-in or applet. See Technical Standards 1194.21(a) through (l)  for compliance when using plug-ins or applets.	Don’t use applets and plug-ins that are not complainant Check plug-ins web sites for accessibility information.  The new PDF and Flash players will be complient.
N) Online forms must allow assistive technology to access elements required for completion and submission.	Provide hotkey access to form elements and make a TABINDEX order for the form fields. Make form field name and required fields indicators text readable.
O) Users must be able to skip repetitive navigation links.	Place a “jump to content” link just after the <BODY> tag that jumps to an anchor placed at the beginning of the page’s content.
P) When a timed response is required, the user must be alerted and given enough time to indicate that more time is required.	Roll your own session-timeout code to allow longer timeout than the CF admin default for disabled users.

 

For the complete text of the regulations, visit www.access-board.gov/sec508/guide/1194.22.htm.

 

 

Help from ColdFusion

Where can CF assist you? Let’s look at an example, using paragraph a: “A text equivalent for every non-text element shall be provided … via alt.”

 

If you are displaying a record with an associated image (perhaps the description of a house and photo). List the image path and image description as fields in the record, and then output the image as part of the dynamic data (listing 1).

 

LISTING 1

<cfquery name="house_data" datasource="houses">

SELECT  price, address, image_path, image_description

FROM   tblHouses

</cfquery>

 

<CFOUTPUT QUERY="house_data">

  Address: #address#    Price:  #price#

<img src="#image_path#" alt="#image_description#">

</CFOUTPUT>

 

Data tables

 

A common technique deployed by ColdFusion Developers is building dynamic tables from recordsets. Good news! You can build dynamic tables that are section 508 compliant and populated with records from a CFQUERY. Imagine you wish to query a data source containing information about your CD collection, with the records displayed in a table listing artist and CD title.

LISTING 2

<table summary="This table lists the artists and titles of my music collection" border="1" >

 <caption>C D collection</caption>

  <tr>

    <th id=”artist">artist</th>

    <th id=”title">title</th>

  </tr>

  <CFLOOP QUERY="CD_collection" >

   <CFOUTPUT>

<tr>

    <td headers=”artist”>#artist#</td>

    <td headers=”title”>#title#</td>

</tr>

  </CFOUTPUT>

 </CFLOOP>

</table>

 

A screen reader would speak the following: “CD Collection. This table lists the artists and titles of my music collection. Artist Title…” and then would speak the contents of each cell.

 

Things to watch out for

 

ColdFusion is an excellent tool in creating compliant web pages. However, there are some things for you to consider. CFFORM and other JavaScript producing tags do not have a way to control placement of the <NOSCRIPT> tag. You will need to browse your pages and look at the source code produced to determine placement of the <NOSCRIPT> tag. (Macromedia is aware of this issue and will be addressing it in the future).  Another consideration is the use of CFINCLUDE. If the included template is used solely as an inserted page component, strip the file of all <HTML> <HEAD> and <TITLE> opening and closing tags. Otherwise, pages may confuse screen readers with extra opening <HTML> and closing </HTML> tags.

 

Other problem tags that use java applets include

·         CFGRID

·         CFTREE

·         CFSLIDER

 

To be compliant you will need to provide the data in these tags in a separate format such as HTML tables or lists.

 

Timeout

Do you have member’s only login sections to you site? Then you may have timeout issues. Session variables by default only last 20 minutes. That may not be long enough for disabled users to view the material. What I suggest you do is code the time out in your code and increase the session timeout to an hour or more. Then you can let individual user increase the timeout for them.

 

Positive effects of compliance

 

By adapting coding practices required by the guidelines for accessibility, you will be in a “win-win” situation. First, your visitors that are disabled are winners because they will be able to access your site! Second, your code will be streamlined and clean.  The guidelines suggested by the access board and W3 for proper HTML 4 implementation recommend using style sheets for formatting. While the 508 regulations require your pages to be able to convey content without an associated style sheet, their use is superior to frames and layout tables for placement of page elements.

 

Summary

 

In this article we have introduced you to accessibility issues and new requirements for Federal web design section 508. Cold Fusion’s flexibility makes it your ally for compliance. An accessible website is a well designed site.

 

Resources

 

http://www.w3.org  W3

http://www.cast.org/bobby  popular Bobby checker for examining pages for accessibility

http://www.section508.gov/   Federal Section 508 – a ColdFusion site!

http://www.hj.com Henter Joyce makers of the JAWS screen reader

http://www.hisoftware.com HiSoftware  producers of verification tools

http://www.w3.org/TR/WCAG10-TECHS W3 accessibility guidelines

http://www.diboc.com/  DIBOC organization with some excellent examples

http://www.macromedia.com/macromedia/accessibility/ download tools

http://www.endoradigital.com/fix/  Lynx text based browser

http://www.econointl.com/sw/  Simply Web 2000 screen reader

http://www.crunchy.com/tools/index.html 508 accessibility valuator and CF Studio tool

http://www.usablenet.com/lift_dw/lift_dw.html Lift 508/W3C add on for Macromedia Dreamweaver, including global ALT tag editor.

http://www.macromedia.com/software/flash/productinfo/accessibility/ Flash accessibility information

 

Bio

Jon Brundage is a Government consultant, ColdFusion programmer, MDCFUG speaker and author. You can reach Jon at [email protected].

Michael Smith is president of TeraTech http://www.teratech.com/ , a 12-year-old Rockville, Maryland based consulting company that specializes in ColdFusion, Database and Visual Basic development.  Michael runs the MDCFUG and recently organized the two-day, Washington, DC-based CF2001 conference that attracted more than 150 participants. You can reach Michael at [email protected] or 301-881-1440.