A Web Standards Checklist, How to make a proper website A web standards checklist The term web standards can

mean different things to different people. For some, it is 'table-free sites', for others it is ' sing !alid code'. Howe!er, web standards are m ch broader than that. A site b ilt to web standards sho ld adhere to standards "HT#$, %HT#$, %#$, CSS, %S$T, &'#, #ath#$, S() etc* and p rs e best practices "!alid code, accessible code, semanticall+ correct code, ser-friendl+ ,-$s etc*. .n other words, a site b ilt to web standards sho ld ideall+ be lean, clean, CSS-based, accessible, sable and search engine friendl+. Abo t the checklist This is not an ber-checklist. There are probabl+ man+ items that co ld be added. #ore importantl+, it sho ld not be seen as a list of items that m st be addressed on e!er+ site that +o de!elop. .t is simpl+ a g ide that can be sed/ 0 to show the breadth of web standards 0 as a hand+ tool for de!elopers d ring the prod ction phase of websites 0 as an aid for de!elopers who are interested in mo!ing towards web standards The checklist 1.2 alit+ of code 1. &oes the site se a correct &oct+pe3 4. &oes the site se a Character set3 5. &oes the site se (alid "%*HT#$3 6. &oes the site se (alid CSS3 7. &oes the site se an+ CSS hacks3 8. &oes the site se nnecessar+ classes or ids3 9. .s the code well str ct red3 :. &oes the site ha!e an+ broken links3 ;. How does the site perform in terms of speed<page si=e3 1>. &oes the site ha!e ?a!aScript errors3 4. &egree of separation between content and presentation 1. &oes the site se CSS for all presentation aspects "fonts, colo r, padding, borders etc*3 4. Are all decorati!e images in the CSS, or do the+ appear in the "%*HT#$3 5. Accessibilit+ for sers 1. Are @alt@ attrib tes sed for all descripti!e images3 4. &oes the site se relati!e nits rather than absol te nits for teAt si=e3 5. &o an+ aspects of the la+o t break if font si=e is increased3 6. &oes the site se !isible skip men s3 7. &oes the site se accessible forms3 8. &oes the site se accessible tables3 9. .s there s fficient colo r brightness<contrasts3 :. .s colo r alone sed for critical information3 ;. .s there dela+ed responsi!eness for dropdown men s "for sers with red ced motor skills*3 1>. Are all links descripti!e "for blind sers*3 6. Accessibilit+ for de!ices 1. &oes the site work acceptabl+ across modern and older browsers3 4. .s the content accessible with CSS switched off or not s pported3 5. .s the content accessible with images switched off or not s pported3 6. &oes the site work in teAt browsers s ch as $+nA3 7. &oes the site work well when printed3 8. &oes the site work well in Hand Held de!ices3 9. &oes the site incl de detailed metadata3 :. &oes the site work well in a range of browser window si=es3 7. Basic ,sabilit+ 1. .s there a clear !is al hierarch+3

4. Are heading le!els eas+ to disting ish3 5. &oes the site ha!e eas+ to nderstand na!igation3 6. &oes the site se consistent na!igation3 7. Are links nderlined3 8. &oes the site se consistent and appropriate lang age3 9. &o +o ha!e a sitemap page and contact page3 Are the+ eas+ to find3 :. For large sites, is there a search tool3 ;. .s there a link to the home page on e!er+ page in the site3 1>. Are !isited links clearl+ defined with a niC e colo r3 8. Site management 1. &oes the site ha!e a meaningf l and helpf l 6>6 error page that works from an+ depth in the site3 4. &oes the site se friendl+ ,-$s3 5. &o +o r ,-$s work witho t @www@3 6. &oes the site ha!e a fa!icon3 1. 2 alit+ of code 1.1 &oes the site se a correct &oct+pe3 A doct+pe "short for 'doc ment t+pe declaration'* informs the !alidator which !ersion of "%*HT#$ +o 're sing, and m st appear at the !er+ top of e!er+ web page. &oct+pes are a ke+ component of compliant web pages/ +o r mark p and CSS won't !alidate witho t them. C'&D http/<<www.alistapart.com<articles<doct+pe< #ore/ C'&D http/<<www.w5.org<2A<4>>4<>6<!alid-dtd-list.html C'&D http/<<css.maAdesign.com.a <listamatic<abo t-boAmodel.htm C'&D http/<<g tfeldt.ch<matthias<articles<doct+peswitch.html 1.4 &oes the site se a Character set3 .f a ser agent "eg. a browser* is nable to detect the character encoding sed in a Web doc ment, the ser ma+ be presented with nreadable teAt. This information is partic larl+ important for those maintaining and eAtending a m ltiling al site, b t declaring the character encoding of the doc ment is important for an+one prod cing %HT#$<HT#$ or CSS. C'&D http/<<www.w5.org<.nternational<t torials<t torial-char-enc< #ore/ C'&D http/<<www.w5.org<.nternational<'-charset.html 1.5 &oes the site se (alid "%*HT#$3 (alid code will render faster than code with errors. (alid code will render better than in!alid code. Browsers are becoming more standards compliant, and it is becoming increasingl+ necessar+ to write !alid and standards compliant HT#$. C'&D http/<<www.maAdesign.com.a <presentation<sit4>>5<>8.htm #ore/ C'&D http/<<!alidator.w5.org<

