Firefox Hacks [Electronic resources] نسخه متنی

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="/image/library/english/10055_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.

h5

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=">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