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

258 Part II: HTML, XHTML, CSS, and Accessibility Secret #176: Add fieldset and legend to Forms The fieldset element combines your form controls into logical groups. The legend element defines the group. Separating form sections in this way helps increase the comprehension of the form. Listing 10-7 shows how fieldset and legend are used. Listing 10-7: Combining form controls into logical groups < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Information About Your Kitten

Name of kitten: Age of kitten: Breed of kitten:

Information About You

Your Last Name: Your First Name:

Figure 10-7 shows the visual results with the cues that help enhance understanding of the form sections.

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

Chapter 10: Adding Accessibility Features 257

Chapter 10: Adding Accessibility Features 257

Figure 10-6 shows how any optgroup within a menu is neatly and clearly organized. Figure 10-6: Using optgroup in menu selections helps organize those sections into logical groupings. tip Keep your label attribute values clear and simple to avoid any confusion.

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

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

256 Part II: HTML, XHTML, CSS, and Accessibility When using tabindex in form controls, the process is the same: simply add the tabindex attribute and value in the series you prefer, such as the following: Yes, send me information about feeding techniques. Yes, send me information about training techniques. Yes, send me information about exercise techniques. Anyone tabbing through the preceding markup will tab to the last item first, the top item second, and the middle item last. Secret #175: Group Form Selections with select and optgroup The optgroup element helps you group form selections into logical chunks. This assists with the clarity of a document, which is generally helpful as well as especially important when authoring documents for the learning disabled or those with other cognitive problems. In this example, I ve broken down the breeds of cat by location. The element relies on the label attribute (note that this is significantly different from the label element) to define the group name. The resulting menu provides greater clarity for the site visitor (refer to Listing 10-6). Listing 10-6: Grouping form selections < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Which cat breeds have you considered?

Chapter 10: Adding Accessibility Features 255

Chapter 10: Adding Accessibility Features 255 Secret #174: Index Link and Form Controls Using tabindex The tabindex attribute allows you to add a specific order to links and form controls. Many people who use assistive devices tab to links and form controls rather than using a mouse, as fewer movements are necessary. If you have a logically ordered document in terms of each link and form element following the next in a natural sequence, you won t have to use tabindex. However, should you wish to allow a site visitor fast access to links or form controls outside of a sequential flow, such as making navigation items on the page last in the list even though they might appear first, tabindex is the solution. The tabindex attribute can be used along with the following elements: a area button input object select textarea You then will assign a numeric sequence to each item on your page, and when the user presses the tab key, the tab will go to the next item in your sequence. Listing 10-5 shows a document using tabindex. Listing 10-5: Indexing tabs using tabindex within a series of links < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

The new cat owner must be prepared to feed, train, play with and give plenty of love to their new pet.

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

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

254 Part II: HTML, XHTML, CSS, and Accessibility Secret #173: Understand the accesskey Attribute The accesskey attribute makes it easier to navigate from the keyboard than from a pointing device such as a mouse. Essentially, you re creating keystroke combinations to provide a keyboard shortcut to a given element or form control. Your site visitors will hold down the Alt key and press the assigned accesskey value to get to the element or form control in question. The accesskey attribute can be used with the following elements: a area input button textarea label legend caption Listing 10-4 shows the accesskey attribute at work: Listing 10-4: Using the accesskey attribute < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Molly’s book list (Alt-B)

note You ll have noticed that I included a text reference (Alt+B) to indicate to my visitor that the link has been assigned an access key and can be reached quickly by using the keystroke combination.

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 253

Chapter 10: Adding Accessibility Features 253

I get so frustrated with my Windows 2000 OS sometimes.

This will result in the same dotted underline and tool tip containing the title attribute text (see Figure 10-5). Figure 10-5: Acronyms tagged with the acronym element will result in the tool tip appearing upon mouseover. warning Internet Explorer 6.0 does not support the abbr element. As a result, many accessibility specialists suggest using the acronym element in all cases. Of course, this is problematic because it goes against the semantics and is therefore a hack. Furthermore, acronym is going to be deprecated in XHTML 2.0. For an interesting discussion on the issue, including some excellent advice about using CSS along with acronyms and abbreviations for accessibility purposes, see Craig Saila s article HTML is Not an Acronym at www.evolt.org/article/HTML-is-not-an-acronym/17/35750/.

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

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

