Adobe Dreamweaver CS3 Unleashed- P30 docx

Widgets included with this release of Dreamweaver include the following: Spry Validation Text Field, Select, Checkbox, and Textarea Spry Menu Bar Spry Tabbed Panels Spry Accordion Spry C

Working with Spry Widgets

Just when you thought that Spry lists and tables were the way to go for data presentation, Dreamweaver

introduces other flexible and powerful design components called widgets Widgets, which combine HTML,

CSS, and JavaScript, provide another option when you're designing interactive, fast-loading layouts andworking with form validation Widgets included with this release of Dreamweaver include the following:

Spry Validation Text Field, Select, Checkbox, and Textarea

Spry Menu Bar

Spry Tabbed Panels

Spry Accordion

Spry Collapsible Panel

Although we'll cover some of these controls in depth, in the meantime, you can get an idea as to how thevalidation widgets work by visiting the following URL:

labs.adobe.com/technologies/spry/demos/formsvalidation/index.html Additionally, you can get a sneakpeek at the Spry Accordion in action by visiting the following URL:

labs.adobe.com/technologies/spry/demos/products/index.html

The widgets share common characteristics They're extremely user friendly, engaging, and more

importantly, they enhance the aesthetic appeal of your sites From a development standpoint, widgets areeasy to use Typically they're simple to include because they're just dragged and dropped onto the page Onthe page, their properties can be manipulated via the Property inspector, and their appearance can becustomized through associated CSS rules, making them easy to integrate into any CSS-based site

Validating Form Fields

In Chapter 10, you looked at a powerful behavior called Validate Form This behavior allows you to addfunctionality to a web page that instructs the browser to prevent submission of a form if a user fails to enter

a value into a form field Additionally, you were able to check for numeric inputs, numeric ranges, and emailaddress inputs I made mention of the fact that despite its obvious benefit, the behavior was severelylimited in the features that it allows you to validate For instance, the Validate Form behavior doesn't allowyou to check for dates, credit card numbers, ZIP Codes, phone numbers, and the like Most of those itemsare common when working with forms in your web pages Although the Validate Form behavior offers somerelief, its lack of functionality becomes clear, leaving many developers with the arduous task of writing a lot

of the validation by hand anyway That's where Spry Validation comes in handy The collection of four Spryvalidation form objects follows:

Spry Validation Text Field

Spry Validation Select

Spry Validation Checkbox

Spry Validation Textarea

These four form fields provide developers with the flexibility of validation that they've been clamoring forover for years The capability to require input and check for numeric values, email addresses, dates, times,credit card formatting, ZIP Codes, phone numbers, social security numbers, currency, and URLs are allavailable through the Spry validation form fields Even better, customization of these form fields is a snapbecause each Spry validation form field exposes a Property inspector that makes customizing propertieseffortless So that you understand how these form fields function, let's begin with the Spry Validation TextField.

Spry Validation Text Field

By far the most flexible Spry validation form field is the Spry Validation Text Field The Spry Validation TextField, as its name implies, is a simple HTML text field that has complex JavaScript associated with it TheJavaScript, like other Spry widgets, is contained within an external js file that resides within the SpryAssetsfolder Aside from controlling validation conditions, the JavaScript code is also responsible for guaranteeinginput of data within the text field When you include a Spry Validation Text Field on the page, you have thecapability to check for the following data inputs:

Some of the validation types, such as date, time, credit card, ZIP Code, phone number, currency, and IPaddress, include a range of formats to choose from, making them more flexible for your validation needs.

To insert and configure a Spry Validation Text Field, start by placing your cursor on the page where youwant the text field to be placed and choose Insert, Spry, Spry Validation Text Field Assuming you don'talready have a form tag on the page, Dreamweaver displays a dialog asking if you want a form tag

automatically added for you Choose Yes A new form tag and the Spry Validation Text Field are added tothe page The interesting part about the Spry Validation Text Field is that if you select within the text field,the Property inspector is essentially the Text Property inspector When you select the blue visual aid thatsurrounds the Spry Validation Text Field, the Property inspector comes to life As you can see from Figure30.11, selecting the blue visual aid that surrounds the Spry Validation Text Field exposes a collection of newmodifiable properties within the Property inspector

Figure 30.11 Select the blue visual aid that surrounds the Spry Validation Text Field reveals the

unique Property inspector options for this element.

[View full size image]

As you can see from Figure 30.11, the Property inspector reveals the following set of customizable

