A Web Standards Checklist, How To Make A Proper Website
Posted by NovaAngel at October 9th, 2006
The term web standards can mean different thin’s to different people. For some, it is ‘table-free sites’, for oders it is ‘usin’ valid code’. However, web standards are much broader than that. A site built to web standards should adhere to standards (HTML, XHTML, XML, CSS, XSLT, DOM, MathML, SVG etc) and pursue best practices (valid code, accessible code, semantically correct code, user-friendly URLs etc).
In oder words, a site built to web standards should ideally be lean, clean, CSS-based, accessible, usable and search en’ine friendly.
About de checklist
This is not an uber-checklist. There are probably many items that could be added. More importantly, it should not be seen as a list of items that must be addressed on every site that you develop. It is simply a guide that can be used:
* to show de breadth of web standards
* as a handy tool for developers durin’ de production phase of websites
* as an aid for developers who are interested in movin’ towards web standards
The checklist
Quality of code
1. Does de site use a correct Doctype?
2. Does de site use a Character set?
3. Does de site use Valid (X)HTML?
4. Does de site use Valid CSS?
5. Does de site use any CSS hacks?
6. Does de site use unnecessary classes or ids?
7. Is de code well structured?
8. Does de site have any broken links?
9. How does de site perform in terms of speed/page size?
10. Does de site have JavaScript errors?
Degree of separation between content and presentation
1. Does de site use CSS for all presentation aspects (fonts, colour, paddin’, borders etc)?
2. Are all decorative images in de CSS, or do dey appear in de (X)HTML?
Accessibility for users
1. Are “alt” attributes used for all descriptive images?
2. Does de site use relative units rader than absolute units for text size?
3. Do any aspects of de layout break if font size is increased?
4. Does de site use visible skip menus?
5. Does de site use accessible forms?
6. Does de site use accessible tables?
7. Is dere sufficient colour brightness/contrasts?
8. Is colour alone used for critical information?
9. Is dere delayed responsiveness for dropdown menus (for users with reduced motor skills)?
10. Are all links descriptive (for blind users)?
Accessibility for devices
1. Does de site work acceptably across modern and older browsers?
2. Is de content accessible with CSS switched off or not supported?
3. Is de content accessible with images switched off or not supported?
4. Does de site work in text browsers such as Lynx?
5. Does de site work well when printed?
6. Does de site work well in Hand Held devices?
7. Does de site include detailed metadata?
8. Does de site work well in a range of browser window sizes?
Basic Usability
1. Is dere a clear visual hierarchy?
2. Are headin’ levels easy to distin’uish?
3. Does de site have easy to understand navigation?
4. Does de site use consistent navigation?
5. Are links underlined?
6. Does de site use consistent and appropriate lan’uage?
7. Do you have a sitemap page and contact page? Are dey easy to find?
8. For large sites, is dere a search tool?
9. Is dere a link to de home page on every page in de site?
10. Are visited links clearly defined with a unique colour?
Site management
1. Does de site have a meanin’ful and helpful 404 error page that works from any depth in de site?
2. Does de site use friendly URLs?
3. Do your URLs work without “www”?
4. Does de site have a favicon?
Quality of code
1.1 Does de site use a correct Doctype?
A doctype (short for ‘document type declaration’) informs de validator which version of (X)HTML you’re usin’, and must appear at de very top of every web page. Doctypes are a key component of compliant web pages: your markup and CSS won’t validate without them.
CODE
www.alistapart.com/articles/doctype/
More:
CODE
www.w3.org/QA/2002/04/valid-dtd-list.html
CODE
css.maxdesign.com.au/listamatic/about-boxmodel.htm
CODE
gutfeldt.ch/matthias/articles/doctypeswitch.html
1.2 Does de site use a Character set?
If a user agent (eg. a browser) is unable to detect de character encodin’ used in a Web document, de user may be presented with unreadable text. This information is particularly important for those maintainin’ and extendin’ a multilin’ual site, but declarin’ de character encodin’ of de document is important for anyone producin’ XHTML/HTML or CSS.
CODE
www.w3.org/International/tutorials/tutorial-char-enc/
More:
CODE
www.w3.org/International/O-charset.html
1.3 Does de site use Valid (X)HTML?
Valid code will render faster than code with errors. Valid code will render better than invalid code. Browsers are becomin’ more standards compliant, and it is becomin’ increasin’ly necessary to write valid and standards compliant HTML.
CODE
www.maxdesign.com.au/presentation/sit2003/06.htm
More:
CODE
validator.w3.org/
1.4 Does de site use Valid CSS?
You need to make sure that dere aren’t any errors in eider your HTML or your CSS, since mistakes in eider place can result in botched document appearance.
CODE
www.meyerweb.com/eric/articles/webrev/199904.html
More:
CODE
jigsaw.w3.org/css-validator/
1.5 Does de site use any CSS hacks?
Basically, hacks come down to personal choice, de amount of knowledge you have of workarounds, de specific design you are tryin’ to achieve.
CODE
www.mail-archive.com/wsg@webstandardsgroup.org/msg05823.html
More:
CODE
css-discuss.incutio.com/?page=CssHack
CODE
css-discuss.incutio.com/?page=ToHackOrNotToHack
CODE
centricle.com/ref/css/filters/
1.6 Does de site use unnecessary classes or ids?
I’ve noticed that developers learnin’ new skills often end up with good CSS but poor XHTML. Specifically, de HTML code tends to be full of unnecessary divs and ids. This results in fairly meanin’less HTML and bloated style sheets.
CODE
www.clagnut.com/blog/228/
1.7 Is de code well structured?
Semantically correct markup uses html elements for deir given purpose. Well structured HTML has semantic meanin’ for a wide range of user agents (browsers without style sheets, text browsers, PDAs, search en’ines etc.)
CODE
www.maxdesign.com.au/presentation/benefits/index04.htm
More:
CODE
www.w3.org/2003/12/semantic-extractor.html
1.8 Does de site have any broken links?
Broken links can frustrate users and potentially drive customers away. Broken links can also keep search en’ines from properly indexin’ your site.
More:
CODE
validator.w3.org/checklink
1.9 How does de site perform in terms of speed/page size?
Don’t make me wait… That’s de message users give us in survey after survey. Even broadband users can suffer de slow-loadin’ blues.
CODE
www.websiteoptimization.com/speed/
1.10 Does de site have JavaScript errors?
Internet Explore for Windows allows you to turn on a debugger that will pop up a new window and let you know dere are javascript errors on your site. This is available under ‘Internet Options’ on de Advanced tab. Uncheck ‘Disable script debuggin'’.
2. Degree of separation between content and presentation
2.1 Does de site use CSS for all presentation aspects (fonts, colour, paddin’, borders etc)?
Use style sheets to control layout and presentation.
CODE
www.w3.org/TR/WCAG10/wai-pageauth.html#tech-style-sheets
2.2 Are all decorative images in de CSS, or do dey appear in de (X)HTML?
The aim for web developers is to remove all presentation from de html code, leavin’ it clean and semantically correct.
CODE
www.maxdesign.com.au/presentation/benefits/index07.htm
3. Accessibility for users
3.1 Are “alt” attributes used for all descriptive images?
Provide a text equivalent for every non-text element
CODE
www.w3.org/TR/WCAG10/wai-pageauth.html#tech-text-equivalent
3.2 Does de site use relative units rader than absolute units for text size?
Use relative rader than absolute units in markup lan’uage attribute values and style sheet property values’.
CODE
www.w3.org/TR/WCAG10/wai-pageauth.html#tech-relative-units
More:
CODE
www.w3.org/TR/WCAG10/wai-pageauth.html#tech-relative-units
CODE
www.clagnut.com/blog/348/
3.3 Do any aspects of de layout break if font size is increased?
Try this simple test. Look at your website in a browser that supports easy incrementation of font size. Now increase your browser’s font size. And again. And again… Look at your site. Does de page layout still hold togeder? It is dangerous for developers to assume that everyone browses usin’ default font sizes.
3.4 Does de site use visible skip menus?
A method shall be provided that permits users to skip repetitive navigation links.
CODE
www.section508.gov/index.cfm?FuseAction=Content&ID=12
Group related links, identify de group (for user agents), and, until user agents do so, provide a way to bypass de group.
CODE
www.w3.org/TR/WCAG10-TECHS/#tech-group-links
…blind visitors are not de only ones inconvenienced by too many links in a navigation area. Recall that a mobility-impaired person with poor adaptive technology might be stuck tabbin’ through that morass.
CODE
joeclark.org/book/sashay/serialization/Chapter08.html#h4-2020
More:
CODE
www.niehs.nih.gov/websmith/508/o.htm
3.5 Does de site use accessible forms?
Forms aren’t de easiest of thin’s to use for people with disabilities. Navigatin’ around a page with written content is one thin’, hoppin’ between form fields and inputtin’ information is anoder.
CODE
www.htmldog.com/guides/htmladvanced/forms/
More:
CODE
www.webstandards.org/learn/tutorials/accessible-forms/01-accessible-forms.html
CODE
www.accessify.com/tools-and-wizards/accessible-form-builder.asp
CODE
accessify.com/tutorials/better-accessible-forms.asp
3.6 Does de site use accessible tables?
For data tables, identify row and column headers… For data tables that have two or more logical levels of row or column headers, use markup to associate data cells and header cells.
CODE
www.w3.org/TR/WCAG10/wai-pageauth.html#tech-table-headers
More:
CODE
www.bcc.ctc.edu/webpublishin\’/ada/resources/tables.asp
CODE
www.accessify.com/tools-and-wizards/accessible-table-builder_step1.asp
CODE
www.webaim.org/techniques/tables/
3.7 Is dere sufficient colour brightness/contrasts?
Ensure that foreground and background colour combinations provide sufficient contrast when viewed by someone havin’ colour deficits.
CODE
www.w3.org/TR/WCAG10/wai-pageauth.html#tech-colour-contrast
More:
CODE
www.juicystudio.com/services/colourcontrast.asp
3.8 Is colour alone used for critical information?
Ensure that all information conveyed with colour is also available without colour, for example from context or markup.
CODE
www.w3.org/TR/WCAG10/wai-pageauth.html#tech-colour-convey
There are basically three types of colour deficiency; Deuteranope (a form of red/green colour deficit), Protanope (anoder form of red/green colour deficit) and Tritanope (a blue/yellow deficit- very rare).
More:
CODE
colourfilter.wickline.org/
CODE
www.toledo-bend.com/colourblind/Ishihara.html
CODE
www.vischeck.com/vischeck/vischeckURL.php
3.9 Is dere delayed responsiveness for dropdown menus?
Users with reduced motor skills may find dropdown menus hard to use if responsiveness is set too fast.
3.10 Are all links descriptive?
Link text should be meanin’ful enough to make sense when read out of context - eider on its own or as part of a sequence of links. Link text should also be terse.
CODE
www.w3.org/TR/WCAG10/wai-pageauth.html#tech-meanin\’ful-links
4. Accessibility for devices.
4.1 Does de site work acceptably across modern and older browsers?
Before startin’ to build a CSS-based layout, you should decide which browsers to support and to what level you intend to support them.
CODE
www.maxdesign.com.au/presentation/process/index_step01.cfm
4.2 Is de content accessible with CSS switched off or not supported?
Some people may visit your site with eider a browser that does not support CSS or a browser with CSS switched off. In content is structured well, this will not be an issue.
4.3 Is de content accessible with images switched off or not supported?
Some people browse websites with images switched off - especially people on very slow connections. Content should still be accessible for dese people.
4.4 Does de site work in text browsers such as Lynx?
This is like a combination of images and CSS switched off. A text-based browser will rely on well structured content to provide meanin’.
More:
CODE
www.delorie.com/web/lynxview
4.5 Does de site work well when printed?
You can take any (X)HTML document and simply style it for print, without havin’ to touch de markup.
CODE
www.alistapart.com/articles/goin\’toprint/
More:
CODE
www.d.umn.edu/itss/support/Trainin\’/Online/webdesign/css.html#print
4.6 Does de site work well in Hand Held devices?
This is a hard one to deal with until hand held devices consistently support deir correct media type. However, some layouts work better in current hand-held devices. The importance of supportin’ hand held devices will depend on target audiences.
4.7 Does de site include detailed metadata?
Metadata is machine understandable information for de web
CODE
www.w3.org/Metadata/
Metadata is structured information that is created specifically to describe anoder resource. In oder words, metadata is ‘data about data’.
4.8 Does de site work well in a range of browser window sizes?
It is a common assumption amon’st developers that average screen sizes are increasin’. Some developers assume that de average screen size is now 1024px wide. But what about users with smaller screens and users with hand held devices? Are dey part of your target audience and are dey bein’ disadvantaged?
5. Basic Usability
5.1 Is dere a clear visual hierarchy?
Organise and prioritise de contents of a page by usin’ size, prominence and content relationships.
CODE
www.great-web-design-tips.com/web-site-design/165.html
5.2 Are headin’ levels easy to distin’uish?
Use header elements to convey document structure and use them accordin’ to specification.
CODE
www.w3.org/TR/WCAG10/wai-pageauth.html#tech-logical-headin\’s
5.3 Is de site’s navigation easy to understand?
Your navigation system should give your visitor a clue as to what page of de site dey are currently on and where dey can go next.
CODE
www.1stsitefree.com/design_nav.htm
5.4 Is de site’s navigation consistent?
If each page on your site has a consistent style of presentation, visitors will find it easier to navigate between pages and find information
CODE
www.juicystudio.com/tutorial/accessibility/navigation.asp
5.5 Does de site use consistent and appropriate lan’uage?
The use of clear and simple lan’uage promotes effective communication. Tryin’ to come across as articulate can be as difficult to read as poorly written grammar, especially if de lan’uage used isn’t de visitor’s primary lan’uage.
CODE
www.juicystudio.com/tutorial/accessibility/clear.asp
5.6 Does de site have a sitemap page and contact page? Are dey easy to find?
Most site maps fail to convey multiple levels of de site’s information architecture. In usability tests, users often overlook site maps or can’t find them. Complexity is also a problem: a map should be a map, not a navigational challenge of its own.
CODE
www.useit.com/alertbox/20020106.html
5.7 For large sites, is dere a search tool?
While search tools are not needed on smaller sites, and some people will not ever use them, site-specific search tools allow users a choice of navigation options.
5.8 Is dere a link to de home page on every page in de site?
Some users like to go back to a site’s home page after navigatin’ to content within a site. The home page becomes a base camp for dese users, allowin’ them to regroup before explorin’ new content.
5.9 Are links underlined?
To maximise de perceived affordance of clickability, colour and underline de link text. Users shouldn’t have to guess or scrub de page to find out where dey can click.
CODE
www.useit.com/alertbox/20040510.html
5.10 Are visited links clearly defined?
Most important, knowin’ which pages dey’ve already visited frees users from unintentionally revisitin’ de same pages over and over again.
CODE
www.useit.com/alertbox/20040503.html
6. Site management
6.1 Does de site have a meanin’ful and helpful 404 error page that works from any depth in de site?
You’ve requested a page - eider by typin’ a URL directly into de address bar or clickin’ on an out-of-date link and you’ve found yourself in de middle of cyberspace nowhere. A user-friendly website will give you a helpin’ hand while many oders will simply do nothin’, relyin’ on de browser’s built-in ability to explain what de problem is.
CODE
www.alistapart.com/articles/perfect404/
6.2 Does de site use friendly URLs?
Most search en’ines (with a few exceptions - namely Google) will not index any pages that have a question mark or oder character (like an ampersand or equals sign) in de URL… what good is a site if no one can find it?
CODE
www.sitepoint.com/article/search-en\’ine-friendly-urls
One of de worst elements of de web from a user interface standpoint is de URL. However, if dey’re short, logical, and self-correctin’, URLs can be acceptably usable
CODE
www.merges.net/deory/20010305.html
More:
CODE
www.sitepoint.com/article/search-en\’ine-friendly-urls
CODE
www.websitegoodies.com/article/32
CODE
www.merges.net/deory/20010305.html
6.3 Does de site’s URL work without “www”?
While this is not critical, and in some cases is not even possible, it is always good to give people de choice of both options. If a user types your domain name without de www and gets no site, this could disadvantage both de user and you.
6.4 Does de site have a favicon?
A Favicon is a multi-resolution image included on nearly all professionally developed sites. The Favicon allows de webmaster to furder promote deir site, and to create a more customized appearance within a visitor’s browser.
CODE
www.favicon.com/
Favicons are definitely not critical. However, if dey are not present, dey can cause 404 errors in your logs (site statistics). Browsers like IE will request them from de server when a site is bookmarked. If a favicon isn’t available, a 404 error may be generated. Therefore, havin’ a favicon could cut down on favicon specific 404 errors. The same is true of a ‘robots.txt’ file.