508 Accessibility Standards For Web-Based Intranet and Internet Information and Applications

10/6/2016
WebbasedIntranetandInternetInformationandApplications(1194.22)UnitedStatesAccessBoard
Print
Web-based Intranet and Internet Information and Applications (1194.22)

Updated:June21,2001
TheseprovisionsofthestandardsprovidetherequirementsthatmustbefollowedbyFederalagencieswhenproducing
webpages.Theseprovisionsapplyunlessdoingsowouldimposeanundueburden.
Thekeytocompliancewiththeseprovisionsisadherencetotheprovisions.Manyagencieshavepurchasedassistive
softwaretotesttheirpages.Thiswillproduceabetterunderstandingofhowthesedevicesinteractwithdifferentcoding
techniques.However,italwaysshouldbekeptinmindthatassistivetechnologies,suchasscreenreaders,arecomplex
programsandtakeextensiveexperiencetomaster.Forthisreason,anoviceusermayobtaininaccurateresultsthatcan
easilyleadtofrustrationandabeliefthatthepagedoesnotcomplywiththestandards.Forexample,allscreenreading
programsusespecialkeycombinationstoreadproperlycodedtables.Ifthenoviceuserofassistivetechnologyisnot
awareofthesecommands,thetableswillneverreadappropriatelynomatterhowwellthetableshavebeenformatted.A
websitewillbeincompliancewiththe508standardsifitmeetsparagraphs(a)through(p)ofSection1194.22.Please
notethatthetipsandtechniquesdiscussedinthedocumentforcomplyingwithparticularsectionsarenotnecessarily
theonlywaysofprovidingcompliancewith508.Inmanycases,theyaretechniquesdevelopedbytheBoard,the
DepartmentofEducation,andtheDepartmentofJusticethathavebeentestedbyuserswithawidevarietyofscreen
readersoftware.Withtheevolutionoftechnology,othertechniquesmaybecomeavailableorevenpreferable.
(a)Atextequivalentforeverynontextelementshallbeprovided(e.g.,via"alt","longdesc",orinelementcontent).
Whatismeantbyatextequivalent?
Atextequivalentmeansaddingwordstorepresentthepurposeofanontextelement.Thisprovisionrequiresthatwhen
animageindicatesanavigationalactionsuchas"movetothenextscreen"or"gobacktothetopofthepage,"the
imagemustbeaccompaniedbyactualtextthatstatesthepurposeoftheimage.Thisprovisionalsorequiresthatwhen
animageisusedtorepresentpagecontent,theimagemusthaveatextdescriptionaccompanyingitthatexplainsthe
meaningoftheimage.
HTMLSourceCode:<imgsrc="/art/logogreen.gif"alt="AccessBoardLogo">
http://www.accessboard.gov/
Howmuchinformationactuallyneedstobeinthetextequivalent?
Thetextinformationassociatedwithanontextelementshould,whenpossible,communicatethesameinformationas
itsassociatedelement.Forexample,whenanimageindicatesanaction,theactionmustbedescribedinthetext.The
typesofnontextelementsrequiringactualtextdescriptionsarelimitedtothoseelementsthatprovideinformation
requiredforcomprehensionofcontentorthoseusedtofacilitatenavigation.Webpageauthorsoftenutilizetransparent
graphicsforspacing.Addingatextdescriptiontotheseelementswillproduceunnecessaryclutterforusersofscreen
readers.Forsuchgraphics,anemptyALTattributeisuseful.
Exampleofsourcecode:<IMGsrc="/transparent.gif"alt="">
Whatismeantbytheterm,nontextelement?
Anontextelementisanimage,graphic,audioclip,orotherfeaturethatconveysmeaningthroughapictureorsound.
Examplesincludebuttons,checkboxes,picturesandembeddedorstreamingaudioorvideo.
HTMLSourceCode:<imgsrc="/art/logogreen.gif"alt="AccessBoardLogo">
https://www.accessboard.gov/guidelinesandstandards/communicationsandit/aboutthesection508standards/guidetothesection508standards/webbas
1/14
10/6/2016
http://www.accessboard.gov/
Howshouldaudiopresentationsbetreated?
Thisprovisionrequiresthatwhenaudiopresentationsareavailableonamultimediawebpage,theaudioportionmustbe
captioned.Audioisanontextualelement,soatextequivalentoftheaudiomustbeprovidediftheaudioispartofa
multimediapresentation,Multimediaincludesbothaudioandvideo.Ifthepresentationisaudioonly,atexttranscript
wouldmeetthisrequirement.
Whatarewaysofassigningtexttoelements?
Thereareseveralwaysofprovidingtextualinformationsothatitcanberecognizedbyassistivetechnologydevices.For
instance,the<IMG>tagcanacceptan"alt"attributethatwillenableawebdesignertoincludetextthatdescribesthe
picturedirectlyinthe<IMG>tag.
HTMLsourcecode:<imgsrc="/image/ab_logo1.gif"alt="TheArchitecturalandTransportationBarriersComplianceBoard
emblemGotoAccessBoardwebsite">
Link:http://www.section508.gov/
Similarly,the<APPLET>tagforJavaappletsalsoacceptsan"alt"attribute,butitonlyworksforbrowsersthatprovide
supportforJava.Often,userswithslowerinternetconnectionswillturnsupportforJavaappletsoff.Abetteralternative
forprovidingtextualdescriptionsistosimplyincludethealternativetextbetweenopeningandclosing<APPLET>or
<OBJECT>tags.Forinstance,ifawebdesignerwantedtoincludean
appletcalledMyCoolAppletinawebpage,andalsoincludeadescriptionthattheappletshowsastocktickerdisplayingthe
currentpriceofvariousstocks,thedesignerwouldusethefollowingHTMLcodingforexample:
<APPLETCODE="MyCoolApplet.class"WIDTH="200",HEIGHT="100">
Thisappletdisplayscurrentstockpricesformanypopularstocks.
</APPLET>
Finally,yetanotherwayofprovidingatextualdescriptionistoincludeitinthepageinthesurroundingcontext:
Belowisapictureofmeduringmygreatvacation!
<p>
<IMGsrc="/pictureofme.jpg">
(b)Equivalentalternativesforanymultimediapresentationshallbesynchronizedwiththepresentation.
Whatareconsideredequivalentalternatives?
Captioningfortheaudioportionandaudiodescriptionofvisualinformationofmultimediapresentationsareconsidered
equivalentalternatives.Thisprovisionrequiresthatwhenanaudioportionofamultimediaproductioniscaptioned,as
requiredinprovision(a),thecaptioningmustbesynchronizedwiththeaudio.Synchronizedcaptioningwouldberequired
sosomeonereadingthecaptionscouldalsowatchthespeakerandassociaterelevantbodylanguagewiththespeech.
Ifawebsiteoffersaudiofileswithnovideo,dotheyhavetobecaptioned?
No,becauseitisnotmultimedia.However,sinceaudioisanontextelement,atextequivalent,suchasatranscript,
mustbeavailable.Similarly,a(silent)webslideshowpresentationdoesnotneedtohaveanaudiodescription
accompanyingit,butdoesrequiretextalternativestobeassociatedwiththegraphics.
IfaFederalagencyofficialdeliversaliveaudioandvideowebcastspeech,doesitneedtobecaptioned?
Yes,thiswouldqualifyasamultimediapresentationandwouldrequirethespeechtobecaptioned.
Example:
2/14
10/6/2016
NationalEndowmentfortheHumanities
www.neh.gov/media/scottcaptions.ram
NationalCenterforAccessibleMedia(NCAM)
http://main.wgbh.org/wgbh/access/dvs/lion.ram
(c)Webpagesshallbedesignedsothatallinformationconveyedwithcolorisalsoavailablewithoutcolor,forexample
fromcontextormarkup.
Whyisthisprovisionnecessary?
Whencolorsareusedasthesolemethodforidentifyingscreenelementsorcontrols,personswhoarecolorblindaswell
asthosepeoplewhoareblindorhavelowvisionmayfindthewebpageunusable.
Doesthismeanthatallpageshavetobedisplayedinblackandwhite?
No,thisprovisiondoesnotprohibittheuseofcolortoenhanceidentificationofimportantfeatures.Itdoes,however,
requirethatsomeothermethodofidentification,suchastextlabels,mustbecombinedwiththeuseofcolor.This
provisionaddressesnotonlytheproblemofusingcolortoindicateemphasizedtext,butalsotheuseofcolortoindicate
anaction.Forexample,awebpagethatdirectsauserto"pressthegreenbuttontostart"shouldalsoidentifythegreen
buttoninsomeotherfashionthansimplybycolor.
Isthereanywayapagecanbequicklycheckedtoensurecompliancewiththisprovision?
Therearetwosimplewaysoftestingawebpagetodetermineifthisrequirementisbeingmet:byeitherviewingthe
pageonablackandwhitemonitor,orbyprintingitoutonablackandwhiteprinter.Bothmethodswillquicklyshowif
theremovalofcoloraffectstheusabilityofthepage.
(d)Documentsshallbeorganizedsotheyarereadablewithoutrequiringanassociatedstylesheet.
Whatarethepotentialproblemsposedbystylesheets?
Stylesheetscanenableuserstodefinespecificviewingpreferencestoaccommodatetheirdisability.Forinstance,users
withlowvisionmaycreatetheirownstylesheetsothat,regardlessofwhatwebpagestheyvisit,alltextisdisplayedin
anextralargefontwithwhitecharactersona
blackbackground.Ifdesignerssetuptheirpagestooverrideuserdefinedstylesheets,peoplewithdisabilitiesmaynotbe
abletousethosepages.Forgoodaccess,therefore,itiscriticalthatdesignersensurethattheirwebpagesdonot
interferewithuserdefinedstylesheets.
3/14
10/6/2016
Ingeneral,the"safest"andmostusefulformofstylesheetsare"external"stylesheets,inwhichthestylerulesareset
upinaseparatefile.Anexampleofanexternalstylesheetis:
Exampleofsourcecode:<linkrel=stylesheettype="text/css"href="/section508.css>
(e)Redundanttextlinksshallbeprovidedforeachactiveregionofaserversideimagemap.
Howdo"imagemaps"work?
An"imagemap"isapicture(oftenanactualmap)onawebpagethatprovidesdifferent"links"tootherwebpages,
dependingonwhereauserclicksontheimage.Therearetwobasictypesofimagemaps:"clientsideimagemaps"and
"serversideimagemaps."Withclientsideimage
maps,each"activeregion"inapicturecanbeassigneditsown"link"(calledaURLor"UniformResourceLocator")that
specifieswhatwebpagetoretrievewhenaportionofthepictureisselected.HTMLallowseachactiveregiontohaveits
ownalternativetext,justlikeapicturecan
havealternativetext(see1194.22(a)).Bycontrast,clickingonalocationofaserversideimagemaponlyspecifiesthe
coordinateswithintheimagewhenthemousewasdepressed.TheultimateselectionofthelinkorURLmustbe
decipheredbythecomputerservingthewebpage.
Whenawebpageusesaserversideimagemaptopresenttheuserwithaselectionofoptions,browserscannotindicate
totheusertheURLthatwillbefollowedwhenaregionofthemapisactivated.Therefore,theredundanttextlinkis
necessarytoprovideaccesstothepageforanyonenotabletoseeoraccuratelyclickonthemap.
(f)Clientsideimagemapsshallbeprovidedinsteadofserversideimagemapsexceptwheretheregionscannotbe
definedwithanavailablegeometricshape.
Whydoclientsideimagemapsprovidebetteraccessibility?
Unlikeserversideimagemaps,theclientsideimagemapallowanauthortoassigntexttoeachimagemaphotspots.
Thisfeaturemeansthatsomeoneusingascreenreadercaneasilyidentifyandactivateregionsofthemap.An
explanationofhowtheseimagemapsareconstructedwillhelpclarifythisissue.
Creatingabasicclientsideimagemaprequiresseveralsteps:
Identifyanimageforthemap.First,animagemustbeusedinaclientsideimagemap.Thisimageisidentifiedusing
the<img>tag.Toidentifyitasamap,usethe"usemap"attribute.
Usethe<MAP>tagto"areas"withinthemap.The<MAP>tagisacontainertagthatincludesvarious<AREA>tags
thatareusedtoidentifyspecificportionsoftheimage.
Use<AREA>tagstoidentifymapregions.Toidentifyregionswithinamap,simplyuse<AREA>tagswithinthe
<MAP>containertags.Makingthisclientsideimagemapaccessibleisconsiderablyeasiertodescribe:simplyinclude
the"ALT"attributeandareadescriptioninsideeach<AREA>tag.ThefollowingHTMLdemonstrateshowtomakea
clientsideimagemap:
<imgsrc="/navbar.gif"border="0"usemap="#Map">
<mapname="Map">
<areashape="rect"coords="0,2,64,19"href="/general.html"alt="informationaboutus">
<areashape="rect"coords="65,2,166,20"href="/jobs.html"alt="jobopportunities">
<areashape="rect"coords="167,2,212,19"href="/faq.html"alt="FrequentlyAskedQuestions">
<areashape="rect"coords="214,2,318,21"href="/location.html"alt="Howtofindus">
<areashape="rect"coords="319,2,399,23"href="/contact.html"alt="Howtocontactus">
</map>
4/14
10/6/2016
(g)Rowandcolumnheadersshallbeidentifiedfordatatables.
(h)Markupshallbeusedtoassociatedatacellsandheadercellsfordatatablesthathavetwoormorelogicallevelsofrow
orcolumnheaders.
Whyarethesetwoprovisionsnecessary?
Paragraphs(g)and(h)permittheuseoftables,butrequirethatthetablesbecodedaccordingtotherulesofthemarkup
languagebeingusedforcreatingtables.Largetablesofdatacanbedifficulttointerpretifapersonisusinganonvisual
meansofaccessingtheweb.Usersofscreenreaderscaneasilyget"lost"insideatablebecauseitmaybeimpossibleto
associateaparticularcellthatascreenreaderisreadingwiththecorrespondingcolumnheadingsandrownames.For
instance,assumethatasalarytableincludesthesalariesforfederalemployeesbygradeandstep.Eachrowinthetable
mayrepresentagradescaleandeachcolumnmayrepresentastep.Thus,findingthesalarycorrespondingtoagrade9,
step5mayinvolvefindingthecellintheninthrowandthefifthcolumn.Forasalarychartof15gradescalesand10
steps,thetablewillhaveatleast150cells.Withoutamethodtoassociatetheheadingswitheachcell,itiseasyto
imaginethedifficultyauserofassistivetechnologymayencounterwiththetable.
Section1194.22(g)and(h)statethatwheninformationisdisplayedinatableformat,theinformationshallbelaidout
usingappropriatetabletagsasopposedtousingapreformattedtableinassociationwiththe"<pre>"tag.Webauthors
arealsorequiredtouseoneofseveralmethodstoprovideanassociationbetweenaheaderanditsrelatedinformation.
HowcanHTMLtablesbemadereadablewithassistivetechnology?
Usingthe"Scope"AttributeinTablesUsingthe"scope"attributeisoneofthemosteffectivewaysofmakingHTML
compliantwiththeserequirements.Itisalsothesimplestmethodtoimplement.Thescopeattributealsoworkswith
some(butnotall)assistivetechnologyintablesthatuse"colspan"or"rowspan"attributesintableheaderordatacells.
UsingtheScopeAttributeThefirstrowofeachtableshouldincludecolumnheadings.Typically,thesecolumnheadings
areinsertedin<TH>tags,although<TD>tagscanalsobeused.Thesetagsatthetopofeachcolumnshouldinclude
thefollowingattribute:
scope="col"
Bydoingthissimplestep,thetextinthatcellbecomesassociatedwitheverycellinthatcolumn.Unlikeusingother
approaches(notably"id"and"headers")thereisnoneedtoincludespecialattributesineachcellofthetable.Similarly,
thefirstcolumnofeverytableshouldincludeinformationidentifyinginformationabouteachrowinthetable.Eachofthe
cellsinthatfirstcolumnarecreatedbyeither<TH>or<TD>tags.Includethefollowingattributeinthesecells:
scope="row"
Bysimplyaddingthisattribute,thetextinthatcellbecomesassociatedwitheverycellinthatrow.Whilethistechnique
dramaticallyimprovestheusabilityofawebpage,usingthescopeattributedoesnotappeartointerfereinanywaywith
browsersthatdonotsupporttheattribute.
Exampleofsourcecodethefollowingsimpletablesummarizestheworkscheduleofthreeemployeesanddemonstrates
theseprinciples.
<table>
<tr>
<th>&nbsp</th>
<thscope="col">Spring</th><thscope="col">Summer</th><thscope="col">Autumn</th><thscope="col"
>Winter</th></tr>
<tr><tdscope="row">Betty</td><td>95</td><td>106</td><td>84</td><td>73</td>
</tr>
<tr><tdscope="row">Wilma</td><td>106</td><td>106</td><td>95</td><td>95</td>
</tr>
<tr><tdscope="row">Fred</td><td>106</td><td>106</td><td>106</td><td>106</td>
</tr>
</table>
5/14
10/6/2016
Thistablewouldbedisplayedasfollows:
SpringSummerAutumnWinter
Betty 95
106
84
73
Wilma106
106
95
95
Fred 106
106
106
106
Theefficiencyofusingthescopeattributebecomesmoreapparentinmuchlargertables.Forinstance,ifanagencyused
atablewith20rowsand20columns,therewouldbe400datacellsinthetable.Tomakethistablecomplywiththis
provisionwithoutusingthescopeattributewouldrequirespecialcodinginall400datacells,plusthe40headerandrow
cells.Bycontrast,usingthescopeattributewouldonlyrequirespecial
attributesinthe40headerandrowcells.
Usingthe"ID"and"Headers"AttributesinTables
Unlikeusingthe"scope"attribute,usingthe"id"and"headers"attributesrequiresthateverydatacellinatableinclude
specialattributesforassociation.Althoughitsusefulnessforaccessibilitymayhavebeendiminishedasbrowsersprovide
supportforthe"scope"attribute,the"id"and"headers"attributesarestillveryusefulandprovideapracticalmeansof
providingaccessinsmallertables.
Thefollowingtableismuchmorecomplicatedthanthepreviousexampleanddemonstratestheuseofthe"id"and
"headers"attributesandthenthescopeattribute.Bothmethodsprovideameansofcomplyingwiththerequirementsfor
datatablesinwebpages.Thetableinthisexampleincludestheworkschedulesfortwoemployees.Eachemployeehasa
morningandafternoonworkschedulethatvariesdependingonwhethertheemployeeisworkinginthewinteror
summermonths.The"summer"and"winter"columnseachspantwocolumnslabeled"morning"and"afternoon."
Therefore,ineachcellidentifyingtheworkschedule,theuserneedstobetoldtheemployee'sname(FredorWilma),the
season(SummerorWinter),andtheshift(morningorafternoon).
<table>
<tr>
<th>&nbsp</th>
<thcolspan="2"id="winter">Winter</th>
<thcolspan="2"id="summer">Summer</th>
</tr>
<tr>
<th>&nbsp</th>
<thid="am1">Morning</th>
<thid="pm1">Afternoon</th>
<thid="am2">Morning</th>
<thid="pm2">Afternoon</th>
</tr>
<tr>
<tdid="wilma">Wilma</td>
<tdheaders="wilmaam1winter">911</td>
<tdheaders="wilmapm1winter">126</td>
<tdheaders="wilmaam2summer">711</td>
<tdheaders="wilmapm2summer">123</td>
</tr>
<tr>
<tdid="fred">Fred</td>
<tdheaders="fredam1winter">1011</td>
<tdheaders="fredpm1winter">126</td>
<tdheaders="fredam2summer">911</td>
<tdheaders="fredpm2summer">125</td>
</tr>
</table>
6/14
10/6/2016
Winter
Summer
MorningAfternoonMorningAfternoon
Wilma911
126
711
123
Fred 1011
126
911
125
Codingeachcellofthistablewith"id"and"headers"attributesismuchmorecomplicatedthanusingthe"scope"
attributeshownbelow:
<table>
<tr>
<th>&nbsp</th>
<thcolspan="2"scope="col">Winter</th>
<thcolspan="2"scope="col">Summer</th>
</tr>
<tr>
<th>&nbsp</th>
<thscope="col">Morning</th>
<thscope="col">Afternoon</th>
<thscope="col">Morning</th>
<thscope="col">Afternoon</th>
</tr>
<tr>
<tdscope="row">Wilma</td>
<td>911</td>
<td>126</td>
<td>711</td>
<td>123</td>
</tr>
<tr>
<tdscope="row">Fred</td>
<td>1011</td>
<td>126</td>
<td>911</td>
<td>125</td>
</tr>
</table>
Winter
Summer
MorningAfternoonMorningAfternoon
Wilma911
126
711
123
Fred 1011
126
911
125
Isthesummaryattributeanoption?
Althoughhighlyrecommendedbysomewebpagedesignersasawayofsummarizingthecontentsofatable,the
"summary"attributeoftheTABLEtagisnotsufficientlysupportedbymajorassistivetechnologymanufacturersto
warrantrecommendation.Therefore,webdeveloperswhoareinterestedinsummarizingtheirtablesshouldconsider
placingtheirdescriptionseitheradjacenttotheirtablesorinthebodyofthetable,usingsuchtagsastheCAPTIONtag.
Innoeventshouldwebdevelopersusesummarizingtablesasanalternativetomakingthecontentsoftheirtables
compliantasdescribedabove.
7/14
10/6/2016
(i)Framesshallbetitledwithtextthatfacilitatesframeidentificationandnavigation.
Framesprovideameansofvisuallydividingthecomputerscreenintodistinctareasthatcanbeseparatelyrewritten.
Unfortunately,framescanalsopresentdifficultiesforuserswithdisabilitieswhenthoseframesarenoteasilyidentifiable
toassistivetechnology.Forinstance,apopularuseofframesistocreate"navigationalbars"inafixedpositiononthe
screenandhavethecontentofthewebsiteretrievablebyactivatingoneofthosenavigationalbuttons.Thenewcontent
isdisplayedanotherareaofthescreen.Becausethenavigationalbardoesn'tchange,itprovidesastable"frameof
reference"forusersandmakesnavigationmucheasier.However,userswithdisabilitiesmaybecomelostifthe
differencesbetweenthetwoframesarenotclearlyestablished.
Whatisthebestmethodforidentifyingframes?
Themostobviouswaytoaccomplishthisrequirementistoincludetextwithinthebodyofeachframethatclearly
identifiestheframe.Forinstance,inthecaseofthenavigationbar,awebdevelopershouldconsiderputtingwordssuch
as"NavigationalLinks"atthebeginningofthecontentsoftheframetoletallusersknowthattheframedepicts
navigationallinks.Providingtitleslikethisatthetopofthecontentsofeachframewillsatisfytheserequirements.An
additionalmeasurethatshouldbeconsideredbyagenciesistoincludemeaningfultextinthe<frame>tag's"title"
attribute.Althoughnotcurrentlysupportedbymajormanufacturersofassistivetechnology,the"title"attributeispartof
theHTML4.0specificationandwasintendedtoletwebdevelopersincludeadescriptionoftheframeasaquoteenclosed
string.Demonstratingtheuseofthe"title"attributerequiresabasicunderstandingofhowframesareconstructed.
Whenframesareusedinawebpage,thefirstpagethatisloadedmustincludea<frameset>tagthatenclosesthebasic
layoutoftheframesonthepage.Withinthe<frameset>tag,<frame>tagsspecifythename,initialcontents,and
appearanceofeachseparateframe.Thus,thefollowingexampleusesthe"title"attributetolabeloneframe
"NavigationalLinksFrame"andthesecondframe"ContentsFrame."
<framesetcols="30%,60%">
<framesrc="/navlinks.html"name="navlinks"title="NavigationalLinksFrame">
<framesrc="/geninfo.html"name="contents_page"title="ContentsFrame">
</frame>
Whileassistivetechnologydoesnotyetwidelysupportthe"title"attribute,werecommendincludingthisattributeinweb
pagesusingframes.
Example:ADATechnicalAssistanceProgramTheuseofframeswithNoFramesLink
www.adata.org
8/14
10/6/2016
(j)Pagesshallbedesignedtoavoidcausingthescreentoflickerwithafrequencygreaterthan2Hzandlowerthan55
Hz.
Thisprovisionisnecessarybecausesomeindividualswithphotosensitiveepilepsycanhaveaseizuretriggeredbydisplays
thatflicker,flash,orblink,particularlyiftheflashhasahighintensityandiswithincertainfrequencyranges.The2Hz
limitwaschosentobeconsistentwithproposedrevisionstotheADAAccessibilityGuidelineswhich,inturn,arebeing
harmonizedwiththeInternationalCodeCouncil(ICC)/ANSIA117standard,"AccessibleandUsableBuildingsand
Facilities",ICC/ANSIA117.11998whichreferencesa2Hzlimit.Anupperlimitwasidentifiedat55Hz.
Howcanflashingorflickeringelementsbeidentified?
Flashingorflickeringelementsareusuallyaddedthroughtechnologiessuchasanimatedgif's,Javaapplets,orthirdparty
pluginsorapplications.Javaappletsandthirdpartypluginscanbeidentifiedbythepresenceof<APPLET>or<OBJECT>
tags.Animatedgif'sareimagesthatdownloadinasinglefile(likeordinaryimagefiles),buthavecontentthatchanges
overshortperiodsoftime.Likeotherimages,however,theyareusuallyincorporatedthroughtheuseofthe<IMG>tag.
(k)Atextonlypage,withequivalentinformationorfunctionality,shallbeprovidedtomakeawebsitecomplywiththe
provisionsofthesestandards,whencompliancecannotbeaccomplishedinanyotherway.Thecontentofthetextonly
pageshallbeupdatedwhenevertheprimarypagechanges.
Whatmustatextonlypagecontaintocomplywiththisprovision?
Textonlypagesmustcontainequivalentinformationorfunctionalityastheprimarypages.Also,thetextonlypageshall
beupdatedwhenevertheprimarypagechanges.
ExampleHTMLsourcecode:<divID="textonly"><p><aHREF="../textonly/default.asp">TextOnly</a></p></div>
(l)Whenpagesutilizescriptinglanguagestodisplaycontent,ortocreateinterfaceelements,theinformationprovidedby
thescriptshallbeidentifiedwithfunctionaltextthatcanbereadbyassistivetechnology.
Whataccessibilityproblemscanscriptscause?
Webpageauthorshavearesponsibilitytoprovidescriptinformationinafashionthatcanbereadbyassistivetechnology.
Whenauthorsdonotputfunctionaltextwithascript,ascreenreaderwilloftenreadthecontentofthescriptitselfina
meaninglessjumbleofnumbersandletters.Althoughthisjumbleistext,itcannotbeinterpretedorused.
Howcanwebdeveloperscomplywiththisprovision?
WebdevelopersworkingwithJavaScriptfrequentlyusesocalledJavaScriptURL'sasaneasywaytoinvokeJavaScript
functions.Typically,thistechniqueisusedaspartof<a>anchorlinks.Forinstance,thefollowinglinkinvokesa
JavaScriptfunctioncalledmyFunction:
<ahref="javascript:myFunction()">StartmyFunction</a>
Thistechniquedoesnotcauseaccessibilityproblemsforassistivetechnology.Amoredifficultproblemoccurswhen
developersuseimagesinsideofJavaScriptURL'swithoutprovidingmeaningfulinformationabouttheimageortheeffect
oftheanchorlink.Forinstance,thefollowinglinkalsoinvokestheJavaScriptfunctionmyFunction,butrequirestheuser
toclickonanimageinsteadofthetext"StartmyFunction":
<ahref="javascript:myFunction()"><imgsrc="/myFunction.gif"></a>
Thistypeoflink,aswritten,presentstremendousaccessibilityproblems,butthoseproblemscaneasilyberemedied.The
<img>tag,ofcourse,supportsthe"alt"attributethatcanalsobeusedtodescribetheimageandtheeffectofclickingon
9/14
10/6/2016
thelink.Thus,thefollowingrevisionremediestheaccessibilityproblemscreatedinthepreviousexample:
<ahref="javascript:myFunction()"><imgsrc="/myFunction.gif"alt="picturelinkforstartingmyFunction"></a>
Anothertechniqueadvocatedbysomedevelopersistousethe"title"attributeofthe<a>tag.Forinstance,thefollowing
exampleincludesameaningfuldescriptionina"title"attribute:
<atitle="thislinkstartsmyFunction"href="javascript:myFunction()"><imgsrc="/myFunction.gif"></a>
Thistagissupportedbysomebutnotallassistivetechnologies.Therefore,whileitispartoftheHTML4.0specifications,
authorsshouldusethe"alt"tagintheenclosedimage.
Finally,thebrowser'sstatusline(atthebottomofthescreen)typicallydisplaystheURLofanylinksthatthemouseis
currentlypointingtowards.Forinstance,ifclickingonananchorlinkwillsendtheusertohttp://www.usdoj.gov,that
URLwillbedisplayedinthestatuslineiftheuser'smouselingersontopoftheanchorlink.InthecaseofJavaScript
URL's,thestatuslinecanbecomefilledwithmeaninglesssnipsofscript.Topreventthiseffect,somewebdevelopersuse
special"eventhandlers"suchasonmouseoverandonmouseouttooverwritethecontentsofthestatuslinewitha
custommessage.Forinstance,thefollowinglinkwillreplacethecontentinthestatuslinewithacustommessage"Nice
Choice".
<ahref="javascript:myFcn()"onmouseover="status='NiceChoice'returntrue"onmouseout="status=''"><img
src="/pix.gif"></a>
Thistextrewrittenintothestatuslineisdifficultorimpossibletodetectwithascreenreader.Althoughrewritingthe
statuslinedidnotinterferewiththeaccessibilityorinaccessibilityoftheJavaScriptURL,webdevelopersshouldensure
thatallimportantinformationconveyedinthestatuslinealsobeprovidedthroughthe"alt"attribute,asdescribedabove.
JavaScriptusessocalled"eventhandlers"asatriggerforcertainactionsorfunctionstooccur.Forinstance,aweb
developermayembedaJavaScriptfunctioninawebpagethatautomaticallychecksthecontentofaformfor
completenessoraccuracy.Aneventhandlerassociatedwitha"submit"buttoncanbeusedtotriggerthefunctionbefore
theformisactuallysubmittedtotheserverforprocessing.Theadvantageforthegovernmentagencyisthatitsaves
governmentresourcesbynotrequiringthegovernment'sservertodotheinitialchecking.Theadvantageforthe
computeruseristhatfeedbackabouterrorsisalmostinstantaneousbecausetheuseristoldabouttheerrorbeforethe
informationisevensubmittedovertheInternet.
Webdevelopersmustexercisesomecautionwhendecidingwhicheventhandlerstouseintheirwebpages,because
differentscreenreadersprovidedifferentdegreesofsupportfordifferenteventhandlers.Thefollowingtableincludes
recommendationsforusingmanyofthemorepopulareventhandlers:
onClickTheonClickeventhandleristriggeredwhentheuserclicksonceonaparticularitem.Itiscommonlyusedon
linksandbuttonelementsand,usedinconnectionwiththeseelements,itworkswellwithscreenreaders.Ifclicking
ontheelementassociatedwiththeonClickeventhandlertriggersafunctionorperformssomeotheraction,
developersshouldensurethatthecontextmakesthatfactcleartoallusers.DonotusetheonClickeventhandlersfor
formelementsthatincludeseveraloptions(e.g.selectlists,radiobuttons,checkboxes)unlessabsolutelynecessary.
onDblClickTheonDblClickeventhandlerissetoffwhentheuserclickstwicerapidlyonthesameelement.In
additiontotheaccessibilityproblemsitcreates,itisveryconfusingtousersandshouldbeavoided.
onMouseDownandonMouseUpTheonMouseDownandonMouseUpeventhandlerseachhandlethetwohalvesof
clickingamousewhileoveranelementtheprocessof(a)clickingdownonthemousebuttonand(b)thenreleasing
themousebutton.LikeonDblClick,thistagshouldbeusedsparingly,ifatall,bywebdevelopersbecauseitisquite
confusing.Inmostcases,developersshouldoptfortheonClickeventhandlerinsteadofonMouseDown.
onMouseOverandonMouseOutThesetwoeventhandlersareverypopularonmanywebsites.Forinstance,so
calledrollovergif's,whichswapimagesonawebpagewhenthemousepassesoveranimage,typicallyusebothof
theseeventhandlers.Theseeventhandlersneithercanbeaccessedbythemousenorinterferewithaccessibilitya
screenreadersimplybypassesthementirely.Accordingly,webdesignerswhousetheseeventhandlersshouldbe
carefultoduplicatetheinformation(ifany)providedbytheseeventhandlersthroughothermeans.
onLoadandonUnloadBothoftheseeventhandlersareusedfrequentlytoperformcertainfunctionswhenaweb
pagehaseithercompletedloadingorwhenitunloads.Becauseneithereventhandleristriggeredbyanyuser
interactionwithanelementonthepage,theydonotpresentaccessibilityproblems.
https://www.accessboard.gov/guidelinesandstandards/communicationsandit/aboutthesection508standards/guidetothesection508standards/webba
10/14
10/6/2016
onChangeThiseventhandlerisverycommonlyusedfortriggeringJavaScriptfunctionsbasedonaselectionfrom
withina<select>tag.Surprisingly,itpresentstremendousaccessibilityproblemsformanycommonlyusedscreen
readersandshouldbeavoided.Instead,webdevelopersshouldusetheonClickeventhandler(associatedwithalinkor
buttonthatisadjacenttoa<select>tag)toaccomplishthesamefunctions.
onBlurandonFocusTheseeventhandlersarenotcommonlyusedinwebpages.Whiletheydon'tnecessarily
presentaccessibilityproblems,theirbehaviorisconfusingenoughtoawebpagevisitorthattheyshouldbeavoided.
(m)Whenawebpagerequiresthatanapplet,pluginorotherapplicationbepresentontheclientsystemtointerpret
pagecontent,thepagemustprovidealinktoapluginorappletthatcomplieswith1194.21(a)through(l).
WhilemostwebbrowserscaneasilyreadHTMLanddisplayittotheuser,severalprivatecompanieshavedeveloped
proprietaryfileformatsfortransmittinganddisplayingspecialcontent,suchasmultimediaorverypreciselydefined
documents.Becausethesefileformatsareproprietary,webbrowserscannotordinarilydisplaythem.Tomakeitpossible
forthesefilestobeviewedbywebbrowsers,addonprogramsor"plugins"canbedownloadedandinstalledontheuser's
computerthatwillmakeitpossiblefortheirwebbrowserstodisplayorplaythecontentofthefiles.Thisprovision
requiresthatwebpagesthatprovidecontentsuchasRealAudioorPDF(AdobeAcrobat'sPortableDocumentFormat)files
alsoprovidealinktoapluginthatwillmeetthesoftwareprovisions.Itisverycommonforawebpagetoprovidelinksto
neededplugins.Forexample,webpagescontainingRealAudioalmostalwayshavealinktoasourceforthenecessary
player.Thisprovisionplacesaresponsibilityonthewebpageauthortoknowthatacompliantapplicationexists,before
requiringaplugin.
Howcanpluginsandappletsbedetected?
Pluginscanusuallybedetectedbyexaminingapage'sHTMLforthepresenceofan<OBJECT>tag.Someplugin
manufacturers,however,mayrequiretheuseofproprietarytags.Likeplugins,appletscanalsobeidentifiedbythe
presenceofan<OBJECT>tagintheHTMLsourceforawebpage.Also,an<APPLET>tagmayalsosignaltheinclusionof
anappletinawebpage.
(n)Whenelectronicformsaredesignedtobecompletedonline,theformshallallowpeopleusingassistivetechnologyto
accesstheinformation,fieldelements,andfunctionalityrequiredforcompletionandsubmissionoftheform,includingall
directionsandcues.
Whydoelectronicformspresentdifficultiestoscreenreaders?
Currently,theinteractionbetweenformcontrolsandscreenreaderscanbeunpredictable,dependinguponthedesignof
thepagecontainingthesecontrols.HTMLformsposeaccessibilityproblemswhenwebdevelopersseparateaform
elementfromitsassociatedlabelortitle.Forinstance,ifaninputboxisintendedforreceivingauser'slastname,theweb
developermustbecarefulthatthewords"lastname"(orsomesimilartext)appearnearthatinputboxoraresomehow
associatedwithit.Althoughthismayseemlikeanobviousrequirement,itisextremelyeasytoviolatebecausethevisual
proximityofaformelementanditstitleoffersnoguaranteethatascreenreaderwillassociatethetwoorthatthis
associationwillbeobvioustoauserofassistivetechnology.
Thefollowingformdemonstratestheseproblems.Visually,thisformispartofatableandeachfieldiscarefullyplacedin
tablecellsadjacenttotheircorrespondinglabels(n.b.formattingformswithtablesarebynomeanstheonlysituation
presentingtheaccessibilityproblemsinherentinformstablesmerelyillustratetheproblemmostclearly).
Whiletherelationshipbetweenthetitles"FirstName"or"LastName"andtheirrespectiveinputboxesmaybeobvious
fromvisualinspection,therelationshipisnotobvioustoascreenreader.Instead,ascreenreadermaysimplyannounce
"inputbox"whenencounteringeachinputbox.ThereasonforthesedifficultiesisrevealedfrominspectingtheHTML
sourceforthistable.Thefollowingcodeisasimplifiedversionofthistable.
11/14
10/6/2016
<FORM>
<TABLE>
<TR>
<TD><B>FIRSTNAME:</B></TD>
<TD><INPUTTYPE="TEXT"NAME="FIRSTNAME"></TD>
</TR>
<TR>
<TD><B>LASTNAME:</B></TD>
<TD><INPUTTYPE="TEXT"NAME="LASTNAME"></TD>
</TR>
</TABLE>
<P>
<INPUTTYPE="SUBMIT"VALUE="SUBMIT">
</FORM>
Thetwopairsofformelementsareindicatedinboldabove.Theproblemcreatedbylayingoutformelementsinsideof
thistableisnowcleartheformelementsareseparatedfromtheirlabelsbytheformattinginstructionsforthetable.
HowcandevelopersprovideaccessibleHTMLforms?
Thefirstruleofthumbistoplacelabelsadjacenttoinputfields,notinseparatecellsofatable.Forthewebdeveloper
whodoesnotwishtoplaceformelementsimmediatelyadjacenttotheircorrespondingtitles,theHTML4.0specification
includesthe<LABEL>tagthatletswebdevelopersmarkspecificelementsas"labels"andthenassociateaformelement
withthatlabel.Therearegenerallytwowaystousethelabeltag:explicitlabelsandimplicitlabels.
ExplicitLabels"WorkWell
Experiencehasshownthatexplicitlabelingworksextremelywellwithallpopularassistivetechnologyandare
recommendedinallbuttheverysimplestoftables.Werecommendthatallagenciesensurethattheirwebdevelopers
arefamiliarwiththeseimportantconcepts.Using"explicit"labelsinvolvestwodistinctsteps:
Usethe<LABEL>TagandAssociated"FOR"AttributetoTagLabels.Inotherwords,identifytheexactwordsthatyou
wanttouseasthelabelfortheformelementandenclosethosewordsina<LABEL>tag.Usethe"FOR"attributeto
uniquelyidentifythatelement.
Usethe"ID"AttributeintheAssociatedFormElement.Everyformelementsupportsthe"ID"attribute.Bysetting
thisattributetotheidentifierusedinthe"FOR"attributeoftheassociated<LABEL>tag,you"tie"thatformelement
toitsassociatedlabel.Forinstance,wehaverewrittentheHTMLcodeforoursimpleforminsideatabletoinclude
explicitlabelsbelow.ThenewHTMLcodefortheexplicitlabelsisindicatedinbold:
<FORM>
<TABLE>
<TR>
<TD><B><LABELFOR="first">FIRSTNAME:</LABEL></B></TD>
<TD><INPUTTYPE="TEXT"NAME="FIRSTNAME"ID="first"></TD>
</TR>
<TR>
<TD><B><LABELFOR="last">LASTNAME:</LABEL></B></TD>
<TD><INPUTTYPE="TEXT"NAME="LASTNAME"ID="last"></TD>
</TR>
</TABLE>
<P>
<INPUTTYPE="SUBMIT"VALUE="SUBMIT">
</FORM>
Inanutshell,that'sallthereistomakingHTMLformelementsaccessibletoassistivetechnology.Experiencehasshown
thatthistechniqueworksextremelywellinmuchmorecomplicatedandconvolutedformsanditshouldworkwellinall
agencyHTMLforms.
12/14
10/6/2016
AvoidUsing"ImplicitLabels"
In"implicit"labels,theformelementanditsassociatedlabelarecontainedwithinanopening<LABEL>tagandaclosing
</LABEL>tag.Forinstance,inthetableabove,animplicitlabeltoassociatethewords"FirstName"withitsassociated
inputcell,wecoulduseanimplicitlabelasfollows:
<LABEL>
<TR>
<TD><B>FIRSTNAME:</B></TD>
<TD><INPUTTYPE="TEXT"NAME="FIRSTNAME"></TD>
</TR>
</LABEL>
Experiencehasshownthatimplicitlabelingshouldbeavoidedfortworeasons.First,implicitlabelingisnotreliably
supportedbymanyscreenreadersand,inparticular,doesnotworkwellifexplicitlabelsaresimultaneouslyused
anywhereonthesamewebpage.Often,theoutputcanbewildlyinaccurateandconfusing.Second,ifanytextseparates
alabelfromitsassociatedformelement,animplicitlabelbecomesimpracticalandconfusingbecausethelabelitselfisno
longereasilyidentifiedwiththeformelement.
(o)Amethodshallbeprovidedthatpermitsuserstoskiprepetitivenavigationlinks.
Whydonavigationallinkspresentimpedimentstoscreenreadersandothertypesofassistivetechnologies?
Thisprovisionprovidesamethodtofacilitatetheeasytrackingofpagecontentthatprovidesusersofassistivetechnology
theoptiontoskiprepetitivenavigationlinks.Webdevelopersroutinelyplaceahostofroutinenavigationallinksata
standardlocationoftenacrossthetop,bottom,orsideofapage.Ifanondisableduserreturnstoawebpageandknows
thatheorshewantstoviewthecontentsofthatparticularpageinsteadofselectinganavigationlinktogotoanother
page,heorshemaysimplylookpastthelinksandbeginreadingwhereverthedesiredtextislocated.Forthosewhouse
screenreadersorothertypesofassistivetechnologies,however,itcanbeatediousandtimeconsumingchoretowaitfor
theassistivetechnologytoworkthroughandannounceeachofthestandardnavigationallinksbeforegettingtothe
intendedlocation.Inordertoalleviatethisproblem,thesection508rulerequiresthatwhenrepetitivenavigationallinks
areused,theremustbeamechanismforuserstoskiprepetitivenavigationallinks.
Example:USDATargetCenterandDOLwebsitesusetheSkipRepetitiveNavigationalLinks.
http://www.usda.gov/oo/target.htm
http://www.dol.gov/dol/odep/
13/14
10/6/2016
(p)Whenatimedresponseisrequired,theusershallbealertedandgivensufficienttimetoindicatemoretimeis
required.
Whydotimedresponsespresentproblemstowebuserswithdisabilities?
Webpagescanbedesignedwithscriptssothatthewebpagedisappearsor"expires"ifaresponseisnotreceivedwithina
specifiedamountoftime.Sometimes,thistechniqueisusedforsecurityreasonsortoreducethedemandsonthe
computerservingthewebpages.Someone'sdisabilitycanhaveadirectimpactonthespeedwithwhichheorshecan
read,movearound,orfillinawebform.Forinstance,someonewithextremelylowvisionmaybeaslowerthanaverage
reader.Apagemay"timeout"beforeheisabletofinishreadingit.Manyforms,whenthey"timeout"automatically,also
deletewhateverdatahasbeenentered.Theresultisthatsomeonewithadisabilitywhoisslowtoenterdatacannot
completetheform.Forthisreason,whenatimedresponseisrequired,theusershallbealertedviaapromptandgiven
sufficienttimetoindicatewhetheradditionaltimeisneeded.
Example:ThriftSavingsPlan
www.tsp.gov
14/14

508 Accessibility Standards For Web-Based Intranet and Internet Information and Applications

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

508 Accessibility Standards For Web-Based Intranet and Internet Information and Applications

Загружено:

Авторское право:

Доступные форматы

10/6/2016

Web-based Intranet and Internet Information and Applications (1194.22)

Вам также может понравиться