IHS Specific Implementation Guidelines for Section 508 Standard (m) (WORD 50k)

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

Example:
< img src="images/graphi_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."

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

For meaningful images used to itemize a list of items - i.e. bullet images, provide a very brief description such as "Feather Bullet Image" on the first instance of the image's use and use the alt description to itemize the list within each succeeding image.

Example:
< img src="images/graphi_image.gif" width="10" height="10" ALT="Feather Bullet Image. Start of list. Item 1">
< img src="images/graphi_image.gif" width="10" height="10" ALT="Item 2">
< img src="images/graphi_image.gif" width="10" height="10" ALT="Item 3">
< img src="images/graphi_image.gif" width="10" height="10" ALT="Item 4. End of list">

File Formats

USE HTML FILES INSTEAD OF OTHER FILE FORMATS WHEN POSSIBLE.

WHEN NECESSARY, OTHER ELECTRONIC FILES SHOULD BE LIMITED TO 5MB. FOR ANY FILE LARGER THAN 10MB, CONSULT YOUR IHS WEB TEAM ACCOUNT REPRESENTATIVE.

P D F Files
When creating P D F files, you must have the latest Adobe Acrobat version and download the accessibility plug-in from Adobe's Download Page. This tool automatically analyzes the logical structure of a document and creates a new, tagged Adobe P D F file. The tags that were created in the document will then need to be populated with alternative content so that the P D F will read more clearly with a screen reader or other assistive technology devices.
On the web page that contains the links to the P D F files, include the filesize next to the link, and link to the IHS Download page.
See instructions for creating accessible PDFs.
 
Note: A dynamic method for indicating what plug-ins are required for your site is available in the IHS template.

Other non-HTML Files

It is recommended that you provide information in all available electronic document formats as long as there is an available, free Reader that can be easily downloaded. When linking to other file formats, include a link on the page to the IHS Download page, so a user can download the viewer or converter for the product if they don't have it installed on their machine. Note: A dynamic method for indicating what plug-ins are required for your site is available in the IHS template. If the necessary viewer is not available on the IHS Download page, refer the user to the appropriate product's plug-in download page. Note: When feasible, as in the case of MacroMedia's Flash, code your page to offer to install the necessary plug-in automatically.   If you are unsure whether an alternative file format is acceptable for the IHS web, contact your Web Account Manager.

Descriptive Hyperlinks

When creating hyperlinks within content, use descriptive text as the hyperlink instead of words like "click here", "more…", etc.

This is because individuals with disabilities (as well as users without disabilities) "surf" web pages by using the tab key to jump from hyperlink to hyperlink. Therefore, blind users will only hear "click here, click here, click here" without ever knowing what content they are linking to unless they read the entire page word for word.

Navigation

Provide users a way to skip repetitive navigation links.
Example:
< a name="skipDentalMenu" href="#skipDentalPageContent" title="Skip Dental Intranet menu, go to page content">< /a>
Page Content Goes Here...
< a name="skipDentalPageContent" href="#skipDentalMenu" title="Skip page content, go to Dental Intranet menu">< /a>

Tables Used to Display Data

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.
Example:
< TABLE SUMMARY = "Patient Registration Data" >
< CAPTION >2000- 2002 Data from Research Institite< /CAPTION >
< TR>
< TH id = "h1" ABBR="First">First Name< /TH>
< TH id = "h2" ABBR="Last">Last Name< /TH>
< /TR>
< TR>
< TD headers = "h1">John< /TD>
< TD headers = "h2">Doe< /TD>
< /TR>
< TR>
< TD headers = "h1" >Ann< /TD>
< TD headers = "h2" >Smith< /TD>
< /TR>

Use of Forms

The information on how to make forms accessible from the National Center for Accessible Media (NCAM), http://ncam.wgbh.org/cdrom/guideline/guideline3.html, is to be used as an appendix to the Jim Thatcher's "Web Accessibility for Section 508 Tutorial", http://www.jimthatcher.com/webcourse8.htm.

The IHS Standard for implementing Section 508 Standard (n), Accessible Forms, consists of the information provided in these two documents.

How to Check 508 compliancy for forms (Section n) (WORD 23 k)

Use of Cascading Style Sheets

If using CSS, make sure pages work without CSS. Use linked stylesheets vs. embedded or inline styles, especially for font size. Use stylesheets over the FONT tag.

Use of Server-side Image Maps

Provide "alt" text for each active region of your image map (the AREA's) and provide "alt" text in the IMG tag for the map itself. Alt-text for adjacent image map areas should be separated by brackets, vertical bars, or other punctuation so that the links don't all run together in some non-graphical browsers. This is also to prevent some older screen readers from reading adjacent links as a single link.

If this approach doesn't make the image map accessible, create an "alternative page" that is accessible.

Note: Be careful how you list the order of the links when the code is written. The link order doesn't matter for people who use a graphical browser and a mouse, but it can affect screen readers and people who use a keyboard to tab through links.

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 >

Additional "Server Side Image Map" coding information: http://www.w3.org/TR/WCAG10-HTML-TECHS/#server-side

Use of Javascript

Include onblur and onfocus for event handlers like mouseovers.
< NOSCRIPT> is not a 508 requirement however, using the tag can ensure that the above requirement is met.

Pop Up Windows
Must change focus to new window. Must have a link that will close the window. Make sure that the pop up only happens once.
Sample Code Implementation for your use.

Use of Flash

All Flash must be approved prior to creation and should be 508 compliant.

Use of Streaming Media

Streaming media needs captioning.

Use of Java Applets

Please do not use at this time.