1.6 &oes the site se (alid CSS3 Eo need to make s re that there aren't an+ errors in either +o r HT#$ or +o r CSS, since mistakes in either place can res lt in botched doc ment appearance. C'&D http/<<www.me+erweb.com<eric<articles<webre!<1;;;>6.html #ore/ C'&D http/<<Figsaw.w5.org<css-!alidator< 1.7 &oes the site se an+ CSS hacks3 Basicall+, hacks come down to personal choice, the amo nt of knowledge +o ha!e of workaro nds, the specific design +o are tr+ing to achie!e. C'&D http/<<www.mail-archi!e.com<wsgGwebstandardsgro p.org<msg>7:45.html #ore/ C'&D http/<<css-disc ss.inc tio.com<3pageHCssHack C'&D http/<<css-disc ss.inc tio.com<3pageHToHack'rIotToHack C'&D http/<<centricle.com<ref<css<filters< 1.8 &oes the site se nnecessar+ classes or ids3 .'!e noticed that de!elopers learning new skills often end p with good CSS b t poor %HT#$. Specificall+, the HT#$ code tends to be f ll of nnecessar+ di!s and ids. This res lts in fairl+ meaningless HT#$ and bloated st+le sheets. C'&D http/<<www.clagn t.com<blog<44:< 1.9 .s the code well str ct red3 Semanticall+ correct mark p ses html elements for their gi!en p rpose. Well str ct red HT#$ has semantic meaning for a wide range of ser agents "browsers witho t st+le sheets, teAt browsers, J&As, search engines etc.* C'&D http/<<www.maAdesign.com.a <presentation<benefits<indeA>6.htm #ore/ C'&D http/<<www.w5.org<4>>5<14<semantic-eAtractor.html 1.: &oes the site ha!e an+ broken links3 Broken links can fr strate sers and potentiall+ dri!e c stomers awa+. Broken links can also keep search engines from properl+ indeAing +o r site. #ore/ C'&D http/<<!alidator.w5.org<checklink 1.; How does the site perform in terms of speed<page si=e3 &on't make me wait... That's the message sers gi!e s in s r!e+ after s r!e+. D!en broadband sers can s ffer the slow-loading bl es. C'&D

http/<<www.websiteoptimi=ation.com<speed< 1.1> &oes the site ha!e ?a!aScript errors3 .nternet DAplore for Windows allows +o to t rn on a deb gger that will pop p a new window and let +o know there are Fa!ascript errors on +o r site. This is a!ailable nder '.nternet 'ptions' on the Ad!anced tab. ,ncheck '&isable script deb gging'. 4. &egree of separation between content and presentation 4.1 &oes the site se CSS for all presentation aspects "fonts, colo r, padding, borders etc*3 ,se st+le sheets to control la+o t and presentation. C'&D http/<<www.w5.org<T-<WCA)1><wai-pagea th.htmlKtech-st+le-sheets 4.4 Are all decorati!e images in the CSS, or do the+ appear in the "%*HT#$3 The aim for web de!elopers is to remo!e all presentation from the html code, lea!ing it clean and semanticall+ correct. C'&D http/<<www.maAdesign.com.a <presentation<benefits<indeA>9.htm 5. Accessibilit+ for sers 5.1 Are @alt@ attrib tes sed for all descripti!e images3 Jro!ide a teAt eC i!alent for e!er+ non-teAt element C'&D http/<<www.w5.org<T-<WCA)1><wai-pagea th.htmlKtech-teAt-eC i!alent 5.4 &oes the site se relati!e nits rather than absol te nits for teAt si=e3 ,se relati!e rather than absol te nits in mark p lang age attrib te !al es and st+le sheet propert+ !al es'. C'&D http/<<www.w5.org<T-<WCA)1><wai-pagea th.htmlKtech-relati!e- nits #ore/ C'&D http/<<www.w5.org<T-<WCA)1><wai-pagea th.htmlKtech-relati!e- nits C'&D http/<<www.clagn t.com<blog<56:< 5.5 &o an+ aspects of the la+o t break if font si=e is increased3 Tr+ this simple test. $ook at +o r website in a browser that s pports eas+ incrementation of font si=e. Iow increase +o r browser's font si=e. And again. And again... $ook at +o r site. &oes the page la+o t still hold together3 .t is dangero s for de!elopers to ass me that e!er+one browses sing defa lt font si=es. 5.6 &oes the site se !isible skip men s3 A method shall be pro!ided that permits sers to skip repetiti!e na!igation links. C'&D http/<<www.section7>:.go!<indeA.cfm3F seActionHContentL.&H14 )ro p related links, identif+ the gro p "for ser agents*, and, ntil ser agents do so, pro!ide a wa+ to b+pass the gro p. C'&D http/<<www.w5.org<T-<WCA)1>-TDCHS<Ktech-gro p-links ...blind !isitors are not the onl+ ones incon!enienced b+ too man+ links in a na!igation area. -ecall that a mobilit+impaired person with poor adapti!e technolog+ might be st ck tabbing thro gh that morass. C'&D