properties:

ID— Enter a value here to uniquely name the text field The default that Dreamweaver inserts is

sprytextfield1, then sprytextfield2, and so on

Type— Set the type of validation that the text field will perform by selecting from one of 14 values

from this list

Format— Some of the validation types, such as date, time, credit card, ZIP Code, phone number,

currency, and IP address, include a range of formats to choose from For instance, if you choose the

Zip Code option from the Type menu, the Format menu provides options to display US-5, US-9, UK,Canada, and Custom Pattern postal codes You can choose an option from this list to make the

validation more dynamic based on the format of the ZIP Code that you want to validate

Preview states— Set the format of the text field and the error message that you want displayed

when a user enters invalid formatting, forgets to enter a value, or enters a correct value Optionsinclude Initial (default), Required (highlights the text field red and shows the message A value isrequired.), Invalid Format (highlights the text field red and shows the message Invalid format),and Valid (highlights the text field green)

Validate on— Set the event that triggers the validation Options include Blue, Change, and Submit.

By default, text fields always validate when the form is submitted Because this is the case, the

Properties Inspector sets the Submit option as checked and disables it so that you can't change it Ifyou'd also like the text field to be validated as soon as the user tabs out of the text field, check theBlur check box as well

Pattern— Enter a custom pattern for validation within this text box This text box will become enabled

only when the Custom option is selected from the Type menu After the text field is enabled, enter one

of the following custom validation patterns:

0—Represents a digit between 0 and 9.

A or a—Represents case-sensitive alphabetic characters.

B or b—Represents non-case-sensitive alphabetic characters.

X or x—Represents case-sensitive alphanumeric characters.

Y or y—Represents non-case-sensitive alphanumeric characters.

?—Represents any character.

Hint— Enter the text within this text box that should display to the user as a hint if an error is

displayed

Min/Max chars— Set the minimum and maximum number of characters that should be allowed

within the text field in these two text boxes

Min/Max value— When you're working with numeric types such as Integer, the Min and Max value

text boxes become enabled You can specify minimum and maximum values that the user can enterhere These are ideal when validating ranges

Required— Checked by default, this property guarantees that the text field requires an input by the

user

Enforce pattern— Click this check box to enforce the pattern that you specify within the Pattern text

box

So that you can test the result of the text field addition, place your cursor just to the right of the text fieldand press Enter (Return) Now choose Insert, Form, Button The button will be used to submit the form.Save your work.

Dreamweaver attempts to place SpryValidationTextField.css and SpryValidationTextField.js withinthe SpryAssets folder Again, these files are required for controlling the look and functionality of the textfield Click OK Preview your page in the browser by pressing F12 (Option+F12) When the page appears inthe browser, click the Submit button The text field highlights red and the error message, A value isrequired displays on the page Again, this is a simple example of the power that the text field reveals Wehaven't even customized the type of input the text field should validate With some simple customizations,you can ensure that your Spry Validation Text Field works the way you want it to work

Spry Validation Select

Another Spry validation form field that you might decide to take advantage of is the Spry Validation Select.The Spry Validation Select is nothing more than an HTML-based drop-down menu that has complex

JavaScript associated with it to guarantee that a selection has been made before the form is submitted Toinsert and configure a Spry Validation Select, follow the steps outlined next:

1. Place your cursor just before the Submit button and press Enter (Return)

2. Choose Insert, Spry, Spry Validation Select The drop-down menu is added to the page under the SpryValidation Text Field and above the Submit button

3. Select the drop-down menu (not the Spry visual aid that surrounds it) and choose the List Valuesbutton from within the Property inspector The List Values dialog appears

4 Type SELECT ONE into the Item Label field, press Tab, and give it a value of 0; press Tab and type Windows into the Item Label field and press Tab again to give it a value of 1 Pressing Tab to continue

to move through the fields, type Mac and give it a value of 2; finally, type Linux, give it a value of 3,

and click OK Notice that SELECT ONE is the default selection in the drop-down menu Although wewant this option to appear, the user should be forced to select something other than this option fromthe list before submitting the form This is where the Spry validation comes in

5. Select the blue visual aid that surrounds the Spry Validation Select Immediately the Property inspectorchanges to show the associated properties For the most part, the Property inspector is simple to useand displays similar properties to the Spry Validation Text Field To configure the drop-down menu forour purposes, uncheck the Blank Value check box This assures us that the user must select an optionfrom the list

6 Now click the Invalid Value check box and enter the value 0 (the value associated with the SELECT ONE

option in the drop-down menu) within the provided text box

Save your work Dreamweaver notifies you that it needs to place SpryValidationSelect.css and

SpryValidationSelect.js in the SpryAssets folder Again, these files are required for controlling the lookand functionality of the drop-down menu Click OK Preview your page in the browser by pressing F12(Option+F12) Enter a value into the text box and click Submit Figure 30.12 illustrates the result The dropdown menu highlights red and the text Please select a valid item appears Also notice that the textbox will highlight in green This is because that option is correct Only the form fields that require attentionwill highlight red

Figure 30.12 An error message appears next to the drop-down menu because we didn't select a

valid option from the list.

[View full size image]

Spry Validation Textarea

The Spry Validation Textarea, like the text field, is used to collect text from the user The biggest differencebetween the text area and the text field, however, is that users can enter one line to several paragraphs oftext Because of this flexibility, there's no mechanism for validating formats in the textarea—a user mayenter just about anything within the field It's not uncommon, however, to validate minimum, maximum, orboth values The Spry Validation Textarea supports this type of validation but takes it one step further If auser attempts to enter too much text, an error message appears and the user is prevented from enteringany more values within the textarea To add and configure the Spry Validation Textarea, follow the stepsoutlined next:

1. Place your cursor just before the Submit button and click Enter

2. Choose Insert, Spry, Spry Validation Textarea The textarea is added to the page under the SpryValidation Select and above the Submit button

3. Select the blue visual aid that surrounds the Spry Validation Textarea Immediately the Propertyinspector changes to show the associated properties What you will want to enter is the Max chars

value Enter the value 40 now.

4. Make sure that the Block Extra Characters check box is checked This prevents the user from enteringany more characters after they reach the 40-character limit

5. Now select an option from the Counter option button list Choose None when you don't want a counterdisplayed Choose Chars Count to have a counter incrementally display as the user enters values in thetext area Choose Chars Remaining to have a counter display the number of available characters as theuser enters values in the text area For our purposes, choose the Chars Remaining option

Save your work Dreamweaver notifies you that it needs to place SpryValidationTextarea.css and

SpryValidationTextarea.js within the SpryAssets folder Again, these files are required for controlling thelook and functionality of the textarea Click OK Preview your page in the browser by pressing F12

(Option+F12) Begin typing into the text area You'll immediately notice that the counter gets lower andlower as you type When you reach the limit, you're no longer able to type—and more importantly, the texthighlights red

Spry Validation Checkbox

You can use the Spry Validation Checkbox either individually or within groups to check for specific values orenforce a range of selections Typically, individual check boxes are used in instances where you want toforce the user to select a check box, usually because of a legal agreement or terms of use that you arerequiring them to agree to The check box, like the other validation form fields, is easy to implement Toinsert and configure a Spry Validation Checkbox, follow these steps:

1. Place your cursor just before the Submit button and press Enter (Return).

2. Choose Insert, Spry, Spry Validation Checkbox The check box is added to the page under the SpryValidation Textarea and above the Submit button

3 Enter the text I agree to the terms just to the right of the check box.

4. Select the blue visual aid that surrounds the Spry Validation Checkbox You may have to mouseoverthe check box to see it Make sure that in the Property inspector, the option button labeled Required isselected

Save your work Dreamweaver notifies you that it needs to place SpryValidationCheckbox.css and

SpryValidationCheckbox.js within the SpryAssets folder Again, these files are required for controlling thelook and functionality of the textarea Click OK Preview your page in the browser by pressing F12

(Option+F12) Click the Submit button Dreamweaver displays all the error messages, including the Pleasemake a selection error message next to the check box, because you haven't selected it yet

Again, the example that we've shown is the Spry Validation Checkbox at its most basic form If you'd like tofurther enhance the validation functionality (maybe for a group of check boxes), select the Enforce Rangeoption button and then enter values within the Min and Max # of Selections text boxes This allows you toset the quantity of check boxes that the user must select before the form can be submitted

Extending Layout Options

It's no secret that the Web 2.0 trend is heavily geared toward CSS Not only is the formatting of sitescontrolled by CSS, but to a large extent, so is the structure To compete with this latest CSS-based

structuring trend, Adobe has introduced a collection of page structuring/layout widgets in the form of theSpry Menu Bar, Spry Tabbed Panels, Spry Accordion, and Spry Collapsible Panels, which improve the visualaspects and general aesthetics of your website To give you an idea as to how these layout widgets can beused, let's add the Spry Tabbed Panels widget now

