This material is adapted from the WebAIM Center markup examples. Once you get somewhat familar with HTML you'll be able to find the places in your web page that will need the extra information added to meet web site accessibility guidelines that can't be reached in WYSIWYG mode. Note: Due to the examples, this page does not pass code validation, so don't save the page as a template.
SUPPLY "ALT" TAGS FOR IMAGES
<img src=“graphics/webaim.gif”
alt=”WebAIM logo, link
to home page”>
SUPPLY EMPTY “ALT” TAGS FOR UNESSENTIAL IMAGES
<img src=“graphics/spacer.gif”
alt="">
SUPPLY “ALT” TAGS FOR JAVA APPLETS & PLUGINS
<applet name="DigiChat"
“codebase="http://rm150nt.cpd.usu.edu/DigiChat/DigiClasses/"
code="digi/digichat/DigiChatApplet.class"
width="200"height="100" align="right"
archive="Client.jar"
alt=”This is a chat program which requires a
Java-compatible Web browser to run”>
<param name="port" value="8303">
<param
name="background" value="FFFFFF">
<param name="textcolor"value="000000">
<param name="cabbase" value="Client.cab">
</applet>
ALLOW USERS TO SKIP OVER NAVIGATIONAL LINKS
<a href=“#main_content”>Skip navigational links</a>
. . .
. . . <a name=”main_content”></a>
DATA TABLES- USE HEADERS
<TABLE border="1">
<caption>
Amount and type of Jello consumed
</caption>
<TR>
<TH id=”t1” >Name</TH>
<
TH
id=”t2” >Serving
Size (oz)</TH>
<TH id=”t3”
abbr="Type">Type of Jello</TH>
<
TH id=”t4” >Seconds</TH>
</TR>
<TR>
<TD
headers=”t1”
>George</TD>
<TD
headers=”t2”
>10</TD>
<TD headers=”t3”
>Red</TD>
<TD
headers=”t4”
>No</TD>
</TR>
<TR>
<TD
headers=”t1”
>Bob</TD>
<TD
headers=”t2”
>5</TD>
<TD headers=”t3”
>Green</TD>
<TD headers=”t4”
>Yes</TD>
</TR>
</TABLE>
ASSOCIATE LABELS WITH FORM ELEMENTS
<FORM action="FMPro"
method="post">
<fieldset>
<legend>Personal information
</legend>
<label for=”firstname”>First name:
</label>
<INPUT
id=”firstname”
type="text" tabindex="1">
<label for=”lastname”>Last name:
</label>
<INPUT
id=”lastname”
type="text" tabindex="2"> ...etc...
</fieldset>
<fieldset>
<legend>Medical History
</legend>
<p>
<label for=”grantees”>
Grantees:
</label>
</p>
<p>
<input id=”grantees”
type=”text” tabindex=”3”>
</fieldset>
</FORM>
CREATE MEANINGFUL LINKS
BAD EXAMPLE:
<a href=”http://www.getrichquick.com/”>
click here</a>
GOOD EXAMPLE:
<a href=”http://www.getrichquick.com/”>
Campus Bookstore</a>
USE FRAMES SPARINGLY IF AT ALL, AND GIVE THEM TITLES
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0
Frameset//EN">
<HTML>
<HEAD>
<TITLE>A frameset document</TITLE>
</HEAD>
<FRAMESET cols="10%, 90%"
title=”University
Book Store”>
<FRAME src="nav.html"
title=”navigational links”>
<FRAME src="doc.html"
title=”main content of page”>
<NOFRAMES>