Sams Teach Yourself Web Publishing with HTML and CSS in One Hour a Day (5th Edition) P65

will work, except that it not only boldfaces the text, it also indicates that it`s a level 4 heading. In screen readers or other alternative browsers, that might cause confusion for your users. Tables This problem is particularly acute when it comes to tables. I`ve already mentioned that it`s not a good idea to use tables for page layout when you`re designing for accessibility. Alternative browsers must generally indicate to users that a table has been encountered, and then unwind the tables so that the information can be presented to the user in a linear fashion. To make things easier on these users, you should use tables as intended where you can. Even if you can`t avoid using tables to lay out your page, be aware of how the table will be presented to users. If possible, try to avoid putting lots of navigation text and other supplemental text between the beginning of the page and the content the user is actually looking for. When you`re presenting real tabular data, it`s worthwhile to use all of the supplemental tags for tables that are all too often ignored. When you`re inserting row and column headings, use the tag. If the default alignment or text presentation is not to your liking, use CSS to modify it. Some browsers will indicate to users that the table headings are distinct from the table data. Furthermore, if you label your table, using the tag is a better choice than simply inserting a paragraph of text before or after the table. Some browsers indicate that the text is a table caption. Finally, using the summary attribute of the tag can be a great aid to users with alternative browsers. How you use the summary and caption are up to you. The caption can explain what the table contains, and the summary can explain how the data in the table is used if it`s not obvious from the row and/or column headings. Here`s an example of a table that`s designed for accessibility: file:///G|/1/0672328860/ch17lev1sec7.html (1 von 3) [19.12.2006 13:49:59]

Boston Consulting Group Product Portfolio Matrix

		Market Share
		High	Low
Market Growth	High	Star	Problem Child
	Low	Cash Cow	Dog

Links As mentioned in Lesson 16, "Writing Good Web Pages: Do`s and Don`ts," avoiding the "here" syndrome is imperative, particularly when it comes to accessibility. Having all the links on your page described as "click here" or "here" isn`t very helpful to disabled users (or any others). Just thinking carefully about the text you place inside a link to make it descriptive of the link destination is a good start. To make your links even more usable, you can employ the title attribute. The title attribute is used to associate some descriptive text with a link. It is used not only by alternative browsers, but many standard browsers will display a tool tip with the link title when the user holds her mouse pointer over it. Here are some examples: dmoz Special Report Navigational links are a special case because they usually come in sizable groups. Many pages have a nice navigation bar right across the top that`s useful to regular users who are able to skim the page and go directly to the content that they want. Users who use screen readers with their browsers and other assistive technologies aren`t so lucky. You can imagine what it would be like to visit a site that has 10 navigational links across the top of the page if you relied on every page being read to you. Every time you move from one page to the next, the navigation links would have to be read over again. There are a few ways around this that vary in elegance. If you`re using CSS to position elements on your page, it can make sense to place the navigational elements after your main content in your HTML file, but use CSS to position them wherever you like. When a user with a screen reader visits the site, he`ll get the content before getting the navigation. Another option is to include a link on your page that enables the user to skip past the navigationyou can use CSS to hide this link from users who can see the page, leaving it in place for disabled users who can benefit from it. Tip It`s worth remembering that many disabled users rely on keyboards to access the Web. You can make things easier on them by using the accesskey and tabindex attributes of the tag to enable them to step through the links on your page in a logical order. This is particularly useful if you also include forms on your page. For example, if you have a form that has links interspersed in the form, setting up the tabindex order so that the user can tab through the form completely before he runs into any links can save him a lot of aggravation. This is the sort of convenience that all of your users will appreciate as well. Images Needless to say, images are a sticky point when it comes to accessibility. Users with impaired vision file:///G|/1/0672328860/ch17lev1sec7.html (2 von 3) [19.12.2006 13:49:59] may not be able to appreciate your images at all. However, clever design and usage of the tools provided by HTML can, to a certain degree, minimize the problem of image usage. Images are known for having probably the best-known accessibility feature of any HTML element. The alt attribute has been around as long as the tag and provides text that can stand in for an image if the user has a text-only browser or the image wasn`t downloaded for some reason. Back when everybody used slow dialup connections to the Internet, it was easy to become intimately familiar with alt text because it displayed while the images on a page downloaded. Later, some browsers started showing alt text as a tool tip when the user let her mouse pointer hover over an image. Despite the fact that alt text is useful, easy to add, and required by the XHTML 1.0 specification, many pages on the Internet still lack meaningful alternative text for most (if not all) of their images. Taking a few extra minutes to enter alt text for your images is a must for anyone who uses HTML that includes images. Also bear in mind that using alt="" is perfectly valid and is sometimes appropriate. In particular, some sites use very small images to help position elements on a page. Although this practice is strongly discouraged, it`s still used. Text-based browsers will, in the absence of alt text, generally display something like [IMAGE] on the page. If you include the alt attribute but leave it empty, the label IMAGE will be left out, making things easier on your users. HTML also provides an another way of describing images that`s meant to improve accessibility: the longdesc attribute of the tag. The longdesc attribute is intended to be used as a place to enter long descriptions of images. For example, if an image is a chart or graph, you can explain how it is used and what information it is intended to convey. If the picture is a nice photo of a waterfall, you can describe the waterfall. In many cases, images are used simply to make web pages flashier or aesthetically pleasing, and nothing more than alt text is required. However, when the actual meaning of a page is conveyed through the use of images, providing descriptions of those images is a key to accessibility. For example, let`s say that you`re working for a financial publication, and a story on the declining stock market includes a graph showing the consistent decline of the major indexes over the past few years. In print, that image would probably include a caption explaining what`s in the image. On the Web, you could put that caption in the image`s longdesc attribute. Or, if you prefer, you could put it on the page as a caption, as long as your layout indicates in some way that the caption refers to the image in question. Here`s an example of what I`m talking about: There`s one final area to discuss when it comes to imagesthe marriage of images and links in the form of image maps. As you might imagine, image maps can be a major accessibility issue. The only way around this is to provide users with an alternative to imagemaps in the form of text links. Whenever you use an image map, you should make sure to include text equivalents of the links somewhere on the page. file:///G|/1/0672328860/ch17lev1sec7.html (3 von 3) [19.12.2006 13:49:59] Designing for Accessibility Just as important as taking advantage of the HTML features provided specifically for accessibility is taking care to design your pages in a manner that`s as accommodating as possible for users who are in need of assistance. Most of these techniques are relevant to all users, not just those using alternative browsers or assistive technologies. Use Color A common pitfall designers fall into is using color to confer meaning to users. For example, they print an error on the page and change the font color to red to indicate that something went wrong. Unfortunately, visually impaired users won`t be able to distinguish your error message from the rest of the text on the page without reading it. Needless to say, putting two elements on the page that are the same except for color (such as using colors to indicate the status of something) is not accessible. You can add borders to elements that need to stand out, or you can label them with text. For example, you might display an error message this way:

ERROR: You must enter your full name.

Fonts When you specify fonts on your pages, you can cause accessibility problems if you`re not careful. In some cases, font specification doesn`t matter at all because the user accesses your site with a screen reader or alternative browser that completely ignores your font settings. However, users who simply see poorly can have an unpleasant experience if you set your fonts to an absolute sizeparticularly if you choose a small size. If a user has set his browser`s default font to be larger than normal, and your pages are hard coded to use 9-point text, that user will probably dump your site altogether. In many cases, it makes sense to leave the default font specification alone for most of the text on your site. That way, users can set their fonts as they choose, and you won`t interfere with their personal preferences. If you do modify the fonts on the page, make sure that the fonts scale with the user`s settings so that they can see the text at a size that is comfortable for them. Take Advantage of All HTML Tags It`s easy to fall into the trap of using or instead of more specific tags when you need to add emphasis to something. For example, let`s say you`re citing a passage from a book. When you enter the book title, you could indicate to your users that it`s a proper title by putting it inside the tag, or you could use the tag. There are plenty of other underutilized tags as well, all of which provide some semantic meaning in addition to the text formatting they`re associated with. Even in cases in which you really just want to emphasize text, it`s preferable to use and over and . These tags provide a lot more meaning than the basic text formatting tags that are often used. Not all alternative browsers will take advantage of any or all of these tags, but conveying as much meaning as possible through your choice of tags won`t hurt accessibility for sure, and will help some now and could help more in the future. There`s no downside to taking this approach, either. Frames and Linked Windows file:///G|/1/0672328860/ch17lev1sec8.html (1 von 2) [19.12.2006 13:50:00] Frames are, to put it bluntly, a barrier to accessibility. There are some workarounds available, but the bottom line is that if you`re really concerned about accessibility, you should probably avoid frames. Using linked windows and pop-up windows can also be a huge hassle from an accessibility perspective. If you opt to use frames, you should include titles for all of your frames, not just the document containing the frameset. Using regular browsers, the titles of these documents are suppressed. That`s not necessarily the case with alternative browsers. Some will provide links to the individual frames when you pull up the frameset, and having titles makes it easier for users to distinguish between them. Forms Forms present another thorny accessibility issue. Nearly all web applications are based on forms, and failure to make them accessible can cost you users. For example, large online stores have a serious financial interest in focusing on form accessibility. How many sales would Amazon or eBay lose if their sites weren`t accessible? Some work on making sure the forms that enable you to purchase items are accessible can really pay off. One key thing to remember is that disabled users often navigate using only the keyboard. As I mentioned when talking about links, assigning sensible tabindex values to your form fields can really increase both the usability and accessibility of your forms. The other advanced form tags, such as fieldset, optgroup, and label, can be beneficial in terms of usability as well. file:///G|/1/0672328860/ch17lev1sec8.html (2 von 2) [19.12.2006 13:50:00] ... - tailieumienphi.vn