1. Create a new page by choosing File, New Choose the HTML option from the Blank Page category,choose the <none> option from the Layout list, and click Create A new document window instance willappear Immediately place your cursor on the page were you want the Spry Tabbed Panels widget toappear

2. Choose Insert, Spry, Spry Tabbed Panels The Spry Tabbed Panels widget is inserted onto the pagesimilar to Figure 30.13

Figure 30.13 The Spry Tabbed Panels widget is inserted onto the page.

[View full size image]

3. Select the blue visual aid that surrounds the Spry Tabbed Panels widget The Property inspector

changes to accommodate property modifications for the widget

4. As you can see from Figure 30.13, the Property inspector enables you to do three things First, you canuniquely identify your Spry Tabbed Panels by manipulating its ID Second, you can add new

tabs/panels via the Panels list Finally, you can choose which panel will display by default by selectingthe panel name from the Default panel menu For example, click the Add (+) panel button to add anew panel to the widget As you can see, the new tab is added as Tab 3

Save your work Immediately, Dreamweaver notifies you that it needs to place SpryTabbedPanels.css and

SpryTabbedPanels.js within the SpryAssets folder Again, these files are required for controlling the lookand functionality of the Spry Tabbed Panels widget Click OK Preview your page in the browser by pressingF12 (Option+F12) You'll notice that three tabs appear, each containing its own panel of content Selecteach tab to navigate through the panels

Although the Property inspector allows you to add, remove, reposition, and set the default panel that shouldappear, customization for the panel can be handled by modifying the tabs/panels within the Documentwindow For instance, if you'd like to change the tab name, highlight the text within the tab and begintyping Furthermore, if you'd like to modify the content within the panel, highlight the default placeholdertext and begin typing Customizing the CSS is a bit trickier but still possible As Figure 30.14 shows,

selecting the Spry Tabbed Panels widget displays a list of all of the classes that are used by the widgetwithin the CSS Styles panel

Figure 30.14 All the CSS for the Spry Tabbed Panels widget (and all other widgets) are displayed

within the CSS Styles panel.

To modify a particular class, either select the class and modify the properties from within the Propertiespane or double-click the class to open the CSS Style Definition dialog for easier and more visual

customizations

Working with the other three widgets is similar to, if not easier than, working with the Spry Tabbed Panelswidget To work with the Spry Accordion, the Spry Menu Bar, or the Spry Collapsible Panel, insert them asyou did the Spry Tabbed Panels Customizing the CSS and modifying the properties for the panel can bedone via the CSS Styles panel or the Property inspector, respectively Figure 30.15 shows all four widgets(inserted onto the page with minimal customizations) on a web page

Figure 30.15 The Spry Tabbed Panels, Spry Menu Bar, Spry Accordion, and Spry Collapsible Panel

widgets together on one page.

[View full size image]

Working with RSS Feeds

Quite possibly one of the hottest trends, aside from web services, is that of RSS Originally developed byNetscape, Really Simple Syndication (RSS) is an XML format for syndicating web content A website thatwants to allow other sites to publish some of its content creates an RSS document and registers the

document with an RSS publisher A user that can read RSS-distributed content can then use the content on

a different site Syndicated content includes such data as news feeds, events listings, news stories,

headlines, project updates, excerpts from discussion forums, and even corporate information Althoughnumerous websites are devoted to the topic of helping you publish and distribute RSS feeds, you need look

no further than Dreamweaver With Dreamweaver's built-in XML/XSL transformation integration, consumingRSS feeds in your website is a snap To work with RSS feeds, follow these steps:

1. Locate an RSS feed One of my favorite websites (and a website that I know provides an RSS feed) iswww.slickdeals.net Browse to that website now

2. In the left corner, above the navigation menu, you'll see a small orange button titled RSS Click it.You're immediately presented with the RSS feed (and the path to the feed in the address bar) in thebrowser window, similar to Figure 30.16

Figure 30.16 The RSS feed appears in the browser.

[View full size image]

3. Note the path to the feed is www.slickdeals.net/rss.php Select it and choose Edit, Copy You'll need topaste this path into the Locate XML Source dialog in Dreamweaver in a moment You can now close thebrowser

4. Shift your attention back to Dreamweaver Create a new XSLT (Entire Page) document by choosingFile, New Select the XSLT (Entire Page) option from the Blank Page category and click Create TheLocate XML Source dialog appears.

