10 Ways To Make Your XHTML Site Accessible Using Web Standards

By Michael Irigoyen
PublishedonJune18th,2009in

Withoutargument,oneofthemostimportantthingstoconsiderwhencreatingawebsiteis thatitbeaccessibletoeveryonewhowantstoviewit.Doesyourwebsiteplaynicewith screenreaders?Canauseroverrideyourstylesheetwithamoreaccessibleoneandstillsee everythingyourwebsitehastooffer?WouldanotherWebdeveloperbeembarrassedifthey sawyourcode?Ifyourwebsiteisstandardscompliant,youcouldmoreconfidentlyanswer thesequestions.

Letstakealookat10waystoimprovetheaccessibilityofyourXHTMLwebsiteby makingitstandardscompliant.Wellgotheextramileandincludecriteriathatfallbeyond

thestandardssetbytheW3Cbutwhichyoushouldfollowtomakeyourwebsitemore accessible.Eachsectionliststhecriteriayouneedtomeet,explainswhyyouneedtomeet themandgivesexamplesofwhatyoushouldandshouldntdo.

1.SpecifyTheCorrectDOCTYPE

Criteria. TheDocumentTypedeclaration(DOCTYPE)isaninstructionthatsitsatthetopofyour document.TheDOCTYPEisrequiredtotellthebrowserhowtocorrectlydisplayyourpage. WhydoIneedit? WithoutaproperDOCTYPEdeclaration,thebrowsertriestoautomaticallyassigna DOCTYPEtothepage.Thiscanslowdowntherenderingofyourpageandcausethepageto bedisplayedinconsistentlyorincorrectlyindifferentbrowsers.Consistencyisthenameofthe gamewhenitcomestoaccessibility. Okay,sowhatdoIdo? IncludeaproperDOCTYPEatthetopofeachpageofyourwebsite.XHTML1.1is recommended,butXHTML1.0Strictisanoptionaswell. XHTML1.1 Thisisthecleanestwaytocodeyourwebsite.Allstyleforthewebsiteis containedinexternalCSSfiles.BesuretoaddtheXMLdeclarationatthetop, whichisessentialbecauseXHTML1.1isconsideredtobetrueXML.
< ? x m l v e r s i o n = " 1 . 0 " e n c o d i n g = " U T F 8 " ? > < b r > < ! D O C T Y P E h t m l P U B L I C " 1/ / W 3 C / / D T D X H T M L 1 . 0 S t r i c t / / E N " < b r > " h t t p : / / w w w . w 3 . o r g / T R / x h t m l 1 / D T D / x h t m l 1 s t r i c t . d t d " >

Note: ifyouareusingXHTML1.1,youcannotincludetheXMLdeclarationfor visitorswhoareusingInternetExplorer6.Instead,tosupportIE6users,you shouldconditionallydisplaytheXMLdeclaration.

XHTML1.0Strict AnalternativetoXHTML1.1.Thetechnicaldifferencesbetweenthetwoare minor,butusingXHTML1.1isrecommendedtoaccommodatefuturewebsite growth.

< ! D O C T Y P E h t m l P U B L I C " / / W 3 C / / D T D X H T M L 1 . 0 1 S t r i c t / / E N " < b r > " h t t p : / / w w w . w 3 . o r g / T R / x h t m l 1 / D T D / x h t m l 1 s t r i c t . d t d " >

TwootherXHTML1.0declarationsexistfornicheuses.ButusingeitheroftheseDOCTYPEs isdiscouraged. XHTML1.0Transitional Thisisusedforpagesthatneedtobeviewedonlegacybrowsersthatdont supportCSS.Transitionalallowsinlinestylestobeappliedtoelements.

< ! D O C T Y P E h t m l P U B L I C " / / W 3 C / / D T D X H T M L 1 . 0 1T r a n s i t i o n a l / / E N " < b r > " h t t p : / / w w w . w 3 . o r g / T R / x h t m l 1 / D T D / x h t m l 1 t r a n s i t i o n a l . d t d " >

XHTML1.0Frameset UseFramesetonlyonwebsitesthatrequireHTMLframes.Ofcourse,staticCSS divisionsshouldbeusedinsteadofHTMLframes,right?

