The HTML 4.01 specification is found in full at http://www.w3.org/TR/html4/. We should be compliant at the "transitional document type" level.
The Web Content Accessibility guidelines are found in full at http://www.w3.org/TR/1999/WAI-WEBCONTENT-19990505/
As a practical matter, we should employ software agents that evaluate the code of a page and validate it as meeting appropriate criteria. These agents are available online, and can sometimes be downloaded and run locally. Examples of such validating agents are:
http://www.htmlhelp.com/tools/validator/
By using a validator, you can quickly check your work, and they will identify anything you are currently doing that is not acceptable. That is probably a more efficient way of getting going than reading through and trying to absorb the entire specification.
A good introductory article can be found at
http://www.hwg.org/resources/accessibility/sixprinciples.html
I have identified some general principles that should be followed to ensure compliance with the standards. These are also good coding practices. I recommend that they be followed in all Concordia College Web pages.
The source code for every Web page should begin with the following Document Type Declaration:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
This should appear above the <html> tag. This is required for proper validation of the source code.
Every image must contain an alternative description for the use text-to-speech parsers employed by the visually impaired. This description should in fact be descriptive of what the image is and the information it is conveying. If the image is conveying a lot of information, such as a graph, the longdesc attribute should be used to convey a larger amount of information.
Note that this principle extends to other multimedia objects. If you use sound files (like a recorded interview), you need to provide an alternative transcript. If you use a video file, you should provide a text description as well, and possibly captioning if the video file includes sound.
The transparent gif positioning hack should not be employed, as pixel-precise positioning is available using CSS techniques.
Tables should be used for presenting tabular data. Period. And they should be clearly developed with appropriate structural tags. Header cells should be identified as such using the <th> tag.
Many designers have been using tables as a hack to do page layout. This should not be employed any more since CSS positioning gives pixel-precise results.
Cascading Style Sheets (CSS) should be used for all page layout purposes. It should also be used for all presentational elements (fonts, sizes, colors) that affect text to the greatest degree possible. Unfortunately, since current browsers are not 100% compliant it may be necessary to occasionally include presentational elements in <font> tags to get proper results. This is allowed by the HTML 4.0 Transitional specification, and is the main reason for validating to that specification instead of the HTML 4.0 Strict specification.
To ensure uniformity, it is most practical to create a single external style sheet for the entire site, and link all pages to it. This is done easily by a line in the head section of the source code:
<link rel="stylesheet" href="sheetname.css">
The style sheet file itself is simply a text file. An example of a simple one is:
******************************************************************
h1 { font-family: Arial, Helvetica, sans-serif; font-size: 18pt; font-style: italic; font-weight: bold}
h2 { font-family: Arial, Helvetica, sans-serif; font-size: 16pt; font-style: italic; font-weight: bold}
h3 { font-family: Arial, Helvetica, sans-serif; font-size: 14pt; font-style: italic; font-weight: bold}
h4 { font-family: Arial, Helvetica, sans-serif; font-size: 13pt; font-style: italic; font-weight: bold}
h5 { font-family: Arial, Helvetica, sans-serif; font-size: 12pt; font-style: italic; font-weight: bold}
h6 { font-family: Arial, Helvetica, sans-serif; font-size: 12pt; font-weight: bold}
p { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12pt; font-style: normal; line-height: normal; font-weight: normal}
li { font-family: Arial, Helvetica, sans-serif; font-size: small; font-style: normal; font-weight: normal}
*******************************************************************
As you can see, it simply assigns presentational characteristics to HTML elements. For the occasion when a particular page needs to change one of these elements, note that style information embedded in the head section of the source code will override information from a linked external style sheet.