It’s amazing to think that despite the fact that the World Wide Web is in its infancy, access to it has become such an important part of our lives. In fact, access to the Web is quickly becoming not just a convenience, but a necessity.
This sense of necessity has largely driven the need for computer applications and Web sites to be accessible to people who may have hearing loss, low vision, or other disabilities. In fact, in 1998, Congress enacted the Workforce Investment Act, which consisted (in part) of an amendment to the Rehabilitation Act of 1973. That amendment was titled Section 508, and it has become synonymous with accessibility in the world of technology.
Note
Section 508 is not the only standard for accessibility, but it’s the only government-enforced standard. The W3C has devised the Web Content Accessibility Guidelines (WCAG) in an effort to enhance the accessibility of Web sites. Expression Web recognizes both Section 508 and WCAG.
Government agencies and most educational institutions are required to abide by Section 508 requirements. Not only does Section 508 specify requirements for Web sites, but also for multimedia, video, telecommunication products, and more. It is far-reaching legislation that affects most Web designers.
Accessibility doesn’t just refer to the ability of people with vision problems to experience a Web site via a screen reader. It also applies to proper color choice so that those with various types of color blindness can read your Web site and so on. It even prohibits design techniques that can cause screen flicker beyond a certain frequency. All in all, there are 16 rules that comprise Section 508 standards.
Note
For full details on all Section 508 rules regarding Web sites, see www.section508.gov.
There are many points to consider when designing your Web site to be accessible. Expression Web provides some user interface elements that are designed to keep you in compliance with accessibility requirements. Many other techniques require attention to detail and a touch of common sense when developing your site.
When creating a hyperlink in Expression Web, you’ll have the option of also specifying a screen tip by clicking the ScreenTip button in the Insert Hyperlink dialog, as shown in Figure 19.1.
When you click the ScreenTip button, the Insert Hyperlink ScreenTip dialog is displayed, as shown in Figure 19.2. Enter the text for the screen tip and click OK. When a user hovers over the hyperlink with his or her mouse, the text configured as the screen tip will pop up next to the mouse. Additionally, the text you enter will be read by a screen reader for those with visual disabilities.
Note
The ScreenTip feature in Expression Web is implemented using the title attribute of the hyperlink.
→ | For more information on inserting hyperlinks, see “Creating Hyperlinks,” p. 112 (Chapter 7). |
When creating a table, it’s often tempting to describe the table in the Web site’s text and then present the data without headers. However, Section 508 requires that all tables containing data must also contain header information. The table shown in Figure 19.3 is compliant with Section 508 guidelines.
Layout tables have no special requirements to meet Section 508 requirements.
Frames pages are a challenge for screen readers because a screen reader sees a frames page as two or more separate pages. There are a few general guidelines that you should follow in order to make frames pages more accessible.
Make sure that each <frames> tag in the frameset contains a title attribute that clearly defines the purpose of the page. For example, the following <frames> tags will aid in accessibility.
<frame title="Site Navigation" name="navframe" src="nav.htm" /> <frame title="Main Site Content" name="main" src="main.htm" />
You should also make sure that you include a proper DOCTYPE declaration on your frameset page. The following DOCTYPE declaration is what should be used on a frameset that conforms to the XHTML 1.0 standard.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Finally, you should make sure that you include a <noframes> section in your frameset.
→ | For more information on using frames, see “Using Frames,” p. 179 (Chapter 10). |
There’s no possible way to cover all accessibility topics in this chapter. However, in addition to the common issues we’ve already discussed, there are some general considerations to keep in mind as you develop a site.
Make sure to always provide some alternative representation for images, navigation elements, Adobe Flash animations, and any element implemented with client script. Expression Web provides user interface elements for ensuring that you meet the necessary requirements in this area. For example, when you insert an image onto a page, Expression Web displays the Accessibility Properties dialog shown in Figure 19.4.
Another item Web designers often overlook is that a Web site should be viewable without the application of any style sheets. For example, consider a Web site with white text inside a table styled with a black background using a style sheet. Because Internet Explorer uses white as a background color by default, the text for such as site would not be visible to anyone without CSS support. Not only is that a counter-productive design, but it also falls outside the Section 508 requirements.
The bottom line is that you should always think about accessibility when designing your Web sites. Many accessibility rules are based on common sense. However, no matter how much effort you put into making your sites accessible, you are bound to miss something. Thankfully, Expression Web provides an Accessibility Checker feature so you can locate accessibility problems and correct them before you deploy a site.
The Expression Web Accessibility Checker allows you to run reports on how well your Web site holds up to accessibility standards. The Accessibility Checker can check one or more pages (or your entire Web site) against WCAG and Section 508 requirements and provide you with a comprehensive report of the results.
To access the Accessibility Checker, select Tools, Accessibility Reports to display the dialog shown in Figure 19.5.
The Check Where section of the Accessibility Checker dialog lets you check all pages, all open pages, selected pages, or the current page for accessibility problems. The Check For section allows you to choose which standard(s) you would like to check your pages against. You can choose WCAG Priority 1, WCAG Priority 2, and Section 508 requirements.
Note
Priority 1 results are problems that must be corrected for a page to remain compliant with accessibility standards. A priority 2 result is one that should be corrected for maximum accessibility, but not doing so will not cause your page to fail validation.
The Show section provides a series of checkboxes that control how much information is displayed in the accessibility report. The following options are available:
Errors—. Represents problems that cause the page to fail accessibility requirements. Any errors must be corrected if the site is to fall within accessibility standards.
Warnings—. Represents areas of a Web page that may be problematic based on the content. You should review these areas for possible accessibility problems.
Manual Checklist—. Lists the general requirements for the selected standards. These are somewhat like reminders that are designed to ensure you are aware of the requirements imposed by the selected standards.
After you’ve made your choices in the Accessibility Checker, click Check to check the page(s). When the check is complete, Expression Web displays the results in the Accessibility task pane, as shown in Figure 19.6.
When many items are displayed in the Accessibility task pane, it can be convenient to arrange the listing. You can easily arrange the list any way you wish by right-clicking inside the task pane and selecting Arrange to access the menu shown in Figure 19.7. Choosing an item on the menu arranges the list by that category.
Additional options are available by right-clicking on a particular item. For example, for additional details on an item, right-click on the item and select Problem Details. Expression Web will display the Problem Details dialog (shown in Figure 19.8) with details on that item. This is useful not only to get a better understanding of the problem, but it can also provide hints on how to correct the issue.
If a particular item appears due to a WCAG checkpoint, additional information on that specific item can be obtained by either clicking the WCAG link in the Checkpoint column (shown previously in Figure 19.6) or by right-clicking on the item and selecting Learn More from the menu. Doing so will open your browser and take you to the W3C Web site, where you can read about the specific requirement, as shown in Figure 19.9.
To correct a problem or warning displayed in the Accessibility task pane, double-click on the entry. Expression Web will open the applicable page and select the code that caused the error or warning, as shown in Figure 19.10, so that it can be easily corrected.
In some cases, it may be convenient to save the results of the Accessibility Checker. Perhaps you are not the person responsible for correcting all the errors and warnings, or maybe you would like to correct the problems over time. Expression Web makes it simple to generate an HTML report of the Accessibility Checker’s results.
To generate an HTML report, click the Generate HTML Report button, as shown in Figure 19.11. Expression Web will create a new Web page for the report, as shown in Figure 19.12. If you’d like to keep the results for later, save the page to a desired location.
Not all of us are required to abide by Section 508, but all of us should. Considering the effort Web designers take to ensure that their Web sites render correctly in all browsers, it only makes sense that equal effort should go into ensuring that your Web sites are accessible to those with disabilities.
Many of us take for granted that everyone sees color the same way we do. In fact, many people do not. There are many forms of color blindness, and each of them can affect the way your Web site appears. However, because most of us see color accurately, making sure our Web site appears correctly to those with a form of color blindness is a tough job. Vischeck can make it a lot easier.
Vischeck (www.vischeck.com/vischeck/) offers a Web site where you can enter a URL and generate a view of what the URL looks like to people with various forms of color blindness. You can also upload an image file and Vischeck will provide a view of that image as it appears to someone with color blindness.
If you’d prefer, you can download a plug-in from Vischeck (free of charge) that allows you to run Vischeck’s algorithm on images from within Adobe Photoshop or another image-editing application that supports Photoshop plug-ins.
Choosing colors for your Web site is a critical task. You can avoid choosing colors in a vacuum by using Vischeck to ensure that your color choices make your Web site accessible.