1< ! D O C T Y P E h t m l P U B L I C " / / W 3 C / / D T D X H T M L 1 . 0 F r a m e s e t / / E N " 2" h t t p : / / w w w . w 3 . o r g / T R / x h t m l 1 / D T D / x h t m l 1 f r a m e s e t . d t d " >

2.DefineTheNamespaceAndDefault Language

Criteria. TheXHTMLnamespaceanddefaultlanguageofyourpagemustbeincludedinthe< h t m l >

element. WhydoIneedit? XHTMLwebsitesshoulddefinethedefaultnamespace.Anamespacedefinesallofthe elementsyoucanusewithinthepage.Settingadefaultlanguageallowsascreenreaderto tellthevisitorwhichlanguagethepageisinwithoutevenseeingthecontent.Itisalsorequired byW3Cstandards. Okay,sowhatdoIdo? Appendthex m l n s andl a n g attributestothe< h t m l > element.InXHTML1.1,thel a n g attribute isx m l : l a n g . XHTML1.1
1< h t m l x m l n s = " h t t p : / / w w w . w 3 . o r g / 1 9 9 9 / x h t m l " x m l : l a n g = " e n " >

XHTML1.0
1< h t m l x m l n s = " h t t p : / / w w w . w 3 . o r g / 1 9 9 9 / x h t m l " l a n g = " e n " >

3.SupplyProperMetaTags

Criteria. Supplytheh t t p e q u i v ,l a n g u a g e ,d e s c r i p t i o n andk e y w o r d s metatagsinthe< h e a d > elementonyourpage. WhydoIneedit? Theh t t p e q u i v metatagisbyfarthemostimportant.Usedinconjunctionwiththe DOCTYPE,ithelpsthebrowserdisplayyourpagecorrectly.Thel a n g u a g e metatagis importantfornonEnglishwebsites,butithasbecomecommonpracticetoincludeitonevery page,despitethelanguage.Thed e s c r i p t i o n andk e y w o r d s metatagsarerequiredmorefor accessibilitythantomeetstandardsbecausetheyarecommonlyusedbyscreenreaders.

Okay,sowhatdoIdo? Includethesefourmetatagsinthe< h e a d > elementonyourpage.

1< m e t a h t t p e q u i v = " c o n t e n t t y p e " c o n t e n t = " t e x t / h t m l c h a r s e t = u t f 8 " / > 2< m e t a n a m e = " l a n g u a g e " c o n t e n t = " e n " / > 3< m e t a n a m e = " d e s c r i p t i o n " c o n t e n t = " U p d a t i n g W i n d o w s u s i n g M i c r o s o f t U p d a t e " / > < m e t a n a m e = " k e y w o r d s " c o n t e n t = " u p d a t i n g , w i n d o w s , m i c r o s o f t , u p d a t e , 4 t e c h w o r l d " / >

Makesurethelanguageyouspecifyinthe< h t m l > elementisthesameoneyoudefineinthe l a n g u a g e metatag.Also,ifyouareusingXHTML1.1,makesurethee n c o d i n g specification intheXMLdeclarationmatchesthec h a r s e t intheh t t p e q u i v metatag.

4.UseAccessibleNavigation

Criteria. Allowuserstoeasilyidentifywhatpageandsubsectionofapagetheyareviewing. WhydoIneedit? Amajorityofwebsitestodayuseacombinationoftext,colorsandgraphicstylestoorganize anddisplayinformation.Manypeoplewithdisabilitiescannotseeorusegraphicsandthus relyonscreenreaders,customstylesheetsandotheraccessibilitytoolstoretrieve information.Regardlessofwhovisitsyourwebsite,implementinganaccessiblenavigation systemhelpsthemquicklyandaccuratelyfindtheinformationtheyarelookingfor. Okay,sowhatdoIdo? Createadescriptivetitleforyourwebsite,andthensplitthepageintosubsectionsusingthe headingelements. Includeexactlyone< t i t l e > elementwithinthe< h e a d > element:

