210 likes | 358 Vues
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
E N D
Section 508 What it means for you, the HEASARC and LHEA web developer K. Smale - Section 508
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 K. Smale - Section 508
“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 K. Smale - Section 508
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 K. Smale - Section 508
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 K. Smale - Section 508
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 K. Smale - Section 508
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”> K. Smale - Section 508
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”> K. Smale - Section 508
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 K. Smale - Section 508
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 headersName: Karen Smale, Code: 660.1, Email: karen@milkyway, Phone: 6-7612Name: Penn Sylvania, Code: 660, Email: psylvania@milkyway, Phone: 6-5000 K. Smale - Section 508
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. K. Smale - Section 508
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> K. Smale - Section 508
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> K. Smale - Section 508
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’) K. Smale - Section 508
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 K. Smale - Section 508
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/ K. Smale - Section 508
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 K. Smale - Section 508
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 K. Smale - Section 508
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. K. Smale - Section 508
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 K. Smale - Section 508
Thank you! • Questions? • Call me at 6-7612 • Email me at karen@milkyway.gsfc.nasa.gov • Visit me in Building 6, Room S119 K. Smale - Section 508