http/<<Foeclark.org<book<sasha+<seriali=ation<Chapter>:.htmlKh6-4>4> #ore/ C'&D http/<<www.niehs.nih.go!<websmith<7>:<o.htm 5.7 &oes the site se accessible forms3 Forms aren't the easiest of things to se for people with disabilities. Ia!igating aro nd a page with written content is one thing, hopping between form fields and inp tting information is another. C'&D http/<<www.htmldog.com<g ides<htmlad!anced<forms< #ore/ C'&D http/<<www.webstandards.org<learn<t torials<accessible-forms<>1-accessible-forms.html C'&D http/<<www.accessif+.com<tools-and-wi=ards<accessible-form-b ilder.asp C'&D http/<<accessif+.com<t torials<better-accessible-forms.asp 5.8 &oes the site se accessible tables3 For data tables, identif+ row and col mn headers... For data tables that ha!e two or more logical le!els of row or col mn headers, se mark p to associate data cells and header cells. C'&D http/<<www.w5.org<T-<WCA)1><wai-pagea th.htmlKtech-table-headers #ore/ C'&D http/<<www.bcc.ctc.ed <webp blishing<ada<reso rces<tables.asp C'&D http/<<www.accessif+.com<tools-and-wi=ards<accessible-table-b ilderMstep1.asp C'&D http/<<www.webaim.org<techniC es<tables< 5.9 .s there s fficient colo r brightness<contrasts3 Dns re that foregro nd and backgro nd colo r combinations pro!ide s fficient contrast when !iewed b+ someone ha!ing colo r deficits. C'&D http/<<www.w5.org<T-<WCA)1><wai-pagea th.htmlKtech-colo r-contrast #ore/ C'&D http/<<www.F ic+st dio.com<ser!ices<colo rcontrast.asp 5.: .s colo r alone sed for critical information3 Dns re that all information con!e+ed with colo r is also a!ailable witho t colo r, for eAample from conteAt or mark p. C'&D http/<<www.w5.org<T-<WCA)1><wai-pagea th.htmlKtech-colo r-con!e+ There are basicall+ three t+pes of colo r deficienc+N &e teranope "a form of red<green colo r deficit*, Jrotanope