1< t i t l e > S m a s h i n g M a g a z i n e < / t i t l e >

Includeexactlyone< h 1 > elementonthepage.The< h 1 > elementshouldmatchall orpartofyour< t i t l e > element:

< h 1 > S m a s h i n g M a g a z i n e : W e s m a s h y o u w i t h t h e i n f o r m a t i o n t h a t m a k e s 1 y o u r l i f e e a s i e r . R e a l l y ! < / h 1 >

Allheadingtags(< h 1 > ,< h 2 > ,etc.)shouldhavetextualcontent.A l t tagson imagesdonotcount. Incorrect:

1< h 2 > < i m g s r c = " l o g o . p n g " a l t = " S m a s h i n g M a g a z i n e " / > < / h 2 >

Correct:
< h 2 > < i m g s r c = " l o g o . p n g " a l t = " S m a s h i n g M a g a z i n e " / > S m a s h i n g 1 M a g a z i n e < / h 2 >

5.ProperlyEscapeJavaScript

Criteria. WhenincludingJavaScriptdirectlyonthepage,youshouldproperlyescapeitascharacter data. WhydoIneedit? InHTML,textinthe< s c r i p t > elementisrenderedasCDATA(characterdata).InXHTML,text inthe< s c r i p t > elementistreatedasPCDATA(parsedcharacterdata).PCDATAis processedbytheW3Cvalidatorand,therefore,mustbeescapedproperlyasCDATA.In addition,whilemostscreenreadersareintelligentenoughtoignorecontentwithinthe < s c r i p t > element,regardlessofthetypeofdataitcontains,ifthecodeisntcorrectly

escaped,anotherpotentialpointoffailureiscreatedinaccessibility. Okay,sowhatdoIdo? UsetheCDATAtagsaroundanycontentinthe< s c r i p t > element.Wealsocommentoutthe CDATAtagsforlegacybrowsersupport. Example:

1< s c r i p t t y p e = " t e x t / j a v a s c r i p t " > 2/ / < ! [ C D A T A [ 3$ ( f u n c t i o n ( ) { 4$ ( ' # d i v o n e ' ) . t i p s y ( { f a d e : t r u e , g r a v i t y : ' n ' } ) 5$ ( ' # d i v t w o ' ) . t i p s y ( { f a d e : t r u e , g r a v i t y : ' n ' } ) 6} ) 7/ / ] ] > 8< / s c r i p t >

6.ProperlyEscapeHTMLEntities

Criteria. Ampersands,quotes,greaterandlessthansignsandotherHTMLmustbeescaped. WhydoIneedit? UsingHTMLentities,especiallyinURLs,cancausenotonlyvalidationproblemsbutalso usabilityproblems.Forexample,theampersand(&)happenstobetheinitialcharacterin HTMLentities.Ifyoudonotproperlyescapetheampersand,thebrowserassumesyouare tellingittoshowanHTMLentity,onethatdoesntevenexist. Okay,sowhatdoIdo? EscapeHTMLentitieswiththeirappropriateentityvalue.

Replace&with&amp Replace"with&quot Replace<with&lt Replace>with&gt OtherHTMLentities1 Example:

< a h r e f = " h t t p : / / w w w . e x a m p l e . c o m ? p a g e = 1 & a m p v i e w = t o p " > A & q u o t C o o l & q u o t 1 L i n k < / a > 2< c o d e > & l t d i v i d = & q u o t c o n t e n t & q u o t & g t T e s t i n f o r m a t i o n . & l t / d i v & g t < / c o d e >

7.UseOnlyLowercaseTagsAndAttributes

Criteria. Allelementsandelementattributesmustbelowercase.Attributevaluescanbeboth uppercaseandlowercase. WhydoIneedit? BecausetheXHTMLstandardsetbytheW3Csaysso2 . Okay,sowhatdoIdo? Makesureyouuseonlylowercaseforallelementsandattributes.Acommonmistakemost developersmakeisusinguppercaseletterswhengivinganelementJavaScriptattributes (e.g.onClick,onLoad,etc.). Incorrect:

1< A h r e f = " # " o n C l i c k = " d o S o m e t h i n g ( ) " > S e n d u s a m e s s a g e < / A >

