Tips to Creating Accessible Web Pages

Recently, the W3C has developed a number of guideline and techniques that will ensure the accessibility of Web pages. This means that Web pages will be meaningful to those that, for some reason, cannot see or hear as they interact with the page. Accessibility means that those with medical handicaps can use Web resources. But it also means that the data on Web pages can be provided in alternative media for us all.

Images, Photographs, and Animations: The ALT attribute provides a way to describe the image on the page. It is important to describe each graphic using ALT. Even bullets and lines that are graphics should be identified so the person interacting with the page knows what each image is intended to be.

Page Organization: In order for pages to be easy to scan, it is important to construct the page using structure tags such as <H1>, <H3>, <P>, and <UL>. If pages are constructed with a heavy reliance on color and font tags, the page becomes difficult to "read" the page.

Tables: Tables have a cell-by-cell horizontal reading order. Be sure that content entered into HTML tables will make sense when read in this way. Also try to avoid using tables for formatting text in column.

Imagemaps: Providing a MAP of an image on the client side enables those that cannot see a graphic to navigate to hot spots within it. It also will enable those that cannot use a mouse to interact with the image.

Hypertext Links: Enclosing descriptive text inside a link enables those who cannot see the link the ability to select the link anyway. In addition, using descriptive text ensures that each link makes sense when read alone.

Page Organization: In order for pages to be easy to scan, it is important to construct the page using structure tags such as <H1>, <H3>, <P>, and <UL>. If pages are constructed with a heavy reliance on color and font tags, the page becomes difficult to "read" the page.

Graphs and Charts: Use the LONGDESC attribute to describe an graph or chart for those that cannot see them.

Audio and Video: Provide captions or transcripts of these elements so those that cannot hear or see them will understand the intended content.

Applets, Scripts, Plug-ins: Provide for alternate expression of this content so that nothing is lost when these features are unsupported.

Frames: Label each frame with a title or name. Also include a hypertext start page in NOFRAMES element.

Evaluate the HTML and CSS for your Site: To support Accessibility it is best to separate tagging for content and structure from tagging for format and layout. A Web page that is heavily coded using HTML formatting tags is quite difficult to read when scanned. It is much better to store formatting directions in a separate cascading style sheet file, separately from the content. See the example below.

Evaluate Your HTML for Style Coding

To support Accessibility it is best to separate tagging for content and structure from tagging for format and layout. A Web page that is heavily coded using HTML formatting tags is quite difficult to read when scanned. It is much better to store formatting directions in a separate cascading style sheet file, separately from the content.

This markup uses HTML directly to code for page formatting: Try to scan the text and tags. Is the text easy to read? Why? Why not?

<p><font color="#008080" size="6" face="Braggadocio">Major Heading</font><font face="Times New Roman"><br> </font>is a line of text in a normal font. It normally would set as a paragraph.<font color="#800000" size="5" face="Tahoma"><br> Second Level Heading</font><font face="Times New Roman"><br> </font>This is another line of text in a normal font.</p>

This is the same markup with the style coding placed in a separate CSS file: Again try to scan the text and tags. Why is it easier to read?

<h1>Major Heading</h1>
<p> is a line of text in a normal font. It normally would set as a paragraph.</p>
<h2>Second Level Heading</h2>
<p>This is another line of text in a normal font.</p>