U.S. Department of Health and Human Services
Indian Health Service: The Federal Health Program for American Indians and Alaska Natives
A - Z Index:
A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
Q
R
S
T
U
V
W
X
Y
Z
#
Web Services  

Section 508 - HTML Code

The following are interpretations of the Section 508 standards for Web-based internet and intranet websites and how the Indian Health Service will address each via code example or explanation.

(NOTE: Spacing inserted into the code examples are for display purposes only, spacing should be removed if you copy and paste this code into your web pages.)

Graphics & Images

Meaningful text descriptions must accompany non-text elements and convey the same information that is communicated by the associated element. A non-text element is an image, graphic, audio clip, or other feature that conveys meaning through a picture or sound. Examples include: elements that provide information required for comprehension of content or those used to facilitate navigation, buttons, check boxes, pictures and embedded or streaming audio or video.

Code Example:

< img src="images/graphic_image.gif" width="10" height="10" alt="Graphic Image description goes here">

If a non-text element conveys no relevant information, i.e., a transparent graphic for spacing or a very small decorative image, the "alt" attribute must be present and can either contain a short text description or be empty/null."

Code Example:

< img src="images/graphi_image.gif" width="10" height="10" alt="">


Multimedia Equivalents

Equivalent alterative for any multimedia presentation shall be synchronized with the presentation. For IHS.gov this means we will caption our videos and for our flash animations we will have a textual version in the code and for the users who may not have flash.


Color

Color will not be used solely to represent anything on IHS.gov; a textual reference is also required. If something is noted as being a color it must also have be noted via a textual method. For instance, form fields that are required must have an asterisk (*) used as an indicator rather than just have text saying "form fields in red are required to be filled out".

    Example:

      * indicates a required field
      * First Name: [Form Field]


Reading Order / Information Flow

Websites need to have correct information flow. What this means is that if you were to look at the code of a page the content should go from top to bottom left to right as though you were reading a newspaper. If using CSS, make sure page content appears in correct order with CSS disabled. Use linked style sheets vs. embedded or inline styles, especially for font size. Use style sheets over the FONT tag.


Server-side Image Maps

When using server side image maps provide an overarching alt tag to the image describing what entirely is shown. On each mapped out piece of the image you need a unique alt tag that describes what that pieces is representing/showing.

Code Example:

< IMG src="images/botbar.jpg" alt="Site Navigation" usemap="#botbarMap39" >
  < MAP NAME="botbarMap39" >
    < AREA SHAPE="RECT" COORDS="1,22,50,45" HREF="about/about.html" alt="[About CIS]" >
    < AREA SHAPE="RECT" COORDS="50,21,100,50" HREF="news/new.html" alt="[Cancer News]" >
    < AREA SHAPE="RECT" COORDS="100,22,155,46" HREF="resources/resources.html" alt="[CIS Resources] ">
    < AREA SHAPE="RECT" COORDS="155,22,218,47" HREF="http://www.cancer.gov/publications/" alt="[Publications Ordering]" >
    < AREA SHAPE="RECT" COORDS="218,22,287,49" HREF="community/community.html" alt="[CIS Regional Programs]" >
    < AREA SHAPE="RECT" COORDS="287,23,340,50" HREF="research/research.html" alt="[Cancer Research]" >
    < AREA SHAPE="RECT" COORDS="340,23,375,48" HREF="maint/map/map.htm" alt="[Site Map]" >
    < AREA SHAPE="RECT" COORDS="375,23,430,47" HREF="contact/contact.html" alt="[Contact Us]" >
    < AREA SHAPE="CIRCLE" COORDS="445,21,22" HREF="index.html" alt="[Home]" >
  < /MAP >


Data Tables

Data tables are tables used to present any information in a tabular format that isn't purely for formatting. Additionally, there must be a relationship with the column headings and row headings to the information in the table TDs. Use TH tags for data table headers. Include the ABBR attribute to provide a one word identifier the screen reader will announce as the header for each associated data cell. Use Summary attribute and CAPTION tag for all data tables.

Code Example:

< table summary = "Patient Registration Data" >
  < tr>
    < th scope="col">Clothing< /th>
    < th scope="col">Size< /th>
    < th scope="col">Cost in Dollars< /th>
  < /tr>
  < tr>
    < th scope="row">Shirt< /th>
    < td>Large< /td>
    < td>1< /td>
  < /tr>
  < tr>
    < th scope="row">Pants< /th>
    < td>Medium< /td>
    < td>6< /td>
  < /tr>
< /table>


Frames

Frames are not permitted on IHS.gov except for special circumstances. If a business need requires the use of frames it can be requested by contacting Web Services Management.


Flickering

IHS.gov web pages are not permitted to flicker or flash.


Text-only Pages

In situations where it is technically impossible to make something section 508 compliant a text-only version of a page may be created. Web Services Management should be consulted prior to creating a text-only page.


Scripting Languages

Scripting languages, such as JavaScript, must have < noscript> text implemented. This text should be representative of what the scripts function is.


Plug-in Applications

When a web page requires that an applet, plug-in or other application be present on the client system to interpret page content, the page must provide a link to the respective plug-in or applet that is section 508 compliant. IHS.gov has built in template code that must be used to show the required plug-in(s). Additionally, only approved plug-in and applets may be used. These include:
  • Adobe Acrobat
  • Adobe Flash
  • Microsoft Office Suite (Word, Excel and PowerPoint)
  • Zip Files

Note: We do provide legacy plug-ins for files that were posted prior to this standardization of content formats because older sites may still have these files available to download.


Electronic Forms

Form fields are required to have unique labels to be compliant. This allows for a relationship to be established as to what the form field is and what is required of the user.

Code Example:

< LABEL for="Duration" id="Durantion">How often do you visit this Web site?< /LABEL>
  < select name="Duration" id="Duration">
    < option value="">
      < option value="301">This is my first visit< /option>
      < option value="302">Daily< /option>
      < option value="303">Weekly< /option>
      < option value="304">Monthly< /option>
  < /select>


Skip Navigation

Provide users a way to skip repetitive navigation links. In the standard IHS.gov template there are built in skip navigation locations. Our skip navigation is invisible to the general user but allows for screen reader users to skip over our header navigation and primary site navigation to the body content.

Code Example:

< a name="skipIHSfooter" href="#skipIHSheader" title="Skip IHS header, go to content">< /a>
< a name="skipIHSheader" href="#">< /a>


Time Responses

If a timed response is programmatically determined there must be an option for more time. Auto forwarding after X seconds is not permissible on IHS.gov.


BACK TO TOP