Correct:
1< a h r e f = " # " o n c l i c k = " d o S o m e t h i n g ( ) " > S e n d u s a m e s s a g e < / a >

8.LabelAllFormInputElements

Criteria. Allformelementsshouldbegivena< l a b e l > tag. WhydoIneedit? The< l a b e l > elementaddsfunctionalityforpeoplewhousethemouseandascreenreader. Clickingontextwithinthe< l a b e l > elementfocusesthecorrespondingformelement.Screen readerscanreadthelabelsothatvisitorsknowwhatinformationtoprovide. Okay,sowhatdoIdo? Adda< l a b e l > elementtoeachfieldinyourform. Example:
< p > < l a b e l f o r = " s e a r c h b o x " > S e a r c h : < / l a b e l > < i n p u t t y p e = " t e x t " i d = " s e a r c h b o x " / > 1 < / p > < p > < i n p u t t y p e = " c h e c k b o x " i d = " r e m e m b e r " / > < l a b e l f o r = " r e m e m b e r " > 2 R e m e m b e r < / l a b e l > < / p >

9.SupplyAlternativeContentForImages

Criteria. Everyimageonyourpageshouldbeaccompaniedbyatextualalttag. WhydoIneedit? Thealttagtellsvisitorswhatanimageisifitcannotbedisplayedorviewed.TheAmericans withDisabilitiesActdictatesthatallimagesmusthaveanalttag. Okay,sowhatdoIdo? Includeonewitheveryimage.Thealttagattributemustincludetextandcannotbeleftblank.If youuseimagesinyourdesignforstylisticreasonsalone,findawaytoachievethatstyleusing CSS.Anddontforgettoprovideexplicitvaluesforwidthandheightofyourimages. Incorrect:
1< i m g s r c = " p i c t u r e . p n g " / > 2< i m g s r c = " s p a c e r . g i f " a l t = " " / >

Correct:
1< i m g s r c = " p i c t u r e . p n g " a l t = " A w a r m s u n s e t " w i d t h = " 4 5 0 " h e i g h t = " 3 5 0 " / >

10.UseThe"id"And"class"CSSAttributes Correctly

Criteria.

WhenusingCSSattributes,useeach"id"onlyonceonapage.Useeach"class"asmuchas youwant. WhydoIneedit? Developersoftengetcarelessandincludean"id"multipletimesonasinglepage.Thiscan createunexpectedresultsacrossdifferentbrowsersandgetyouabigredValidationFailed fromtheW3C. Okay,sowhatdoIdo? Becertaintouseaparticular"id"onlyonceonapage.Ifyouneedthesamestyleappliedto mutlipleelements,usethe"class"attribute. Incorrect:
1< p i d = " l e f t N a v " > H o m e < / p > 2< p i d = " l e f t N a v " > C o n t a c t < / p >

Correct:
1< p i d = " h o m e N a v " c l a s s = " l e f t N a v " > H o m e < / p > 2< p i d = " c o n t a c t N a v " c l a s s = " l e f t N a v " > C o n t a c t < / p >

Summary:Validate,Validate,Validate!
Usingallthetechniquesinthisarticle,youllbewellonyourwaytoamoreaccessible, standardscompliantwebsite.Butdontstopthere!Continuallyvalidateyourwebsiteand addressproblemsimmediately.Hereisalistofvalidatorsyoushouldrunoneverypageyou create: W3CMarkupValidationService W3CCSSValidationService HiSoftwareCynthiaSaysAccessibilityValidation FunctionalAccessibilityEvaluator (al)

F OOT N OT E S :

1 OtherHTMLentitieshttp://htmlhelp.com/reference/html40/entities/special.html 2 sayssohttp://www.w3.org/TR/xhtml1/#h4.2

MichaelIrigoyenisaWebdeveloperandgraphicdesignerforComputer InfrastructureSupportServicesatIllinoisStateUniversity.

Withacommitmenttoqualitycontentforthedesigncommunity. SmashingMediaGmbH.MadeinGermany.20062012.http://www.smashingmagazine.com