5. Select the Attach a Remote File on the Internet option button and paste the www.slickdeals.net/rss.phppath into the text box Click OK The XML nodes appear within the schema tree in the Bindings panel

6. Drag out the title, link, comments, and pub Date bindings into the page, creating line breaks betweeneach one along the way Your page in Dreamweaver should resemble Figure 30.17

Figure 30.17 Drag the bindings into the XSL page.

[View full size image]

7. Highlight the four bindings on the page and choose Insert, XSLT Objects, Repeat Region The XPATHExpression Builder (Repeat Region) dialog appears

8. Select the item node within the schema tree and click OK A Repeat Region visual aid surrounds thedynamic text elements within the XSL page

Save your work and test the results in your browser by pressing F12 (Option+F12) Slick Deals' feeds arenow presented to you within the browser, similar to Figure 30.18

Figure 30.18 Slick Deals news feeds are shown in the browser.

Your design doesn't have to stop here As you'll notice, the feeds as they're displayed in the browser don'tlook very attractive Instead, you might decide to format the bindings within the page to make them moreattractive and aesthetically pleasing.

As you have seen, Adobe has made strides in the Web 2.0 realm with its newest Spry framework for Ajax.Although Dreamweaver's integration of Spry is certainly in its infancy, the technology shows definitepromise With the capability to quickly and effortlessly generate XML datasets and bind the data containedwithin those datasets to regions within the page, Spry makes working with Ajax exciting and fun Combinethis with the capability to work with tables and numerous visual enhancements such as form validation,accordions, tabbed layouts, and menu bars, you can see why the development community is excited aboutthis newest platform for Ajax

conforming to the same capabilities Welcome to designing on the Web!

In this appendix, I'll explain what web accessibility standards are, how they benefit both you and your userswho have disabilities, and how you can use Dreamweaver to ensure that everyone can use your site

Accessibility Standards

The way you design a website determines, to a very large extent, who is able to view the content on thatsite If you're concerned only about those with the latest version of your favorite browser and the fastesthardware and connection, there's no guarantee that you'll make a website that can be used by anyone whofalls outside of those parameters

There's a very large group of users who tend to fall outside of nearly everyone's target audience whendevelopers design for the web—users who have disabilities

Web users who have visual disabilities are often stymied by web pages that rely on images, color, or visuallayout to convey the meaning of the site's content Those with limited vision have difficulties with low-contrast colors or small fonts Deaf or hard-of-hearing users won't hear the sound tracks of multimedia.Users with limited physical dexterity might not be able to drag and drop or do other activities requiring amouse Pages with complex text that lack illustrations and summaries are very difficult for users withcognitive disabilities

The web isn't always easy to use if you have special needs Some users, such as those who are blind, have

to rely on special assistive technologies such as screen readers, Braille displays, or screen magnifiers forweb access However, these tools will work with your site only if you've carefully built your sites to allowaccess

To learn more about how people with disabilities access the Web, visit the site of the InternationalCenter for Disability Resources on the Internet, at www.icdri.org

The process of creating a site that can be used by anyone—regardless of disability—is called accessibility To

properly create a website that is accessible, you'll need to know all about assistive technology, how peoplewith disabilities use the Web, and how HTML and other web languages function in browsers You'll also need

to be an expert on accessibility's close cousin, usability, which is the study of how people use computers

effectively

Sound like a lot of work? Well, it is, believe me—but fortunately you won't have to do all that work yourself.The knowledge you'll need to construct accessible websites has been codified into accessibility standards,which function as a checklist of sorts, so that you simply have to follow these rules to produce a site with nobarriers to access

Dreamweaver makes it even easier for you to follow those standards because they're built right into thesoftware itself By using Dreamweaver's accessibility features to create and check your work, you cangreatly simplify the process of creating accessible websites

Standards Resources

When it comes to the World Wide Web, there is one primary source for nearly all the standards you'll

use—the World Wide Web Consortium (W3C) The W3C is an international association of some of the majorplayers in the Web, from browser makers to research organizations The official specifications for HTML,XML, XHTML, CSS, and other key web technologies were created by the W3C's working groups and released

as recommendations for adoption on the Web

Tip

The W3C's website is located at www.w3.org and is the definitive source for web specifications

However, most web specifications are incredibly dry reading, and unless you're some sort of

masochist, you won't want to dive right into them A better idea is to start at the website of the WebStandards Project at www.webstandards.org, a group of expert web developers who promote

