Tự học HTML và CSS trong 1 giờ - part 62 ppt

ptg 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 exam- ple, they print an error on the page and change the font color to red to indicate that something went wrong. Unfortunately, visually impaired users can’t 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: <p class=“error”>ERROR: You must enter your full name.</p> 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 experi- ence if you set your fonts to an absolute size—particularly 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 inter- fere 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 the user can see the text at a comfort- able size. 586 LESSON 19: Designing for the Real World Be sure to test your pages with a variety of text size settings when you do browser testing. Many users change increase the size of fonts in the browser to make them easier to read, and you should make sure that if users have done so, your pages still work for them. CAUTION Download from www.wowebook.com ptg Take Advantage of All HTML Tags It’s easy to fall into the trap of using <i> or <b> rather than more specific tags when you need to add emphasis to something. For example, suppose 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 <i> tag, or you could use the <cite> 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 <em> and <strong> over <i> and <b>. 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 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 Frames are, to put it bluntly, a barrier to accessibility. There are some workarounds avail- able, but the bottom line is that if you’re concerned about accessibility, you should prob- ably 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 your frames, not just the docu- ment 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 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, too. Designing for Accessibility 587 19 Download from www.wowebook.com ptg Validating Your Sites for Accessibility There’s no reason to rely on luck when it comes to determining whether your site mea- sures up when it comes to accessibility. Just as you can use the W3C validator to verify that your HTML files are standards-compliant, you can use a number of validators to check your site for accessibility problems. Cynthia Says is one such validator, and you can find it at http://www.contentquality.com/. It can validate a site against the Section 508 guidelines mentioned earlier or against the Web Content Accessibility Guidelines developed by the W3C. Its operation is nearly identical to that of the HTML validator provided by the W3C. If you submit your page to the validator, it generates a report that indicates which areas of your page need improvement, and it provides general tips that can be applied to any page. Figure 19.2 shows a Cynthia Says report for Wikipedia. 588 LESSON 19: Designing for the Real World FIGURE 19.2 An accessibility report generated by Cynthia Says. Cynthia Says also links to the relevant standards in the validation results. In Figure 19.3, you can see the destination of one of the links, which points to a passage in the Web Content Accessibility Guidelines. Download from www.wowebook.com ptg FIGURE 19.3 The Web Content Accessibility Guidelines. Validating Your Sites for Accessibility 589 19 Cynthia Says is provided by HiSoftware, which produces software that helps manage compliance issues for web content. They support Section 508 compliance among other standards and regulations. Further Reading This lesson is the tip of the iceberg when it comes to handling accessibility on web- sites. If you’re going to make a commitment to creating an accessible site, you’ll probably want to research the issue further. Your first stop should be online accessi- bility resources. The W3C provides a huge body of information on accessibility as part of its Web Accessibility Initiative. The home page is http://www.w3.org/WAI/. If you maintain a personal site, you might also find Mark Pilgrim’s online book, Dive into Accessibility (http://diveintoaccessibility.org/), to be a useful resource. Plenty of other sites discuss accessibility, too. Just enter the word accessibility into your favorite search engine to get a list. There have also been several books written on web accessibility. Joe Clark’s Building Accessible Websites is well regarded. You can find out more about the book at the book’s website: http://joeclark.org/book/. Download from www.wowebook.com ptg Summary The Web is in a period of transition, from the almost universal adoption of XHTML 1.0 toward the new HTML standard: HTML5. In this lesson, I discussed how you can take a progressive approach, moving toward HTML5 without leaving people using current browsers behind. I hope you now realize that the needs of your visitors should affect the approach you use in your website design. The key is to anticipate those needs and try to address them as broadly as possible. Not every site has to be filled with multimedia that implements the latest and greatest web technologies. On the other hand, certain topics almost demand higher levels of page design. Listen to the needs of your visitors when you design your pages, and you’ll keep them coming back. Even though accessibility issues ostensibly affect only a small percentage of web users, they should not be ignored. Many accessibility-related improvements actually improve the web experience for most users. Leaving out disabled users by not accounting for them in your designs is inconsiderate and can often be a poor business decision, too. Adding accessibility features to an existing site can be challenging, but when you build new sites from scratch, making them accessible can often be done with little additional effort. If I’ve convinced you of the importance of accessibility in this lesson, you’ll prob- ably want to dig into the resources listed previously for more information. Workshop As if you haven’t had enough already, here’s a refresher course. As always, there are questions, quizzes, and exercises that will help you remember some of the most impor- tant points in this lesson. Q&A Q Feedback from visitors to my site varies a lot. Some want my pages to use less multimedia, whereas others want more. Is there an easy way to satisfy both of them? A You’ve already learned that you can provide links to external multimedia files. This is the best approach for visitors who want less multimedia because they won’t see it unless they click the link. You can also simply ask them which version of your site they want to see. I gener- ally recommend building a site that works well for users regardless of their connec- tion speed or browser capabilities, but in some cases it makes sense to create alternative versions of your site. You can start out with an entry page that allows 590 LESSON 19: Designing for the Real World Download from www.wowebook.com ptg your users to choose between the different versions of the site, or you can start out with the fancier page and provide a link to the text version that shows up regardless of their browser’s capabilities. Q I use a lot of external files on my website, and they can be downloaded from several different pages. Wouldn’t it be more efficient to include a link to the correct readers or viewers on the pages where the external files appear? A Although it’s much easier for the visitor to download an external file and the appropriate reader or helper application from the same page, it might be more diffi- cult for you to maintain your pages when the URLs for the helper applications change. A good compromise is to include a Download page on your website with links to all the helper applications that the visitor will need. After the visitor down- loads the external file, she can then navigate to your Download page to get the helper application she needs to view that file. Q If I don’t make my site accessible, what percentage of my audience will I lose? A Even if you weren’t wondering about this, there’s a good chance your boss proba- bly wants to know. Unfortunately, there’s no hard-and-fast number. I’ve seen it reported that 10% of the population has disabilities, but not all those disabilities affect one’s ability to access the Web. Q Can I run into legal trouble if I don’t bother with making my site accessible? A If you’re in the United States, the answer to this question is no, unless you’re working on a site for the federal government and are bound by Section 508. Quiz 1. How do real-world user needs vary? 2. What are some important things to include on your site to help those who are new to computers or the Internet? 3. What are two things you can do right now to start migrating to HTML5? 4. True or false: It’s better to have a lot of frames in a frameset because you can keep more information in the browser window at the same time. 5. True or false: To make a site truly accessible, no images can be used for navigation or links. 6. How should navigation be placed on a page to make it most accessible? 7. Name three attributes of tags aimed specifically at accessibility. Workshop 591 19 Download from www.wowebook.com ptg Quiz Answers 1. Different users will have different levels of experience. Browser preferences will vary. Some want to see a lot of multimedia, whereas others prefer none at all. Some prefer images and multimedia that are interactive, whereas others prefer sim- pler pictures that demonstrate a process or technique on how to do something. Other preferences are more specific to the interests of the visitors. 2. Include pages on your site that help tvisitors find the information they’re looking for. Also include pages that help them find their way around the site. 3. Two things you can do to start migrating to HTML5 are to start using the HTML5 DOCTYPE and to stop using the tags and attributes that were removed from HTML5 in your pages. 4. False. Too many frames can be confusing for new users, and they might be too small to be useful when they’re viewed at lower resolutions. 5. False; however, you must use the images in an accessible manner. 6. Navigation should be placed after the main content on a page to make it accessible with users who must navigate the page in a linear fashion. 7. Some attributes designed to improve accessibility are the title attribute of the <a> tag, the longdesc and alt attributes of the <img> tag, and the summary attribute of the <table> tag. Remember, though, that longdesc and summary have been removed from HTML5. It is recommended that their content be incorporated into the page in another way. Exercises 1. Design a simple navigation system for a website and describe it in a manner that makes sense to you. Then ask others to review it and verify that your explanations are clear to them. 2. Make a list of the topics that you want to discuss on your website. Go through the list a second time and see whether you can anticipate the types of people who will be interested in those topics. Finally, review the list a third time and list the special needs that you might need to consider for each user group. 3. Visit Cynthia Says, the accessibility validator, and see how your site rates against the accessibility guidelines. 4. Make sure that all the <img> tags on your site have alt attributes. It’s a good first step toward accessibility. 592 LESSON 19: Designing for the Real World Download from www.wowebook.com ptg LESSON 20 Putting Your Site Online Just uploading your site to a web server somewhere doesn’t mean that you’ll attract many visitors. With millions of sites online already, you’ll need to promote your site if you want to build an audience. So, how do you entice people to come to your site? This lesson shows you some of the ways, including the following: n What a web server does and why you need one n How to find web hosting n How to deploy your website n How to find out your URL n How to test and troubleshoot your web pages n Advertising your site n Submitting your site to search engines n Using business cards, letterheads, and brochures n Promoting your site on social networks n Using analytics to find out who’s viewing your pages Download from www.wowebook.com ptg What Does a Web Server Do? To publish web pages, you need a web server. The server listens for requests from web browsers and returns the resources specified in the URL in those requests. Web servers and web browsers communicate using the Hypertext Transfer Protocol (HTTP), a proto- col created specifically for the request and transfer of hypertext documents over the Web. Because of this use, web servers often are called HTTP servers. Other Things Web Servers Do Although the web server’s primary purpose is to answer requests from browsers, it’s responsible for several other tasks. You’ll learn about some of them in the following sec- tions. File and Media Type Determination In Lesson 12, “Integrating Multimedia: Sound, Video, and More,” you learned about con- tent types and how browsers and servers use file extensions to determine file types. Servers are responsible for telling the browsers what kinds of content the files contain. Web servers are configured so that they know which media types to assign to files that are requested so that the browser can tell audio files from HTML pages from style sheets. File Management The web server also is responsible for rudimentary file management—mostly in deter- mining how to translate URLs into the locations of files on the server. If a browser requests a file that doesn’t exist, the web server returns the HTTP error code 404 and sends an error page to the browser. You can configure the web server to redirect from one URL to another, automatically pointing the browser to a new location if resources move or if you want to retire them. Servers can also be set up to return a particular file if a URL refers to a directory on a server without specifying a filename. Finally, servers keep log files for information on how many times each URL on the site has been accessed, including the address of the computer that accessed it, the date and, optionally, which browser they used, and the URL of the page that referred them to your page. Web servers also keep a log of any errors that occur when browsers submit requests so that you can track them down and fix them. Server-Side Scripts and Forms Processing In addition to serving up static documents such as HTML files and images, most web servers offer the option of running scripts or programs that generate documents on-the- fly. These scripts can be used to create catalogs and shopping carts, discussion boards, clients to read email, or content management systems to publish documents dynamically. 594 LESSON 20: Putting Your Site Online Download from www.wowebook.com ptg Any website that you find that does more than just publish plain old documents is run- ning some kind of script or program on the server. A number of popular scripting plat- forms are available for writing web applications. Which one is available for your use depends in part on which web server you’re using. PHP is probably the most popular choice. It’s easy to get started with and runs on most servers. Other popular choices include Microsoft .NET, which runs on Windows, or Java Server Pages (JSP), which can run on most servers. Newer choices include Ruby on Rails and Django, both of which are frameworks that can be used to build web applications. Server-Side File Processing Some servers can process files before they send them along to the browsers. On a simple level, there are server-side includes, which can insert a date or a chunk of boilerplate text into each page, or run a program. Also, you can use server-side processing in much more sophisticated ways to modify files on-the-fly for different browsers or to execute small bits of code embedded in your pages. Authentication and Security Password protection is provided out-of-the-box by most web servers. Using authentica- tion, you can create users and assign passwords to them, and you can restrict access to certain files and directories. You can also restrict access to files or to an entire site based on site names or IP addresses. For example, you can prevent anyone outside your com- pany from viewing files that are intended for employees. It’s common for people to build custom authentication systems using server-side scripts, too. For security, some servers also provide a mechanism for encrypted connections and transactions using the Secure Sockets Layer (SSL) protocol. SSL allows the browser to authenticate the server, proving that the server is who it says it is, and an encrypted con- nection between the browser and the server so that sensitive information between the two cannot be understood if it is intercepted. How to Find Web Hosting Before you can put your site on the Web, you must find a web server. How easy this is depends on how you get your access to the Internet. Using a Web Server Provided by Your School or Work If you get your Internet connection through school or work, that organization might allow you to publish web pages on its own web server. Given that these organizations usually have fast connections to the Internet and people to administer the site for you, this situation is ideal. How to Find Web Hosting 595 20 Download from www.wowebook.com . the almost universal adoption of XHTML 1. 0 toward the new HTML standard: HTML5 . In this lesson, I discussed how you can take a progressive approach, moving toward HTML5 without leaving people using. about this, there’s a good chance your boss proba- bly wants to know. Unfortunately, there’s no hard-and-fast number. I’ve seen it reported that 10 % of the population has disabilities, but not. your pages. Authentication and Security Password protection is provided out-of-the-box by most web servers. Using authentica- tion, you can create users and assign passwords to them, and you can