Cyber-Sierra Workshop 2002: Accessible Webs

     

SAMPLE MARKUP CHANGES

Index |  Tools |  WYSIWYG |  Checkpoints |  MarkUp | 

 

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>

More Information:

Extension Course: Web Site Accessibility
This class is adapted from an electronic class originally given by Jeanne Wiebke, Iowa State University Extension, and Linda Ffolliott, University of Arizona, for Agricultural Communicators in Education (ACE) and National Extension Technology Conference (NETC) members. This is a six-segment electronic class aimed at web site developers and managers to help them become familiar with web site accessibility issues and compliance with the Americans with Disabilities Act (ADA).
 
I strongly encourage you to save-file the complete class page set to have the information available offline for reference. The course itself is very read-able, though it does discuss HTML.
 
Index |  Tools |  WYSIWYG |  Checkpoints |  MarkUp | 

 

 

WORKSHOPS: E-Mail and Outreach |  Web 101 |  Building Accessible Webs |  Web Security | 

Workshops Location: http://www.cyber-sierra.com/workshops/
2002 copyright © Cyber-Sierra.Com, on-line since 1997