standards compliance

One branch of the W3C concerns itself exclusively with access by people with disabilities—the Web

Accessibility Initiative (WAI) Just as the W3C has produced standards for the HTML language, so has theWAI produced standards for accessibility

Web Content Accessibility Guidelines

For web developers, the most important WAI standards are contained in the Web Content AccessibilityGuidelines, or WCAG, which is a set of guidelines, checkpoints, and associated techniques that describe how

to ensure the accessibility of your website

Tip

You can read the full WCAG recommendation and download a checklist for easy reference from theW3C's website at www.w3.org/tr/wcag

The WCAG recommendation lists 14 basic principles, or guidelines, that promote accessibility:

1. Provide equivalent alternatives to auditory and visual content

2. Don't rely on color alone

3. Use markup and style sheets and do so properly

4. Clarify natural language usage

5. Create tables that transform gracefully

6. Ensure that pages featuring new technologies transform gracefully

7. Ensure user control of time-sensitive content changes

8. Ensure direct accessibility of embedded user interfaces

9. Design for device independence

10 Use interim solutions.

11 Use W3C technologies and guidelines.

12 Provide context and orientation information.

13 Provide clear navigation mechanisms.

14 Ensure that documents are clear and simple.

Each of these guidelines is supported by one or more checkpoints For example, the checkpoints forguideline 2, "Don't rely on color alone," are

2.1 Ensure that all information conveyed with color is also available without color, for example from

context or markup

2.2 Ensure that foreground and background color combinations provide sufficient contrast when

viewed by someone having color deficits or when viewed on a black and white screen

Each checkpoint is given a priority value A priority 1 means that the failure to follow that checkpoint willexclude members of your audience with specific disabilities Priority 2 checkpoints are designed to reducethe difficulty of access by people with disabilities, and priority 3 checkpoints actively improve the quality ofaccess for individuals with special needs

In WAI terminology, if your site fulfills all the priority 1 checkpoints, it is said to be Single-A compliant withWCAG Meeting all priority 1 and 2 checkpoints grants your site Double-A status, and successfully meetingall the checkpoints qualifies a site as Triple-A level

WCAG compliance levels have been accepted by many public and private organizations as the minimumrequirement for sites they control For example, California community college websites must meet at leastWCAG Double-A standards

Section 508

In addition to being directly adopted, the WCAG standard has been used to create specialized web

accessibility policies The most influential of these is the standard employed by the United States for mostgovernment websites

The requirements for federal sites are described in Section 508, subsection 1194, of the 1998 amendments

to the Rehabilitation Act That's a mouthful to say at once, so everyone refers to the set of requirementssimply as Section 508

The aim of Section 508 is to ensure that government information technology is accessible to people withdisabilities—both those working within federal agencies and those citizens who are using public web

resources

The Section 508 requirements for websites are modeled after the priority 1 checkpoints in WCAG, with a fewmodifications Specifically, Section 508 adds some new requirements and eliminates a few priority

checkpoints while generally rewriting from the technical recommendation language of the W3C to the form

of bureaucratic regulation favored in government work

Tip

The official website for Section 508 is www.section508.gov

Which Standard to Follow?

It's been said that the great thing about standards is that there are so many to choose from Despite thehumor of this statement, there's still some truth to it—there's not one universal standard for accessibilitybut several, including Single-A WCAG, Double-A WCAG, Triple-A WCAG, and Section 508

The overlap between Single-A WCAG checkpoints and Section 508 requirements remain very strong,

however, so the techniques used to make a site accessible by one standard will generally ensure that theother standard is met

The Double-A and Triple-A WCAG standards are harder to meet because they go beyond basic accessibilityand require that web pages not be difficult to use

In some cases, you may be able to choose which standard to follow Most commercial and personal websitesare unregulated, and thus you can select your level of compliance Many commercial sites will aim forSingle-A compliance, but Double-A compliance improves site access for disabled users or employees Privateorganizations or corporations that provide services to people with disabilities will want to achieve Triple-Acompliance

As mentioned previously, public sector websites may have legal requirements for accessibility, depending onthe location and type of public entity For example, U.S federal agencies such as the Department of

Forestry are required to meet the Section 508 requirements, and universities in Australia, for instance, mustmeet WCAG Double-A Your organization's legal or disability officer can advise you on specific regulatoryobligations that apply to your website

Conform with Standards