"another form of red<green colo r deficit* and Tritanope "a bl e<+ellow deficit- !er+ rare*. #ore/ C'&D http/<<colo rfilter.wickline.org< C'&D http/<<www.toledo-bend.com<colo rblind<.shihara.html C'&D http/<<www.!ischeck.com<!ischeck<!ischeck,-$.php 5.; .s there dela+ed responsi!eness for dropdown men s3 ,sers with red ced motor skills ma+ find dropdown men s hard to se if responsi!eness is set too fast. 5.1> Are all links descripti!e3 $ink teAt sho ld be meaningf l eno gh to make sense when read o t of conteAt - either on its own or as part of a seC ence of links. $ink teAt sho ld also be terse. C'&D http/<<www.w5.org<T-<WCA)1><wai-pagea th.htmlKtech-meaningf l-links 6. Accessibilit+ for de!ices. 6.1 &oes the site work acceptabl+ across modern and older browsers3 Before starting to b ild a CSS-based la+o t, +o sho ld decide which browsers to s pport and to what le!el +o intend to s pport them. C'&D http/<<www.maAdesign.com.a <presentation<process<indeAMstep>1.cfm

6.4 .s the content accessible with CSS switched off or not s pported3 Some people ma+ !isit +o r site with either a browser that does not s pport CSS or a browser with CSS switched off. .n content is str ct red well, this will not be an iss e. 6.5 .s the content accessible with images switched off or not s pported3 Some people browse websites with images switched off - especiall+ people on !er+ slow connections. Content sho ld still be accessible for these people. 6.6 &oes the site work in teAt browsers s ch as $+nA3 This is like a combination of images and CSS switched off. A teAt-based browser will rel+ on well str ct red content to pro!ide meaning. #ore/ C'&D http/<<www.delorie.com<web<l+nA!iew 6.7 &oes the site work well when printed3 Eo can take an+ "%*HT#$ doc ment and simpl+ st+le it for print, witho t ha!ing to to ch the mark p. C'&D http/<<www.alistapart.com<articles<goingtoprint< #ore/ C'&D http/<<www.d. mn.ed <itss<s pport<Training<'nline<webdesign<css.htmlKprint 6.8 &oes the site work well in Hand Held de!ices3

This is a hard one to deal with ntil hand held de!ices consistentl+ s pport their correct media t+pe. Howe!er, some la+o ts work better in c rrent hand-held de!ices. The importance of s pporting hand held de!ices will depend on target a diences. 6.9 &oes the site incl de detailed metadata3 #etadata is machine nderstandable information for the web C'&D http/<<www.w5.org<#etadata< #etadata is str ct red information that is created specificall+ to describe another reso rce. .n other words, metadata is 'data abo t data'. 6.: &oes the site work well in a range of browser window si=es3 .t is a common ass mption amongst de!elopers that a!erage screen si=es are increasing. Some de!elopers ass me that the a!erage screen si=e is now 1>46pA wide. B t what abo t sers with smaller screens and sers with hand held de!ices3 Are the+ part of +o r target a dience and are the+ being disad!antaged3 7. Basic ,sabilit+ 7.1 .s there a clear !is al hierarch+3 'rganise and prioritise the contents of a page b+ sing si=e, prominence and content relationships. C'&D http/<<www.great-web-design-tips.com<web-site-design<187.html 7.4 Are heading le!els eas+ to disting ish3 ,se header elements to con!e+ doc ment str ct re and se them according to specification. C'&D http/<<www.w5.org<T-<WCA)1><wai-pagea th.htmlKtech-logical-headings 7.5 .s the site's na!igation eas+ to nderstand3 Eo r na!igation s+stem sho ld gi!e +o r !isitor a cl e as to what page of the site the+ are c rrentl+ on and where the+ can go neAt. C'&D http/<<www.1stsitefree.com<designMna!.htm 7.6 .s the site's na!igation consistent3 .f each page on +o r site has a consistent st+le of presentation, !isitors will find it easier to na!igate between pages and find information C'&D http/<<www.F ic+st dio.com<t torial<accessibilit+<na!igation.asp 7.7 &oes the site se consistent and appropriate lang age3 The se of clear and simple lang age promotes effecti!e comm nication. Tr+ing to come across as artic late can be as diffic lt to read as poorl+ written grammar, especiall+ if the lang age sed isn't the !isitor's primar+ lang age. C'&D http/<<www.F ic+st dio.com<t torial<accessibilit+<clear.asp 7.8 &oes the site ha!e a sitemap page and contact page3 Are the+ eas+ to find3 #ost site maps fail to con!e+ m ltiple le!els of the site's information architect re. .n sabilit+ tests, sers often o!erlook site maps or can't find them. CompleAit+ is also a problem/ a map sho ld be a map, not a na!igational challenge of its own. C'&D http/<<www. seit.com<alertboA<4>>4>1>8.html 7.9 For large sites, is there a search tool3 While search tools are not needed on smaller sites, and some people will not e!er se them, site-specific search tools

