Section 508 What it means for you the

Section 508 What it means for you, the HEASARC and LHEA web developer Nov 4, 2002 K. Smale - Section 508 1

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 Nov 4, 2002 K. Smale - Section 508 2

“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. section 508. gov • www. access-board. gov/508. htm Nov 4, 2002 K. Smale - Section 508 3

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 Nov 4, 2002 K. Smale - Section 508 4

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 Nov 4, 2002 K. Smale - Section 508 5

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 motorcontrol-impaired Nov 4, 2002 K. Smale - Section 508 6

Fixing your site: ALT TAGS • <img alt=“artist conception of XMM in space” src=“xmm. jpg”> • <img alt=“graph of Imagine and Star. Child usage statistics over time” src=“fig 1. gif” longdesc=“fig 1. html”> • <img alt=“*” src=“bullet. gif”> • <img alt=“” src=“spacer. gif”> Nov 4, 2002 K. Smale - Section 508 7

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”> Nov 4, 2002 K. Smale - Section 508 8

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 Quick. Time PRO ($29) can synchronize text to your audio Nov 4, 2002 K. Smale - Section 508 9

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 Nov 4, 2002 K. Smale - Section 508 10

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. Nov 4, 2002 K. Smale - Section 508 11

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> Nov 4, 2002 K. Smale - Section 508 12

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> <h 1>Latest News</h 1> Nov 4, 2002 K. Smale - Section 508 13

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’) Nov 4, 2002 K. Smale - Section 508 14

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 Java. Script 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 Nov 4, 2002 K. Smale - Section 508 15

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/sec 508. html – heasarc. gsfc. nasa. gov/docs/heasarc/Style_Guide/sec 508 rules. 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/ Nov 4, 2002 K. Smale - Section 508 16

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! • • Nov 4, 2002 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 K. Smale - Section 508 17

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 Nov 4, 2002 K. Smale - Section 508 18

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. Nov 4, 2002 K. Smale - Section 508 19

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 Nov 4, 2002 K. Smale - Section 508 20

Thank you! • Questions? – Call me at 6 -7612 – Email me at karen@milkyway. gsfc. nasa. gov – Visit me in Building 6, Room S 119 Nov 4, 2002 K. Smale - Section 508 21