252 Part II: HTML, XHTML, CSS, and Accessibility attention to the fact that the term is an abbreviation and more information is available (see Figure 10-4). Figure 10-4: Abbreviations tagged with the abbr element will appear with a dotted underline. tip You can modify the style of the default underline using CSS. Secret #172: Using the acronym Element for Acronyms The acronym element is applied exactly as the abbr element is, but is reserved for use with acronyms, as illustrated in Listing 10-3. Listing 10-3: Using the acronym element < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

Chapter 10: Adding Accessibility Features 251

Chapter 10: Adding Accessibility Features 251 tip Using the title attribute not only helps with accessibility, but helps with search engine ranking too. A happy side effect of using title attribute descriptions is that you can have additional keywords within a title attribute, helping leverage your site rank effects. For more information on search ranking, see Chapter 14. Secret #171: Using the abbr Element for Abbreviations Acronym? Abbreviation? What s the difference? This is an area of great debate as it pertains to markup. Both elements emerged at around the same time but were implemented differently between browsers during the addition of accessibility elements in HTML 4.0. So you now have two elements: abbr and acronym. You use them in exactly the same way, but have to determine which is an abbreviation and which is an acronym in a given circumstance. Abbreviations are typically defined as a shortened word formed from a complete word, such as Win for Windows. Acronyms are typically defined as being formed from letters or components of a compound term, such as OS for Operating System. To use the abbr element, simply place the content in the tags, and use the title attribute to write out the abbreviation, as shown in Listing 10-2. Listing 10-2: Using the abbr element < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

I was in the middle of writing this chapter on my Win machine when it crashed.

When the user s mouse passes over the term Win , a tool tip will appear with the complete term. Many Web browsers also provide a dotted underline, bringing

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

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

250 Part II: HTML, XHTML, CSS, and Accessibility Listing 10-1 shows how. Listing 10-1: Adding the title attribute to links < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

The new cat owner must be prepared to feed, train, play with and give plenty of love to their new pet.

Figure 10-3 shows a sample of this markup with the mouse passing over one of the links. The tool tip appears with the additional information. This feature exists in all contemporary browsers. Figure 10-3: Additional title attribute information within a tool tip. Note how the Opera browser also displays the title attribute information in the browser status bar upon mouseover.

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 249

Chapter 10: Adding Accessibility Features 249 D inside square brackets, as follows: chart of cat breeds by country[D]. This way, any browser or user agent that can support the longdesc attribute will, and a link will be available in either case to the additional descriptive information. Secret #169: They re NOT alt Tags! The alt attribute is one of the first accessibility features to have found widespread support early on in terms of specifications and browsers. And somehow the term alt tag became part of our professional gloss. It s very important to learn proper terminology, to use it, and to continue learning it and modifying the way we speak to foster better communications between ourselves, fellow team members, and our clients. The alt attribute is available for use with a number of nontext elements, including applet (which is deprecated in HTML 4.0), area, img, and input. The goal of the text is to provide a replacement description of the object in question, as in the following example: photo of an adult Abyssinian cat If the image is of a complex nature, such as a graph or chart, and a short description is not possible, you can provide alternate content by following the guidelines discussed previously in this chapter. warning While you shouldn t be using spacer graphics at this point, if you do, you may wish to include the alt attribute but leave the value empty, alt=””. This way, your document will conform and no unsightly [image] placeholder will appear. Using the term spacer is a poor choice because screen readers will read the alt text, so if you have a lot of spacer graphics in your document identified that way, the visitor will hear spacer spacer spacer spacer instead of your content! Secret #170: Use the title Attribute in Links The title attribute allows you to add extra context to your links without detracting from the flow of your content. In Chapter 4, Making Sites Usable and Persuasive, I discussed how important it is for links to be descriptive. But descriptive links alone, while helpful, can be limiting. The title attribute lets you add more information about the link so the site visitor can have more contextual information should it be required.

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