Adobe Dreamweaver CS3 Unleashed- P30

Chia sẻ: Cong Thanh | Ngày: | Loại File: PDF | Số trang:50

lượt xem

Adobe Dreamweaver CS3 Unleashed- P30

Mô tả tài liệu
  Download Vui lòng tải xuống để xem tài liệu đầy đủ

Adobe Dreamweaver CS3 Unleashed- P30: The good news is Dreamweaver provides numerous windows, panels, inspectors, and toolbars for streamlining the way you build websites. The bad news, unfortunately, is that Dreamweaver provides numerous windows, panels, inspectors, and toolbars for streamlining the way you build websites. Why so many windows, panels, and so on, Dreamweaver is unprecedented in the feature set it provides, allowing developers complete control when building websites and applications....

Chủ đề:

Nội dung Text: Adobe Dreamweaver CS3 Unleashed- P30

  1. 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 and working 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 the validation widgets work by visiting the following URL: Additionally, you can get a sneak peek at the Spry Accordion in action by visiting the following URL: 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 are easy to use. Typically they're simple to include because they're just dragged and dropped onto the page. On the page, their properties can be manipulated via the Property inspector, and their appearance can be customized 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 add functionality 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 email address inputs. I made mention of the fact that despite its obvious benefit, the behavior was severely limited in the features that it allows you to validate. For instance, the Validate Form behavior doesn't allow you to check for dates, credit card numbers, ZIP Codes, phone numbers, and the like. Most of those items are common when working with forms in your web pages. Although the Validate Form behavior offers some relief, 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 Spry validation form objects follows: Spry Validation Text Field Spry Validation Select Spry Validation Checkbox Spry Validation Textarea
  2. These four form fields provide developers with the flexibility of validation that they've been clamoring for over 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 all available through the Spry validation form fields. Even better, customization of these form fields is a snap because each Spry validation form field exposes a Property inspector that makes customizing properties effortless. So that you understand how these form fields function, let's begin with the Spry Validation Text Field. Spry Validation Text Field By far the most flexible Spry validation form field is the Spry Validation Text Field. The Spry Validation Text Field, as its name implies, is a simple HTML text field that has complex JavaScript associated with it. The JavaScript, like other Spry widgets, is contained within an external .js file that resides within the SpryAssets folder. Aside from controlling validation conditions, the JavaScript code is also responsible for guaranteeing input of data within the text field. When you include a Spry Validation Text Field on the page, you have the capability to check for the following data inputs: No input (none) Integer Email Address Date Time Credit Card ZIP Code Phone Number Social Security Number Currency Real Number/Scientific Notation IP Address URL Custom inputs
  3. 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, 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 you want the text field to be placed and choose Insert, Spry, Spry Validation Text Field. Assuming you don't already 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 to the 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 that surrounds the Spry Validation Text Field, the Property inspector comes to life. As you can see from Figure 30.11, selecting the blue visual aid that surrounds the Spry Validation Text Field exposes a collection of new modifiable 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
  4. 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. Options include Initial (default), Required (highlights the text field red and shows the message A value is required.), 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. If you'd also like the text field to be validated as soon as the user tabs out of the text field, check the Blur 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 enter here. 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.
  5. So that you can test the result of the text field addition, place your cursor just to the right of the text field and 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 within the SpryAssets folder. Again, these files are required for controlling the look and functionality of the text field. Click OK. Preview your page in the browser by pressing F12 (Option+F12). When the page appears in the browser, click the Submit button. The text field highlights red and the error message, A value is required. displays on the page. Again, this is a simple example of the power that the text field reveals. We haven'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. To insert 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 Spry Validation 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 Values button 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 we want this option to appear, the user should be forced to select something other than this option from the 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 inspector changes to show the associated properties. For the most part, the Property inspector is simple to use and displays similar properties to the Spry Validation Text Field. To configure the drop-down menu for our purposes, uncheck the Blank Value check box. This assures us that the user must select an option from 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 look and 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 drop down menu highlights red and the text Please select a valid item. appears. Also notice that the text box will highlight in green. This is because that option is correct. Only the form fields that require attention will 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]
  6. Spry Validation Textarea The Spry Validation Textarea, like the text field, is used to collect text from the user. The biggest difference between the text area and the text field, however, is that users can enter one line to several paragraphs of text. Because of this flexibility, there's no mechanism for validating formats in the textarea—a user may enter just about anything within the field. It's not uncommon, however, to validate minimum, maximum, or both values. The Spry Validation Textarea supports this type of validation but takes it one step further. If a user attempts to enter too much text, an error message appears and the user is prevented from entering any more values within the textarea. To add and configure the Spry Validation Textarea, follow the steps outlined 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 Spry Validation Select and above the Submit button. 3. Select the blue visual aid that surrounds the Spry Validation Textarea. Immediately the Property inspector 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 entering any 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 counter displayed. Choose Chars Count to have a counter incrementally display as the user enters values in the text area. Choose Chars Remaining to have a counter display the number of available characters as the user 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 the look 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 and lower as you type. When you reach the limit, you're no longer able to type—and more importantly, the text highlights red. Spry Validation Checkbox You can use the Spry Validation Checkbox either individually or within groups to check for specific values or enforce a range of selections. Typically, individual check boxes are used in instances where you want to force the user to select a check box, usually because of a legal agreement or terms of use that you are requiring them to agree to. The check box, like the other validation form fields, is easy to implement. To insert and configure a Spry Validation Checkbox, follow these steps:
  7. 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 Spry Validation 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 mouseover the check box to see it. Make sure that in the Property inspector, the option button labeled Required is selected. 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 the look 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 Please make 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 to further enhance the validation functionality (maybe for a group of check boxes), select the Enforce Range option button and then enter values within the Min and Max # of Selections text boxes. This allows you to set 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 sites controlled 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 the Spry Menu Bar, Spry Tabbed Panels, Spry Accordion, and Spry Collapsible Panels, which improve the visual aspects and general aesthetics of your website. To give you an idea as to how these layout widgets can be used, 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 option from the Layout list, and click Create. A new document window instance will appear. Immediately place your cursor on the page were you want the Spry Tabbed Panels widget to appear. 2. Choose Insert, Spry, Spry Tabbed Panels. The Spry Tabbed Panels widget is inserted onto the page similar to Figure 30.13. Figure 30.13. The Spry Tabbed Panels widget is inserted onto the page. [View full size image]
  8. 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 can uniquely 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 selecting the panel name from the Default panel menu. For example, click the Add (+) panel button to add a new 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 look and functionality of the Spry Tabbed Panels widget. Click OK. Preview your page in the browser by pressing F12 (Option+F12). You'll notice that three tabs appear, each containing its own panel of content. Select each tab to navigate through the panels. Although the Property inspector allows you to add, remove, reposition, and set the default panel that should appear, customization for the panel can be handled by modifying the tabs/panels within the Document window. For instance, if you'd like to change the tab name, highlight the text within the tab and begin typing. Furthermore, if you'd like to modify the content within the panel, highlight the default placeholder text 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 widget within 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.
  9. To modify a particular class, either select the class and modify the properties from within the Properties pane 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 Panels widget. To work with the Spry Accordion, the Spry Menu Bar, or the Spry Collapsible Panel, insert them as you did the Spry Tabbed Panels. Customizing the CSS and modifying the properties for the panel can be done 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]
  10. Working with RSS Feeds Quite possibly one of the hottest trends, aside from web services, is that of RSS. Originally developed by Netscape, Really Simple Syndication (RSS) is an XML format for syndicating web content. A website that wants 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. Although numerous 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, consuming RSS 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) is 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 the browser 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 Select it and choose Edit, Copy. You'll need to paste this path into the Locate XML Source dialog in Dreamweaver in a moment. You can now close the browser.
  11. 4. Shift your attention back to Dreamweaver. Create a new XSLT (Entire Page) document by choosing File, New. Select the XSLT (Entire Page) option from the Blank Page category and click Create. The Locate XML Source dialog appears. 5. Select the Attach a Remote File on the Internet option button and paste the path 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 between each 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 XPATH Expression Builder (Repeat Region) dialog appears. 8. Select the item node within the schema tree and click OK. A Repeat Region visual aid surrounds the dynamic text elements within the XSL page. Save your work and test the results in your browser by pressing F12 (Option+F12). Slick Deals' feeds are now presented to you within the browser, similar to Figure 30.18. Figure 30.18. Slick Deals news feeds are shown in the browser. [View full size image]
  12. Your design doesn't have to stop here. As you'll notice, the feeds as they're displayed in the browser don't look very attractive. Instead, you might decide to format the bindings within the page to make them more attractive and aesthetically pleasing.
  13. Summary 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 definite promise. With the capability to quickly and effortlessly generate XML datasets and bind the data contained within those datasets to regions within the page, Spry makes working with Ajax exciting and fun. Combine this 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 about this newest platform for Ajax.
  14. Online Appendixes Appendix A. Accessibility Appendix B. Extending Dreamweaver Appendix A. Accessibility IN THIS APPENDIX Accessibility Standards Accessibility Reference There is an implicit promise in the name of the World Wide Web—the promise of an information network that can be used by everyone around the world. The web succeeds at what it does because of its universality. A web document is written in one or more web languages designed to be cross-platform and interoperable with a wide variety of technologies. Clearly, the Web is designed to be open to a broad range of users, and that's where things start to get tricky! The average web user of moderate means in North America or Europe has a decently fast computer, a full-color monitor, a keyboard, a mouse, speakers, and a high-speed modem or a faster connection. But that's just the average user—and people tend to be scattered all over the range of possibility, rarely 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 users who 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 that site. If you're concerned only about those with the latest version of your favorite browser and the fastest hardware and connection, there's no guarantee that you'll make a website that can be used by anyone who falls outside of those parameters. There's a very large group of users who tend to fall outside of nearly everyone's target audience when developers 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 visual layout 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 a mouse. Pages with complex text that lack illustrations and summaries are very difficult for users with cognitive 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 for web access. However, these tools will work with your site only if you've carefully built your sites to allow access.
  15. Tip To learn more about how people with disabilities access the Web, visit the site of the International Center for Disability Resources on the Internet, at 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 people with 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 no barriers to access. Dreamweaver makes it even easier for you to follow those standards because they're built right into the software itself. By using Dreamweaver's accessibility features to create and check your work, you can greatly 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 major players 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 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 Web Standards Project at, 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 the WAI produced standards for accessibility. Web Content Accessibility Guidelines For web developers, the most important WAI standards are contained in the Web Content Accessibility Guidelines, 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 the W3C's website at
  16. 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 for guideline 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 will exclude members of your audience with specific disabilities. Priority 2 checkpoints are designed to reduce the difficulty of access by people with disabilities, and priority 3 checkpoints actively improve the quality of access 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 with WCAG. Meeting all priority 1 and 2 checkpoints grants your site Double-A status, and successfully meeting all the checkpoints qualifies a site as Triple-A level. WCAG compliance levels have been accepted by many public and private organizations as the minimum requirement for sites they control. For example, California community college websites must meet at least WCAG Double-A standards.
  17. 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 most government 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 requirements simply as Section 508. The aim of Section 508 is to ensure that government information technology is accessible to people with disabilities—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 few modifications. 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 Which Standard to Follow? It's been said that the great thing about standards is that there are so many to choose from. Despite the humor of this statement, there's still some truth to it—there's not one universal standard for accessibility but 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 the other standard is met. The Double-A and Triple-A WCAG standards are harder to meet because they go beyond basic accessibility and 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 websites are unregulated, and thus you can select your level of compliance. Many commercial sites will aim for Single-A compliance, but Double-A compliance improves site access for disabled users or employees. Private organizations or corporations that provide services to people with disabilities will want to achieve Triple-A compliance. As mentioned previously, public sector websites may have legal requirements for accessibility, depending on the 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, must meet WCAG Double-A. Your organization's legal or disability officer can advise you on specific regulatory obligations that apply to your website. Conform with Standards Conforming with accessibility standards provides many benefits. Besides reducing your potential legal complications (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 a site 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,
  18. including ATMs, set-top boxes (like your cable or satellite box), Internet appliances (WebTV), and personal digital assistants (PDAs). The same techniques that guarantee access for nonvisual browsers also improve access 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 can use 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 onscreen keyboards. Assistive technologies are usually innovative and clever approaches to overcoming obstacles, but like any computer feature, they can work only with what they're given in terms of information. If a Braille terminal encounters an image that isn't labeled properly (with an alt attribute), it cannot tell automatically if the image is a spacer GIF, a simple decoration, an important piece of content necessary for understanding the page, or a banner ad. As the author of a web page, you can provide this necessary information so that assistive 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 Code View: body { font-family: Arial, Helvetica, sans-serif; font-size: 12px; margin: 0px; } .style1 { color: #993300 } Welcome to the Vecta Corporation Friday night was VectaCorp's annual "Concert at the Park". For those employees who missed the headlining band Spitalfield, below is a sample of what you missed.
  19. Listen to audio clip (531 KB) Brought to you by the distinguished Marketing department Question or comments? 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 black-and- white screenshot printed in the book. What would this site be like for blind users? To test, we'll use a text browser named Lynx and view the page. Lynx displays all web pages without images or colors, just as plain text. This is a useful approximation of what blind users experience when accessing a web page. Most users who can't see will use a screen reader program that reads out loud the text from a browser (such as
Đồng bộ tài khoản