Designing Accessible Websites

Accessible HTML Samples

  1. Supply "alt" tags for images
  2. Supply empty "alt" tags for unessential images
  3. Create Meaningful Links
  4. Allow users to skip over navigational links
  5. Data Tables - Use Headers
  6. Use Frames Sparingly if at all, and give them titles
  7. Associate Labels with Form Elements
  8. Make sure you can navigate through your site using the keyboard only
  9. Supply "alt" tags for Java applets and plug-ins

1) Supply "alt" tags for images

<img src="graphics/logo.gif" alt="University of Texas" / >

2) Supply empty "alt" tags for unessential images

<image src="graphics/spacer.gif" alt="" / >

3) Create Meaningful Links

Bad Example: <a href="http://www.utexas.edu/">click here"</a>
Good Example: <a href="http://www.utexas.edu/">The University of Texas at Tyler</a>

4) Allow users to skip over navigational links

<a href="#main_content">Skip navigational links</a>...
...<a name="main_content"></a>

5) 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>

6) 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>

7) 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”>
</p>
</fieldset>
</FORM>

8) Make sure you can navigate through your site using the keyboard only

Take your mouse and put it in your drawer. Now, navigate your website with your keyboard alone!

9) Supply "alt" tags for Java applets and plug-ins

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