Conforming with accessibility standards provides many benefits Besides reducing your potential legalcomplications (especially if you are subject to specific requirements), it can also improve the overall

usability of your site because the considerations needed for producing an accessible website also lead to asite that is improved for everyone For example, a transcript of an audio speech can benefit anyone

accessing the web from a quiet public library

Accessible standards also encourage designs that can be used on a diversity of web accessible devices,

including ATMs, set-top boxes (like your cable or satellite box), Internet appliances (WebTV), and personaldigital assistants (PDAs) The same techniques that guarantee access for nonvisual browsers also improveaccess for users of text-only cell phones.

Creating an accessible website consists of ensuring that you've coded your site so that a broad audience canuse it Your audience includes not only traditional browsers and web devices, but also specialized programs

or hardware collectively called assistive technology Examples of assistive technology include screen

readers, pointing devices, voice recognition software, screen magnifiers, Braille terminals, and onscreenkeyboards

Assistive technologies are usually innovative and clever approaches to overcoming obstacles, but like anycomputer feature, they can work only with what they're given in terms of information If a Braille terminalencounters an image that isn't labeled properly (with an alt attribute), it cannot tell automatically if theimage is a spacer GIF, a simple decoration, an important piece of content necessary for understanding thepage, or a banner ad As the author of a web page, you can provide this necessary information so thatassistive technologies can function properly

For example, the modified version of the CompanyEvents web page shown in Listing A.1, although a

straightforward design, nonetheless has serious accessibility problems for users with disabilities

Listing A.1 The Inaccessible CompanyEvents Web Page

<title>Welcome to the Vecta Corporation</title>

<link href="styles.css" rel="stylesheet" type="text/css" />

<div align="left"><img src="Images/subheader_companyevents.gif"

width="172" height="27" /></div><br />

Friday night was VectaCorp's annual &quot;Concert at the

Park&quot; For those employees who missed the headlining

band Spitalfield, below is a sample of what you missed

</p>

<p align="left">

<a href="Media/spitalfield.mp3" class="style1">

Brought to you by the distinguished Marketing department<br />

<a href="mailto:info@vectacorp.com" class="style1">

So what does the page look like in a browser? It's fairly simple (see Figure A.1) and displays perfectly well in

a full-featured browser such as Internet Explorer

Figure A.1 The modified CompanyEvents web page looks fine in a full-featured browser such as

Internet Explorer.

[View full size image]

Note, however, that the red color used on the link to the audio clip doesn't reproduce well in the white screenshot printed in the book What would this site be like for blind users? To test, we'll use a textbrowser named Lynx and view the page Lynx displays all web pages without images or colors, just as plaintext This is a useful approximation of what blind users experience when accessing a web page Most userswho can't see will use a screen reader program that reads out loud the text from a browser (such as

black-and-Internet Explorer, Safari, or even Lynx) or a Braille display with raised dots Both of these methods areroughly equal to the text display of Lynx To install and view this page using Lynx, follow these steps:

1. Visit www.dreamweaverunleashed.com Click the Resources link, then click the Software link from thenavigation on the left Next, click the link for Lynx Text Browser Immediately download the Zip archive

to your computer The Mac version can be found at

http://www.apple.com/downloads/macosx/unix_open_source/lynxtextwebbrowser.html

2. When you've downloaded the Zip file, extract the Lynx 2.8.3 folder from the Zip archive

3. Double-click lynx.exe to start the Lynx browser

4. When the commands message appears, press the G key on your keyboard

5. Type the location to your companyevents.html page: C:\Vecta

Corp\AppendixA\companyevents.html.

6. Scroll to the top of the browser to see the text-only version of the companyevents.html page As youcan see from Figure A.2, some minor problems are clearly visible Initially, the banner at the top isn'tidentified beyond [header] and the subheading for company events simply displays the text

[subheader_companyevents]

Figure A.2 The page is inaccessible when viewed in Lynx, a text browser.

[View full size image]

To install the Lynx browser on a Mac, follow the steps outlined here:

1. Visit http://www.apple.com/downloads/macosx/unix_open_source/lynxtextwebbrowser.html and clickthe Download button, from the top or bottom of the page, to begin downloading the Zip file to yourcomputer.

2. When you've downloaded the Zip file, it will automatically extract and you'll see the Lynx 2.8.6u diskimage (DMG file) on your desktop (or in your Download stack in Leopard) Double-click the DMG file tomount the disk image and then double-click the mounted image to see the contents

