# Presentation: 261101

## Section 508

*What it means for you, the HEASARC and LHEA web developer*

## What, Why, When?

- Section 508 is a Federal Law that provides equal access to information
- Part of the Americans with Disabilities Act
- Vision-impaired, hearing-impaired
- Motor-control difficulties
- Required of all government agencies
- Compliance deadline is December 21, 2002
- Non-compliance can result in block of port 80

## “It’s the Law” (references)

- http://webmaster.gsfc.nasa.gov/
- Section 508 & NASA
- Section 508: Making Your Site Compliant
- webmaster.gsfc.nasa.gov/access/508-rules.html
- www.section508.gov
- www.access-board.gov/508.htm

## LHEA Status

- 37 unique web servers (+2 dozen aliases)
- Estimate ~ 30,000 static web pages
- 14 of 37 are *currently* compliant
- 6 waivers requested: 5 -dev and 1 mirror
- ~ 17 servers still need fixing (including LHEAWWW and HEASARC)
- Dozens of developers of various skill levels

## LHEA status (continued)

- Section 508 Plans submitted in April 2002
- Email from access@webmaster.gsfc.nasa.gov
- Main problems:
- Image alt tags missing
- Multimedia synchronizations needed
- Data table headers need <TH>
- Links to plugins for PDF, PS, Word files needed
- Forms not accessible to assistive technology
- Skip navigation link needed

## Assistive Technology

- Screen readers for the vision-impaired
- Navigation solely by tab, control and arrow keys (no mouse!)
- All links read preferentially
- Audio transcriptions (closed captioning) for video for the hearing-impaired
- Tab/control/arrow key used for motor-control-impaired

## Fixing your site: ALT TAGS

- <img alt=“artist conception of XMM in space” src=“xmm.jpg”>
- <img alt=“graph of Imagine and StarChild usage statistics over time” src=“fig1.gif” longdesc=“fig1.html”>
- <img alt=“*” src=“bullet.gif”>
- <img alt=“” src=“spacer.gif”>

## Fixing your site: ALT TAGS(continued)

- Image map area tags need alt tags too! <area alt=“Information” shape=“rect” coords=“5,5 100,20” href=“info.html”>
- But then don’t forget to put the alt tag on your image map graphic                             <img alt=“main navigation bar” src=“mainbuttons.gif” usemap=“#navigation”>

## Fixing your site: MULTIMEDIA

- Captions should be synchronized with the video
- At the very least, a transcript of any audio and a description of the video should be written in a text file linked near the multimedia
- MAGpie (freeware) or QuickTime PRO ($29) can synchronize text to your audio

## Fixing your site: DATA TABLES

- Table row and column headers need <TH> tags instead of regular <TD> tags
- Written in bold face and centered
- Read with a different voice inflection
- Each row will be read with the proper headers**Name:** Karen Smale, **Code:** 660.1, **Email:** karen@milkyway, **Phone:** 6-7612**Name:** Penn Sylvania, **Code:** 660, **Email:** psylvania@milkyway, **Phone:** 6-5000

## Fixing your site: PLUGINS

- For every PDF, PS, Word, Shockwave, Flash, etc. file, you must provide a link to section 508 compliant software.
- PDF: Adobe Acrobat Reader
- Word: MS has free downloadable readers
- PS: Unknown - probably not compliant
- Try not to make PS files or images from textual viewgraphs! Leave as PPT or PDF.

## Fixing your site: FORMS

- Need to associate each form element (text area, radio button, etc.) with a label
- Enables a larger “clickable area”
- Links a purpose with the button or text area
-  <form method="post" action="/cgi-bin/search.pl"><label for="search">Search the HEASARC site:</label><input name="tquery" id="search" size="30" maxlength="60”></form>

## Fixing your site: SKIP NAVIGATION

- Allows visually-impaired users with screen readers to skip past repetitive navigation links
- Should be first thing on your page, before the navigation bar
- <a href=“#content”>skip to content</a>[navigation links are here]<a name=“content”></a><h1>Latest News</h1>

## All the Section 508 rules

*Provide text equivalent for images*
*Equivalent alternatives for multimedia (synchronous!)*
- Color should not be the only way of conveying information
- Turn style sheets off - does it still work, is it still readable?
- Server-side image maps need redundant text links
*Client-side image maps need area alt tags*
*Data tables need <TH> for header rows*
- Multi-logic table row or column headers need to be identified
- Frames need titles (‘top’ or ‘left’ is not useful, use ‘content’ or ‘navigation’)

## Section 508 Rules (continued)

- No flickering (don’t use animations that flicker between 2 and 55 Hz)
- Text-only pages: if you can’t comply with these rules, make a text-only page (but update it!)
- Turn JavaScript off - does it still work, can you still navigate?
*PDF, PS, Word, shockwave, flash? Provide a link to a plugin or applet*
*Forms must have LABEL element for those using assistive technology*
*Provide a way to skip repetitive navigation links*
- If timed response is required for filling out a form, provide a way to extend the time allowed

## Some useful references

- Checklist & how-to:
- www.hq.nasa.gov/webmaster/accessibility/
- HEASARC checklist, how-to, and examples
- heasarc.gsfc.nasa.gov/docs/heasarc/Style_Guide/sec508.html
- heasarc.gsfc.nasa.gov/docs/heasarc/Style_Guide/sec508rules.html
- Test your site:
- bobby.watchfire.com
- www.temple.edu/inst_disabilities/piat/wave/
- Check LHEA & HEASARC site status:
- http://olegacy.gsfc.nasa.gov/docs/karen/bobby/

## When you think you’re compliant

- Read through all the rules - did you address all the items?
- Check some pages at http://bobby.watchfire.com/
- Be aware: Bobby doesn’t check for everything!
- Checks that an alt tag exists (not whether it’s useful)
- Checks that forms are compliant
- Checks frames for titles
- Doesn’t check for <TH>, multimedia synchros, skip navigation links, links to plugins... that’s your responsibility

## Think you’re compliant? (continued)

- E-mail Karen Smale (karen@milkyway) and have your entire site checked
- Submit your updated Section 508 plan
- Add link to an Accessibility Statement, e.g. http://webmaster.gsfc.nasa.gov/access.html

## And Remember

- All new web pages must be Section 508 compliant when they go public.
- Random checking will occur (by me and the GSFC CIO’s office).
- Assistive technologies may change - requirements may change in the future.

## Good HTML & NASA policy

- Don’t link “click here”
- NASA policy rules (privacy and security statements, contact info for curator, NASA responsible official, links to GSFC homepage, NASA logo [and no others!], meta tags, XML, etc.): http://webmaster.gsfc.nasa.gov/policy/gsfc/www-policy.html

## Thank you!

- Questions?
- Call me at 6-7612
- Email me at karen@milkyway.gsfc.nasa.gov
- Visit me in Building 6, Room S119