allow sers a choice of na!igation options. 7.: .s there a link to the home page on e!er+ page in the site3 Some sers like to go back to a site's home page after na!igating to content within a site. The home page becomes a base camp for these sers, allowing them to regro p before eAploring new content. 7.; Are links nderlined3 To maAimise the percei!ed affordance of clickabilit+, colo r and nderline the link teAt. ,sers sho ldn't ha!e to g ess or scr b the page to find o t where the+ can click. C'&D http/<<www. seit.com<alertboA<4>>6>71>.html 7.1> Are !isited links clearl+ defined3 #ost important, knowing which pages the+'!e alread+ !isited frees sers from nintentionall+ re!isiting the same pages o!er and o!er again. C'&D http/<<www. seit.com<alertboA<4>>6>7>5.html 8. Site management 8.1 &oes the site ha!e a meaningf l and helpf l 6>6 error page that works from an+ depth in the site3 Eo '!e reC ested a page - either b+ t+ping a ,-$ directl+ into the address bar or clicking on an o t-of-date link and +o '!e fo nd +o rself in the middle of c+berspace nowhere. A ser-friendl+ website will gi!e +o a helping hand while man+ others will simpl+ do nothing, rel+ing on the browser's b ilt-in abilit+ to eAplain what the problem is. C'&D http/<<www.alistapart.com<articles<perfect6>6< 8.4 &oes the site se friendl+ ,-$s3 #ost search engines "with a few eAceptions - namel+ )oogle* will not indeA an+ pages that ha!e a C estion mark or other character "like an ampersand or eC als sign* in the ,-$... what good is a site if no one can find it3 C'&D http/<<www.sitepoint.com<article<search-engine-friendl+- rls 'ne of the worst elements of the web from a ser interface standpoint is the ,-$. Howe!er, if the+'re short, logical, and self-correcting, ,-$s can be acceptabl+ sable C'&D http/<<www.merges.net<theor+<4>>1>5>7.html #ore/ C'&D http/<<www.sitepoint.com<article<search-engine-friendl+- rls C'&D http/<<www.websitegoodies.com<article<54 C'&D http/<<www.merges.net<theor+<4>>1>5>7.html 8.5 &oes the site's ,-$ work witho t @www@3 While this is not critical, and in some cases is not e!en possible, it is alwa+s good to gi!e people the choice of both options. .f a ser t+pes +o r domain name witho t the www and gets no site, this co ld disad!antage both the ser and +o . 8.6 &oes the site ha!e a fa!icon3 A Fa!icon is a m lti-resol tion image incl ded on nearl+ all professionall+ de!eloped sites. The Fa!icon allows the webmaster to f rther promote their site, and to create a more c stomi=ed appearance within a !isitor's browser. C'&D

http/<<www.fa!icon.com< Fa!icons are definitel+ not critical. Howe!er, if the+ are not present, the+ can ca se 6>6 errors in +o r logs "site statistics*. Browsers like .D will reC est them from the ser!er when a site is bookmarked. .f a fa!icon isn't a!ailable, a 6>6 error ma+ be generated. Therefore, ha!ing a fa!icon co ld c t down on fa!icon specific 6>6 errors. The same is tr e of a 'robots.tAt' file.