3. Double-click Install to begin installation of the Lynx browser and type your Administrative passwordinto Terminal when prompted

4. You now have two options with the installation You can leave it as is and run Terminal from

/Applications/Utilities/Terminal.app, followed by typing Lynx and pressing Return, or you cancopy Lynx.command into your Applications folder and double-click it to automatically open Terminaland launch Lynx for you Whatever you're most comfortable with is what matters

5. When the commands message appears, press the G key on your keyboard

6. Type the location to your companyevents.html page: /Vecta

Corp/AppendixA/companyevents.html, or wherever you may have copied the files, and hit Return.

7. Scroll to the top of the browser to see the text-only version of the companyevents.html page As youcan see from Figure A.2, some minor problems are clearly visible Initially, the banner at the top isn'tidentified beyond [header] and the subheading for company events simply displays the text

[subheader_companyevents]

A further problem exists but may not be immediately obvious—the audio link presents a problem to deafusers Because the audio file is available only in a MP3 file, anyone who is unable to hear sounds won't beable to hear the music

In Listing A.2, you can see a revised version of the page This version was created using the built-in

accessibility check function in Dreamweaver, which is covered later in this appendix The changes to thesource code are shown in bold

Listing A.2 A More Accessible Version of the CompanyEvents Web Page

<title>Welcome to the Vecta Corporation</title>

<link href="styles.css" rel="stylesheet" type="text/css" />

</head>

<body bgcolor="#FFFFFF">

<div align="center">

<img src="Images/header.gif" width="467" height="227"

alt="Vecta Corp: The Official Vecta Corp Company Intranet"

<table width="467" border="0" cellpadding="0" cellspacing="0"

summary="Friday night was Vecta Corp's annual Concert at the

Park If you missed the band Spitalfield play, read the

song lyrics for songs they sang live!">

<tr>

<td>

<div align="left"><img src="Images/subheader_companyevents.gif"

width="172" height="27" alt="Company Events"/></div><br />

Friday night was VectaCorp's annual &quot;Concert at the

Park&quot; For those employees who missed the headlining

band Spitalfield, below is a sample of what you missed

</p>

<p align="left">

<a href="Media/spitalfield.mp3" class="style1">

Listen to audio clip (531 KB)

</a><br />

<a href="spitalfield.html" class="style1">

Read the song lyrics</a>

Brought to you by the distinguished Marketing department<br />

<a href="mailto:info@vectacorp.com" class="style1">

You'll notice that several new attributes such as alt, longdesc, and summary have been added

Furthermore, a transcript link was placed after the audio file link

The revised page is shown in Figure A.3 in Lynx Although the changes aren't dramatic, they are enough toallow a broader group of users to access the page

Figure A.3 Lynx can now view the page without errors, as can many users with varying

disabilities.

[View full size image]

Apply Standards to New Designs

It's always easiest to make a web page or website accessible from the start and not have to spend timegoing back and redoing it from scratch The effort of retrofitting is much harder than doing it right the firsttime

Dreamweaver makes it easier to build accessible websites by providing accessible templates and by

prompting you for necessary information when adding new HTML elements

Accessible Design Templates

Dreamweaver comes with a default set of page designs; unfortunately, the basic page designs weren'tcreated with accessibility in mind Fortunately, an additional set of page designs were provided that includeaccessibility features such as <label> tags and variable font sizes, which enable you to easily set up anaccessible page

To use one of these templates, choose File, New When the New Document dialog appears, select the Pagefrom Sample category, select the Start Page (Basic) folder from the Sample Folder list, and then select apage from the Same Page list Notice that the Description pane in the New Document dialog outlines all theprebuilt templates in this category as accessible Select one from the Page Designs list as shown in FigureA.4, open it up, and you're ready to start

Figure A.4 Choose an accessible template as a starting point for a new web page.

[View full size image]

Merely using an accessible template does not guarantee that the final result will be accessible You'llneed to use the Accessibility checker, described later in this appendix, for a more thorough result

Accessibility Dialog Boxes

Dreamweaver also uses dialog boxes to prompt automatically for required accessibility information As youhave probably noticed, these dialogs are turned on by default You can turn them on or off from thePreferences dialog by following these steps:

1. Open the Preferences dialog by choosing Edit, Preferences (Dreamweaver, Preferences on the Mac)

2. Choose the Accessibility category to see the various accessibility options, shown in Figure A.5

Figure A.5 Setting the accessibility options turns on/off accessibility dialog boxes.

[View full size image]