Code Library
Topics on this page
- Skip Navigation
- Header 1
- Header 2
- HTML Image Element With Null Alternative Text Attribute
- HTML Image Element With Alternative Text Attribute
- HTML Image Element With Alternative Text and Long Description Attributes
- HTML Forms with Explicit Labels
- HTML Forms using Tables for Layout
- HTML Form Inputs Using the Title Attribute
Skip Navigation
The following html code need to be placed on very beginning of an html page and the skip link must be the first link in the page.
<div id="skipmenu">
<a href="#skip" class="skippy">Skip Navigation</a>
<a name="top"></a>
</div> <!-- end skipmenu -->
The following is the corresponded css code for skip navigation. It must be placed inside style block on the header or in the css style file. This is just an example which is used on hhs.gov. It must be modified to match up the site theme.
div#skipmenu{
position:relative;
}
div#skipmenu a.skippy{
position:absolute;
top: -1000px;
left:-1000px;
height: 1px;
width: 1px;
overflow:hidden;
}
div#skipmenu a.skippy:active, div#skipmenu a.skippy:focus, div#skipmenu a.skippy:hover{
position: absolute;
top:auto;
left:auto;
width:100%;
height: 1em;
width: auto;
font-size:1em;
font-weight:bold;
width:100%;
padding-bottom:15px;
color: black;
z-index:100;
text-align:right;
margin-bottom:25px;
}
Last, put this anchor at the start of the content - <a name="skip" tabindex="-1"></a>
HHS Banner 1
topbannerlogo.gif
topbannermiddle.gif
topbannerright.gif
Code for header:
<table border="0" cellpadding="0" cellspacing="0" summary="This table is used for layout purpose" class="topheader" width="100%">
<tr>
<td><a href="http://www.hhs.gov"><img src="/images/topbannerlogo.gif" width="157" alt="HHS.gov" border="0" /></a></td>
<td width="100%"><a href="http://www.hhs.gov"><img src="/images/topbannermiddle.gif" width="100%" border="0" height="37" alt="HHS.gov" /></a></td>
<td><a href="http://www.hhs.gov"><img src="/images/topbannerright.gif" border="0" alt="HHS.gov" /></a></td>
</tr>
</table>
HHS Banner 2
headbar_left.gif
headbar_middle.gif
headbar_right.gif
Code for header:
<table border="0" cellpadding="0" cellspacing="0" summary="This table is used for layout purpose" class="topheader" width="100%">
<tr>
<td><a href="http://www.hhs.gov"><img src="/images/headbar_left.gif" width="157" alt="HHS.gov" border="0" /></a></td>
<td width="100%"><a href="http://www.hhs.gov"><img src="/images/headbar_middle.gif" width="100%" border="0" height="37" alt="HHS.gov" /></a></td>
<td><a href="http://www.hhs.gov"><img src="/images/headbar_right.gif" border="0" alt="HHS.gov" /></a></td>
</tr>
</table>
HTML Image Element With Null Alternative Text Attribute
<IMG src="spacer.gif" alt="">
HTML Image Element With Alternative Text Attribute
<IMG src="magnifyingglass.gif" alt="Icon indicating search function">
HTML Image Element With Alternative Text and Long Description Attributes
<IMG src="97sales.gif" alt="Sales for 1997" longdesc="sales97.html">
In sales97.html file:
Chart showing how sales in 1997 progressed. The chart is a bar-chart showing percentage increased sales by month. Sales in January were up 10% from December 1996, sales in February dropped 3%, ..
HTML Forms with Explicit Labels
Explicit labels include the “for” attribute in the “Label” element and the “Id” attribute in the “Input” element.
Example using Explicit Labels:
<form>
<table>
<tr>
<td><b><label for="first"> FIRST NAME:</label> </b></td>
<td><input type="text" name="FIRSTNAME" id="first" ></td>
</tr>
<tr>
<td><b><label for="last"> LAST NAME:</label> </b></td>
<td><input type="text" name="LASTNAME" id="last" ></td>
</tr>
</table>
<p>
<input type="SUBMIT" value="SUBMIT">
</form>
HTML Forms using Tables for Layout
When using tables for form layout, both the title and the form field must be in the same table cell.
<table width="600" border="0">
<tr>
<td >First Name
<input type="text" name="FirstName" /></td>
<td >Last Name
<input type="text" name="LastName" /></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="Submit" />
<input type="reset" value="Reset" /></td>
</tr>
</table>
HTML Form Inputs Using the Title Attribute
In some cases, it is visually impractical to use a form label. When fields have no visual labels the title attribute provides information about the fields. Assistive technology looks for the <label> element, but if it isn't provided, they will read the title attribute.
<input type="text" name="num2" title="Enter your 3 digit phone exchange" />
<input type="text" name="num3" title="Enter the last 4 digits of your phone number" />