268 Part II: HTML, XHTML, CSS, and Accessibility

268 Part II: HTML, XHTML, CSS, and Accessibility Checking out your sites using the software is a very sobering experience, so I highly recommend it. The pricing on professional JAWSis upwards of U.S. $1,000.00, and the standard version is just under that price. note For the free JAWS demo, see www.freedomscientific.com/ fs-downloads/jaws-form.asp. Additional information on professional screen reader software and other assistive software and hardware is available on the site, too. Summary While this chapter covered many techniques that will enable your sites to be more accessible, it is in the testing phase that you will ultimately learn more about how to be effective at accessibility. One of the strongest criticisms about accessibility testing and validation is that a lot is still left to the discretion of the designer: Use of color, for example, is rarely tested or validated, yet we all know that colors can cause all kinds of problems for people who are color blind. Creating accessible sites is ultimately a balance between technique and practicality. If you rea little weary of code, it stime to brighten things up a bit. The next several chapters deal with visual design, rich media, and keeping Web sites fresh.

Note: If you are looking for good and high quality web space to host and run your application check Lunarwebhost JSP Web Hosting services

Chapter 10: Adding Accessibility Features 267

Chapter 10: Adding Accessibility Features 267 So, use these validators as you would grammar or spell-checking as a tool to expand on your existing knowledge. Table 10-1 describes the most common accessibility validators and their features. Table 10-1: Accessibility Validators and Common Features Accessibility Validator Features URL Bobby Very widely used, easily configurable products for online validation as well as standalone products for accessibility tests http://bobby.watchfire .com/bobby/html/en/index .jsp A-Prompt Free, downloadable testing tool. Configurable for W3C performance and Section 508 http://aprompt.snow .utoronto.ca/ LIFT Collaborative, team-based accessibility software that tests for accessibility and helps manage workflow, complete with plug-ins for programs such as Dreamweaver and FrontPage www.usablenet.com/ Cynthia Says Designed to detect problems with Section 508 compliance and WCAG guidelines. Test online or buy the standalone validator. www.cynthiasays.com/ Secret #182: Testing with Lynx Another quick, handy way to test for accessibility is to test with Lynx, a completely text-only browser. It is available for multiple platforms, including Windows, although it does require some setup. Lynx runs from a prompt and displays Web pages as text, as you saw in the introduction to this chapter. You can download Lynx from http://lynx.browser.org/. You llalso find some online help available to assist you with setting up Lynx on your system. note If you want a GUI-based sorta-like-Lynx look at some pages while online, check out the Lynx Viewer at www.delorie.com/web/lynxview.html. Secret #183: Testing with Screen Reader Software Ever wonder what a Web page sounds like to your visually challenged viewers using screen reader software? If you re working on a Windows machine, you can install a free demo of JAWS. It s a full-featured product, but you can only use it for 40 minutes at a time.

Note: If you are looking for good and high quality web space to host and run your application check Lunarwebhost PHP Web Hosting services

266 Part II: HTML, XHTML, CSS, and Accessibility

266 Part II: HTML, XHTML, CSS, and Accessibility Listing 10-12: (continued) <body> <p>Your web browser does not support frames. This site also has <a target="_blank" href="accessible.html" title="go to the accessible content">alternative, accessible content</a>.</p> <p> </body> note The only time a body element can appear within a frameset document is within the noframes element. Of course, a browser that supports frames will, unless otherwise configured by a site visitor, interpret the frameset whether the noframes content is there or not, making that content pretty darned inaccessible anyway. While you can enhance accessibility using attributes such as title and name (or id) for every frame, and using additional elements and attributes for accessibility described in this chapter, the general rule of thumb is to avoid frames altogether. Some designers choose to have an entry page where they offer a link to nonframed, alternative content. note For more information about frames and accessibility, see www.wac.ohio-state.edu/wac/webaim/frames.htm. Secret #181: Testing with Accessibility Validators Using validators for accessibility checks is an important part of the testing process. However, some controversy exists as to whether these validators are as intuitive as they need to be. For example, I passed a page through one validator only to be considered invalid because I d used the words blue and pink in the document. The validator thought I was using color to convey information, when I was actually writing about color.

Note: If you are looking for good and high quality web space to host and run your application check Lunarwebhost Java Web Hosting services

Chapter 10: Adding Accessibility Features 265

Chapter 10: Adding Accessibility Features 265 elements and how they react in some screen readers at http://simon. incutio.com/archive/2003/09/13/screenReaders. Secret #180: Making Frames Accessible I was reading my friend Matt Mullenweg s site the other day. Matt is the developer of the WordPress Weblogging system and a co-author of the XHTML Friends Network (XFN), an extension of XHTML used in social networking. cross ref See Chapter 13, Keeping Sites Fresh and Engaging, for more information. He had a few personal points on the site, the first one being, I have done some terrible things in my life but I have never made a site with frames. After I picked myself up off the floor from laughing so hard, I gave the issue some consideration. When frames first became available, they were browser-based, proprietary constructs. Since we d never seen anything like that for the Web, for a time framed sites were all the rage. I myself have built more framed sites than I can count, but all prior to 1998. Part of the problem with frames is that they go against the very premise of markup their job is presentational. Other problems concern the ability to properly bookmark frame-based pages, navigate back and forth using browser controls, and limiting screen space even further by breaking available space into smaller boxes. While there are some reasonable applications for frames, they are limited and are in very minimal use at this point despite the fact that frameset and frame elements are standardized within HTML and XHTML frameset DTDs. The best advice when it comes to making frames accessible, take Matt s sarcastic comment and places it in a cold, harsh light: don tuse them. For the most part, the Web will be a better place if you avoid them altogether. Should you decide to use frames, you can make them accessible by including noframes content. This allows for browsers without frame support to display a complete page s contents without the frames, but you have to set this content up, essentially maintaining multiple versions of a given document to achieve your goal. Listing 10-12 shows a sample frameset with the noframes content. Listing 10-12: Using noframes in a frameset document < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> (continued)

