Universal Design Web Publishing

Web Page Authoring Style Tips

(* denotes Universal Accessibility aid)

Structure of HTML Documents

A good rule of thumb to follow when creating web pages is to concentrate on content structure rather than presentation by adhering to current web page publishing standards. This will ensure that your information is clearly presented, accessible, and can more easily be converted or adapted for emerging technologies.

More information:

World Wide Web Consortium (W3C) WAI Guidelines

HTML 4.0

HTML 4.0 is the latest HTML standard and it replaces HTML 3.2. HTML 4.0 extends the language with support for style sheets, internationalization deatures, scripting, frames, embedding objects, improved support for right to left and mixed direction text, richer tables, and enhancements to forms. Many of these enhancements provide improved accessibility for people with disabilities.

For the complete description:

W3C HTML 4.0 Specification.

Declaring the Document Type Definition (DTD) in Your Document

A valid HTML document declares what version of HTML is used in the document. The document type declaration names the DTD in use for the document. We recommend using the Transitional version since it includes support for everything in the strict DTD plus deprecated elements and attributes (most of which concern visual presentation). Below is the transitional 4.0 DTD that can be cut and pasted into your document. It should be the first line of the document, preceeding the <HTML> tag:

<DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
               "http://www.w3.org/TR/REC-html40/loose.dtd">

Note: the DTD must be included in the document in order to use the W3C HTML Validator.

Cascading Style Sheets (CSS)

CSS is a language that describes how documents are presented on screens, in print, or perhpas how they are pronounced. By attaching style sheets to HTML documents, authors can control the presentation of the documents without scrifincing device-independence or adding new HTML tags. 1

The HTML language was designed to structure technical documents for presentation on the World Wide Web. As the Web grew to include commercial and non-technical information, HTML authors tried to find ways of manipulating the language to do things it was never designed to do, most often to satisfy their desire to create visually stimulating, and graphically attractive pages. Then browser companies started creating their own proprietary tags to help satisfy author's desire to design flashy pages. This subverted the original intent of the HTML standard and created a nightmare for web authors and readers. The HTML language was becoming more and more complex, and pages were less and less likely to work in different browsers.

CSS is an attempt to correct this problem. It provides powerful presentation control without misusing HTML.

More information:

World WIde Web Consortium on Stylesheets

tables

Tables present problems for any non-graphical browser such as screen readers for the blind or automobile based personal computers. Tables should be used to present tabular data and should not be used for layout unless the table makes sense when linearized (one way to test this is to view the table in the Lynx text browser). To ensure that your tables work for the broadest audience, follow the W3C WAI Guidelines for tables.

graphics

The number of graphics on a page and the size of the graphics are the most common cause of painfully long page download times. This may not be apparent to you as the page author if you are working from within a high speed network like MITnet. Users coming from outside the network may be using slow phone connections and so have a very different experience using your pages. One way to check if your web page's download time is reasonable is to use the Bobby Accessibility Checker which returns download times for your page and for each graphic on the page at the bottom of its report. Users are likely to just give up and go elsewhere if your page is too slow. For this reason avoid gratuitous* or unneccessary graphics, particularly animated gifs.

What are gratuitous graphics?

(From the OED: gratuitous - Done, made, adopted, or assumed without any good ground or reason; not required or warranted by the circumstances of the case; uncalled-for; unjustifiable.)

Before you add that spinnning globe, dancing cartoon character, flashing logo, etc. to your page, ask youself "Is this going to aid the user in understanding the content of the page?" If the answer is "No", then the graphic should probably be left out!

Making your pages heavily dependent on graphics will also make the pages less likely to be accessible to users who have turned off the graphics in their browers because of slow internet connections, and will also cause problems for text-based browsers, such as Lynx, or screen readers used by those who are visually impaired.

Make the file size of the graphic as small as possible.

For GIF images, this means reduce the number of colors, and make whatever you can transparent. Because GIFs cannot use more than 256 colors, they are best for non-continuous tone images; i.e., almost anything other than photography. Make photographs and images with complex gradients JPEGs, a file format that can accomodate millions of colors. JPEGs generally have better compression than GIFs, but bear in mind that JPEG uses "lossy" compression; that is, the more you compress the image, the worse it will look. Compress your JPEG image a few different ways to see how you can maximize image quality while minimizing file size. Consider using thumbnails to link to larger images, so the viewer can choose which images he or she may want to see. For thumbnails, most browsers will inline GIFs, and some will inline JPEGs. When using thumbnails, list the file size of the target image so people can estimate how long it will take to download it. This rule also applies to video and sound clips.

colors

Ensure that text and graphics are understandable when viewed without color.

If color alone is used to convey information, people who cannot differentiate between certain colors and users with devices that have non-color or non-visual displays will not receive the information. When foreground and background colors are too close to the same hue, they may not provide sufficient contrast when viewed using monochrome displays or by people with different types of color deficits.2

alternate access for non-textual content

Use ALT tags for inline images. * 

The alt attribute is used by text browsers and when image loading is turned off. If the image is a part of the navigational interface of your page, then the alt attribute is critical. If the image is not part of the interface (i.e., it is not part of a link), then you should include an alt attribute, but its contents may be nil, i.e.,alt="".

If images are used in place of bullets in unordered lists, place an asterisk "*" or dash "-" in the ALT attribute of the IMG tag.*

Provide alternate mechanism for online forms.*

If you have created an online form that form may not be accessible to

Provide alternate navigation means for image maps.* (Jean)

Provide text transcripts or descriptions for auditory and visual content. (Do we need something here about streaming video and captioning?)* (Kathy)

Provide alternate formats for graphical documents such as PDF files.* (FAQ update - Jean)

(Still to be done)

    Include contact name and email address signature.*(Jean)

    Indicate last updated date. (?)

Common pitfalls to Universal Accessibility: