Section 508 - HTML CodeThe 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 & ImagesMeaningful 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.
< 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."
< img src="images/graphi_image.gif" width="10" height="10" alt="">
Multimedia EquivalentsEquivalent 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.
ColorColor 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".
* indicates a required field
* First Name: [Form Field]
Reading Order / Information FlowWebsites 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 MapsWhen 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.
< 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 TablesData 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.
< table summary = "Patient Registration Data" >
< th scope="col">Clothing< /th>
< th scope="col">Size< /th>
< th scope="col">Cost in Dollars< /th>
< th scope="row">Shirt< /th>
< td>Large< /td>
< td>1< /td>
< th scope="row">Pants< /th>
< td>Medium< /td>
< td>6< /td>
FramesFrames 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.
FlickeringIHS.gov web pages are not permitted to flicker or flash.
Text-only PagesIn 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.
Plug-in ApplicationsWhen 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 FormsForm 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.
< 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>
Skip NavigationProvide 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.
< a name="skipIHSfooter" href="#skipIHSheader" title="Skip IHS header, go to content">< /a>
< a name="skipIHSheader" href="#">< /a>
Time ResponsesIf 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.