Note: If you are looking for good and high quality web space to host and run your application check Lunarwebhost JSP Web Hosting services

264 Part II: HTML, XHTML, CSS, and Accessibility

264 Part II: HTML, XHTML, CSS, and Accessibility In your CSS, add the class for the skip link, and hide the link, as follows: .skiplink { display: none; } This hides the link completely from the visual display, but those accessing the site using assistive devices will be able to choose it. Listing 10-11 shows a mockup page with everything in the correct order. I ve used embedded style to add the style class; ordinarily, this will likely be placed in an external or imported sheet. Listing 10-11: Ordering skip links < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Because of varying browser support for the display property in CSS, some accessibility specialists say you should try to leave the link visible, as this will allow all users to access it. Other designers add a hover feature so that a link becomes visible when the mouse passes over it. Whether you choose to use skip links, and how you choose them, will be based on your site s needs. note If you do use skip linking, be sure to implement it on every page of your site consistently. What s more, learn about potential problems with hidden

Note: If you are looking for good and high quality web space to host and run your application check Lunarwebhost JSP Web Hosting services

Chapter 10: Adding Accessibility Features 263

Chapter 10: Adding Accessibility Features 263 Secret #179: Consider Using Skip Links Skip links are a technique that allows users (not just those interested in accessibility) to skip over navigation systems that might appear between the user and the main content. This gets the user directly to the content. If you view your site in a text-based browser or with style sheets turned off and find that your navigation appears prior to your content (as shown in Figure 10-9), you may wish to consider using skip links. Figure 10-9: Navigation in this instance appears before the content. In skip linking you use a standard anchor link referenced to an intrapage link. Then, you add some CSS to hide the link. Screen readers will read the skip link first, allowing users to jump ahead to content at their discretion. First, create the skip link and name the target. The skip link should appear first in the body portion of your documents: Then, create the intrapage link target, placing it right above where content starts: note If you re using HTML 4.0, the name attribute for your anchor is fine. However, in XHTML 1.0, it s recommended to use both the name and id, such as . In XHTML 1.1, the name attribute has been replaced completely by id, so you d write .

Note: If you are looking for good and high quality web space to host and run your application check Lunarwebhost Linux Web Hosting services

262 Part II: HTML, XHTML, CSS, and Accessibility

262 Part II: HTML, XHTML, CSS, and Accessibility Figure 10-8: Captions will always appear above the table. Here, I ve added borders to the table so you can see the relationship more effectively. Listing 10-10: (continued)

Feeding Schedules for Kittens
Column content Column content

While summaries do not appear as text on the page, as captions do, they are used by supporting screen readers and other accessibility software, and in some browsers summary values will appear when the mouse hovers over the table. tip While ideally you ll use both captions and summaries to make your data tables more accessible, most experts feel that if you decide not to use the caption element because it displays text you might not wish to have displayed on your page, you should at least include the summary attribute and table description.

Note: If you are looking for good and high quality web space to host and run your application check Lunarwebhost Unix Web Hosting services

Chapter 10: Adding Accessibility Features 261

Chapter 10: Adding Accessibility Features 261 Listing 10-9: Summarizing and captioning data tables < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Feeding Schedules for Kittens
Column content Column content

The element contents appear above the table (as shown in Figure 10-8), adding more information and clarity as to the purpose of the table. The summary attribute is used within the table element and is a means of summarizing the table s purpose and structure. This assists those users who can t see the table to understand how it s laid out and what its purpose is (refer to Listing 10-10). Listing 10-10: Summarizing a data table < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> (continued)

Note: If you are looking for good and high quality web space to host and run your application check Lunarwebhost Unix Web Hosting services

260 Part II: HTML, XHTML, CSS, and Accessibility

260 Part II: HTML, XHTML, CSS, and Accessibility Listing 10-8: (continued)

Information About Your Kitten

Information About You

note The value of the for attribute must have a corresponding id value within the control being labeled. Secret #178: Summarize and Caption Data Tables Whenever you use data tables, provide a summary and caption for those tables using the caption element and summary attribute. The caption element describes the nature of the table, as shown in Listing 10-9.

Note: If you are looking for good and high quality web space to host and run your application check Lunarwebhost Java Web Hosting services

Chapter 10: Adding Accessibility Features 259

Chapter 10: Adding Accessibility Features 259 Figure 10-7: Fieldset and Legend help provide visual cues to assist users in understanding and navigating forms more effectively. tip Always group your form sections logically, clearly identifying which section belongs to what type of questions. Secret #177: Using the label Element with Forms The label element (not to be confused with the label attribute discussed earlier) assists with the accessibility of forms by labeling form controls. This additional labeling provides information for screen readers and other assistive devices so they can more adequately describe the context of each form control. The label element works in tandem with the for attribute, in which you describe the purpose of the form control (see Listing 10-8). Listing 10-8: Using the label element < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> (continued)

Note: If you are looking for good and high quality web space to host and run your application check Lunarwebhost Java Web Hosting services