The adoption of laws ensuring access to web content for people with disabilities in countries such as the United States, Canada, Australia, Japan, and members of the European Union has brought significant attention to the issue of accessibility. Standards such as Section 508 of the Federal Rehabilitation Act in the United States, the Japanese Industrial Standards, and the Disability Discrimination Act in the United Kingdom have made accessibility a core component of contemporary design specifications.
Adobe® ColdFusion® 10 software makes it easier than ever to build rich, dynamic, and accessible web applications. ColdFusion 10 allows designers and developers to automate content contribution and delivery to limit the introduction of accessibility errors. In addition, a site built with ColdFusion 10 allows a designer or developer to give users options that enable them to adapt the site to meet their needs. For example, a user with color blindness may choose a high-contrast version of a site, while a user with impaired vision may choose a large-font version. Because all content is generated from the same source, site maintenance is relatively simple.
Building an accessible web application requires designers and developers to think about accessibility in a new way. The World Wide Web Consortium (W3C) Web Content Accessibility Guidelines (WCAG) 1.0 for accessibility were generally written with HTML in mind. Consequently, ColdFusion developers and designers need to anticipate accessibility of the HTML output of web applications. This page examines issues and techniques for accessible web application development using ColdFusion Markup Language (CFML), with a discussion of each of the following topics:
A screen reader is an assistive technology commonly used by blind people to read the contents of the computer screen aloud. When a screen reader encounters an image in an HTML document, it cannot read the contents of the image itself. Instead, it reads the contents of the text equivalent stored in the alt attribute of the <img> element.
The W3C and Section 508 guidelines require that every image on a page have a corresponding alt attribute. In general, it is advisable that the text equivalent reflect the function of the image rather than a lengthy description of the image itself. The example below shows an image used as a button. The text equivalent used for this image might read "Home." It would not be necessary or advisable to use a longer description such as "Home button with white text on a blue background." This provides too much information that only slows the page down and makes it difficult to use. Sample HTML markup with appropriate use of the alt attribute is shown below.
<img src=”images/home.gif” alt=”home” width=”121” height=”43”>
To generate the HTML shown above dynamically, the designer or developer can store the value of each attribute as a variable. Below is an example of CFML markup used to deliver the Home button shown above. Notice that each of the attributes — src, alt, width, and height — are stored as variables.
Any images that convey no information, including those used as spacers on a page, also require use of the alt attribute; however, to prevent a screen reader from repeatedly reading information that conveys no content, the alt attribute can be set to the null value. Notice the value of the alt attribute in the following HTML code:
<img src=”spacer.gif” alt=”” width=”25” height=”1”>
The first step in creating accessible tables is identifying the table headers. This step is required for the Section 508 and W3C guidelines. When generating a row of headers, the designer or developer should use the th element, not the td element. While many designers avoid using the th element because of text formatting, it is crucial for creating an accessible table. To change the bold and centered formatting of the th element, the developer can use cascading style sheets (CSS) to change the fontweight and textalign properties.
The second step is to add attributes to associate the headers with the table data. The W3C guidelines only require that table headers and table data be associated in complex tables where there are more than two levels of headers. While these cases are not common, providing markup is helpful even in cases where there is only a single row or a single column of headers, as required under Section 508.
One method for associating table headers and table data relies on the use of the scope attribute for the th element. The advantage of this method is that it is easily implemented. Only the th element requires modification. The disadvantage of this method is that some older screen readers encounter difficulty with the scope attribute.
The scope attribute may be set as either scope="row" or scope="col." Once the scope attribute is specified, all of the data in that column or row is then associated with that header. In the following example, note the use of the scope attribute in CFML. Sample CFML markup for the headers is shown below.
<cfoutput query=”stops”> <th scope=”col”>#stops.stopLocation#</th> </cfoutput>
The CFML above might generate the following HTML:
<th scope=”col”>South Transfer Point</th> <th scope=”col”>Park St. and Haywood St.</th> <th scope=”col”>Johnson St. and Park St.</th> <th scope=”col”>W. Main St. and S. Carroll St.</th> <th scope=”col”>Jennifer St. and Ingersoll St.</th> <th scope=”col”>Oak St. and E. Washington Ave.</th> <th scope=”col”>North Transfer Point</th>
ColdFusion 10 includes the ColdFusion Administrator, an accessible console for setting up, maintaining, and administering the dynamic application. ColdFusion administrators who are blind, visually impaired, keyboard-only users, or have other disabilities can use this administrator application with ease.
An accessible form is often the most important part of an accessible web application. It is the means by which a user interacts with the application, and if the form does not work properly, often little else matters. With one exception, the accessibility of forms is largely a factor of the HTML used; however, ColdFusion 10 offers tools that help to make web forms substantially more accessible. This section covers the construction of web forms and server-side validation using ColdFusion 10.
The W3C guidelines have general requirements regarding the accessibility of forms. Other standards internationally require only that the forms work with assistive technology, while a Priority 2 checkpoint of the W3C guidelines requires the labeling of form elements. This section outlines a basic strategy for creating forms that meet all standards.
The first step in creating an accessible form is to make sure that all of the form elements are labeled properly. To a screen reader user, it is not always obvious which labels are associated with which form elements. Forms that are laid out on the page using columns can be particularly confusing. Using the label element helps to associate the text label with the control. The main way to use the label element is to use the for and id attributes to associate the contents of the label element with the input element. An advantage of this method is that it allows the label to be placed in more complex layouts on the screen. In the example below, note that the id and for attributes correspond. When a screen reader encounters this form element, it will read the content of the label element in conjunction with it, even though the label may not be immediately adjacent visually.
<tr> <td> <label for=”first”> First Name: </label> </td> </tr> <tr> <td> <input type=”text” name=”first” id=”first”> </td> </tr>
<cfinput type="text" size="15" name="firstname" required="yes" message="You must enter a first name.">
In some cases, it is wise to move the validation to the server side. ColdFusion 10 simplifies server-side form validation through the use of hidden fields. For each required field, a hidden input element is needed. The name of this hidden field is made up of the name of the required field followed by the suffix "_required." Finally, the value of this hidden element contains the user feedback in the event that the user forgets to fill in this form element. Note the hidden input element in the example below.
<input type=”hidden” name=”first_required” value=”The first name is a required field!”> <label for=”first”>First Name:</label> <input type=”text” name=”first” id=”first”>
When a user submits this form with no value in the first name input control, a server-generated page is displayed indicating the error. This example only demonstrates the use of the "required" validation type, but there are many additional validation suffixes that can be used to validate submitted data. It is worth noting that the server- and client-side methods can be used at the same time, allowing most validation to occur on the client side.
These techniques do not represent a comprehensive picture of all that a ColdFusion developer needs to do to create accessible applications, but rather they are a starting point to help address common and important issues. Developers should familiarize themselves with the accessibility guidelines that apply to their work and visit the Adobe Accessibility Resource Center for updates to this page.
Get tools and support information for Adobe software and content.
If you have questions or comments or want to get involved with Adobe’s accessibility efforts, contact us. We welcome your feedback.