Hack 50. Quality-Assure Your Web Pages

Make sure your web development work is polished and professional.

Quality assurance (QA) is a vital part of any professional process, and today this must extend to web design. Using Firefox and the Web Developer extension, you can do some basic QA on code validity and page accessibility.

5.8.1. Ensure Code is Valid

Validating markup and CSS isn't an optional extra; it's an integral part of the development process. Only valid HTML and CSS can be guaranteed to work, now and in the future. Once you've installed the Web Developer extension [Hack #44], validation is also straightforward.

Load the page you would like to validate in Firefox and then validate both the HTML and CSS using the ValidationValidate HTML and ValidationValidate CSS menu items on the Web Development Toolbar. Note that these two menu items can only be used to validate documents that are online. Far handier are two items further down the menu: Validate Local CSS and Validate Local HTML. Use these to validate pages and stylesheets on your local hard drive.

Another handy item in this menu is Validate Links. Use this to check for broken links, but note that you can't do this with local files; they must be online pages.

5.8.2. Check Accessibility

Code validation is a black-and-white process: either something is valid or it isn't. Accessibility, on the other hand, has numerous aspects, some of which have implications for how pages appear in the regular browsers we are accustomed to developing for. Before you do anything, you need to decide which aspects of accessibility you are prepared to commit to. Once you've done this, Firefox and the Web Developer Toolbar have a number of features to help you make checking the accessibility of your pages a simple part of day-to-day coding.

5.8.2.1 S.508 and WAI accessibility

Links to validators that check compliance with the U.S. national S.508 legislation and the W3C's international Web Accessibility Initiative (WAI) Guidelines can be found in the Validation menu. See http://www.w3.org/WAI/ for supporting documentation. Both these links use the Cynthia Says web content accessibility checker.

If you're new to accessibility, these validators can come back to you with a report that seems pretty daunting. A simpler approach to accessibility is to start by looking specifically at some of the more basic accessibility problems.

5.8.2.2 Check those images

Plenty of people, for a whole host of reasons, browse with images turned off. Your pages need not look as stylish and attractive to these people as they are intended to be. You should, however, ensure that the content and functionality of the site is available to them. Go to the Images menu and check Hide Images. Then, go through and make sure you can do everything a user would expect to do on your page. At the most basic level, this means reading the content. Beyond that, make sure to check your navigation, confirm that any forms are still reachable, and make sure any glitches in the layout aren't actually hiding content.

Simply removing images from problematic pages isn't a fair test of what most users who aren't seeing your images will get. By and large, they'll be able to take advantage of the alt attribute, if you've provided it. Judicious use of the alt attribute on images is an easy way to improve accessibility not just for people with images turned off, but also for those visiting your site using devices like screen readers. Most browsers display the content of the alt attribute when images are turned off, and screen readers read it out. There is simply no good reason to ignore it.

To check for use of the alt attribute, go to the Images menu and check the Outline Images Without Alt Attributes item. You need to get rid of all of the problems that show up, because people browsing with images off might miss something vital, and people using screen readers will hear the name of the image itself, which can be both useless and irritating. Choose the content of the alt attribute carefully. Leave it empty if the image is purely for decorative or layout purposes:

<img src="decorative_panel.gif" alt="" />

This zero-length string will be ignored by screen readers and won't be distracting for users browsing with images off. For other images, you should always add an alt attribute that is meaningful and descriptive. The Web Developer toolbar can help you test this as well. From the Images menu, check Replace Images with Alt Attributes. Go through and see how usable the page is. Better yet, get someone else to do it.

5.8.2.3 Check those links

The Web Developer Toolbar also lets you check that title attributes have been used on links. Choose Outline Links Without Title Attributes from the Outline menu. The title attribute can be used to give further information about the destination of links, because its content is shown by contemporary browsers as a tooltip. This is especially handy for providing more information on navigation bars. However, in terms of accessibility for screen readers, you should not see this as a solution to the problems created by uninformative link text such as this:

<a href="news/story_01.html">Read more</a>

While many screen readers do have a setting that will make them read out the content of the title attribute, by and large, this is not turned on by default, so most users will still be stuck with the uninformative "Read more." The only real solution to this problem, according to the WAI, is to make sure that linked text is meaningful enough to make sense when read out of context.

5.8.2.4 Slow downloads are still a big issue

Accessibility is not just about making your pages accessible to people with disabilities; it's about making them accessible to the widest possible audience. It's easy to lose sight of visitors who are still on low-speed dial-up connections, but showing some consideration for them is what makes the Web worldwide.

Load a page in the browser and go to View Speed Report in the Information menu. Again, your page needs to be uploaded before you can do this. The standout information on this page is the table of Download Times. Before you dismiss the displayed report as irrelevant, consider that as of December 2004, almost 50 percent of home Internet users in the United States are on 56K modems or less. And that's just one well-provisioned country. The site that gives you the speed report information (http://www.websiteoptimization.com) has excellent advice on improving the performance of your pages.

5.8.2.5 Not all screens are the same

Developers still need to design pages where all the content is visible if the page is viewed at 800 600, but the page also looks attractive at 1024 768. So you'll need to change between these two sizes all the time. The Resize menu comes with a default item, 800 600. Choose OptionsOptions...Resize to set up any other sizes that you might use frequently.

5.8.2.6 How will a nonhuman see your page?

Using CSS for page layout gives you much greater control over the order in which content appears in the HTML. Because the document's structure is separate from its presentation, content can be ordered logically. This has benefits not just for screen readers but for all sorts of devicessearch engine robots, for example.

Assuming you have done the right thing and put all your appearance information where it belongs, in the stylesheet, if you turn that stylesheet off, you get an idea of the order these devices will find. Do this by going to the Disable menu and checking Disable Styles.

This view is good for seeing how the top-level elements, headers, various navigation bars, main text blocks, footers, and so on will be approached. Firefox also has a handy tool for checking what will happen at a lower level. People who use screen readers often navigate through the text on a page by jumping through the headings. You can easily improve accessibility by making sure these headings are used correctly. From the Tools menu, choose DOM Inspector [Hack #53] and find your main body of text in the panel on the left. Without the distraction of content, it's easy to see if any errors have crept into what should be a logical hierarchy.

Maxine Sherrin