A Web Standards Checklist

download A Web Standards Checklist

of 14

Transcript of A Web Standards Checklist

  • 7/30/2019 A Web Standards Checklist

    1/14

    Max Design - A webstandards checklist

    Max Design

    Max Design

    bout

    About us

    Russ Weakley

    Anna GreggPeter Firminger

    Rose Cox

    Contact us

    tes

    All sites

    Commercial

    Government

    Organisationservices

    Web Development

    Content Management

    Domain Names

    Hosting

    ethodology

    Design

    CodingProduction

    Terms

    ews

    Latest News

    Presentations

    Web Standards Group

    le:///F|/incoming/______________DOCZ_SONNNNNNNNN...DESIGN/design/web/A_web_standards_checklist%20.htm (1 of 14)16.02.2005 04:25:56

    http://index.cfm/http://index.cfm/http://about.cfm/http://about_russ.cfm/http://about_anna.cfm/http://about_peter.cfm/http://about_rose.cfm/http://contact.cfm/http://sites.cfm/http://sites.cfm/?cat=comhttp://sites.cfm/?cat=govhttp://sites.cfm/?cat=orghttp://services_design.cfm/http://services_content.cfm/http://services_domain.cfm/http://services_hosting.cfm/http://methodology_design.cfm/http://methodology_coding.cfm/http://methodology_production.cfm/http://terms.cfm/http://news.cfm/http://presentation/index.cfmhttp://webstandardsgroup.org/http://webstandardsgroup.org/http://presentation/index.cfmhttp://news.cfm/http://terms.cfm/http://methodology_production.cfm/http://methodology_coding.cfm/http://methodology_design.cfm/http://services_hosting.cfm/http://services_domain.cfm/http://services_content.cfm/http://services_design.cfm/http://sites.cfm/?cat=orghttp://sites.cfm/?cat=govhttp://sites.cfm/?cat=comhttp://sites.cfm/http://contact.cfm/http://about_rose.cfm/http://about_peter.cfm/http://about_anna.cfm/http://about_russ.cfm/http://about.cfm/http://index.cfm/http://index.cfm/http://index.cfm/http://index.cfm/
  • 7/30/2019 A Web Standards Checklist

    2/14

    Max Design - A webstandards checklist

    Web Essentials 2004

    A web standards checklist

    Web standards - more than just 'table-free sites'

    he term web standards can mean different things to different people. For some, it is 'table-free sites

    r others it is 'using valid code'. However, web standards are much broader than that. A site built to

    andards should adhere to standards (HTML, XHTML, XML, CSS, XSLT, DOM, MathML, SVG edpursue best practices (valid code, accessible code, semantically correct code, user-friendly URL

    c).

    other words, a site built to web standards should ideally be lean, clean, CSS-based, accessible, usa

    nd search engine friendly.

    About the checklist

    his is not an uber-checklist. There are probably many items that could be added. More importantly,

    ould not be seen as a list of items that mustbe addressed on every site that you develop. It is simply

    uide that can be used:

    q to show the breadth of web standards

    q as a handy tool for developers during the production phase of websites

    q as an aid for developers who are interested in moving towards web standards

    he checklist

    1. Quality of code

    1. Does the site use a correct Doctype?

    2. Does the site use a Character set?

    3. Does the site use Valid (X)HTML?

    4. Does the site use Valid CSS?

    5. Does the site use any CSS hacks?

    le:///F|/incoming/______________DOCZ_SONNNNNNNNN...DESIGN/design/web/A_web_standards_checklist%20.htm (2 of 14)16.02.2005 04:25:56

    http://we04.com/http://we04.com/http://we04.com/
  • 7/30/2019 A Web Standards Checklist

    3/14

    Max Design - A webstandards checklist

    6. Does the site use unnecessary classes or ids?

    7. Is the code well structured?

    8. Does the site have any broken links?

    9. How does the site perform in terms of speed/page size?

    10. Does the site have JavaScript errors?

    2. Degree of separation between content and presentation

    1. Does the site use CSS for all presentation aspects (fonts, colour, padding, borders etc)?

    2. Are all decorative images in the CSS, or do they appear in the (X)HTML?3. Accessibility for users

    1. Are "alt" attributes used for all descriptive images?

    2. Does the site use relative units rather than absolute units for text size?

    3. Do any aspects of the layout break if font size is increased?

    4. Does the site use visible skip menus?

    5. Does the site use accessible forms?

    6. Does the site use accessible tables?

    7. Is there sufficient colour brightness/contrasts?

    8. Is colour alone used for critical information?9. Is there delayed responsiveness for dropdown menus (for users with reduced motor ski

    10. Are all links descriptive (for blind users)?

    4. Accessibility for devices

    1. Does the site work acceptably across modern and older browsers?

    2. Is the content accessible with CSS switched off or not supported?

    3. Is the content accessible with images switched off or not supported?

    4. Does the site work in text browsers such as Lynx?

    5. Does the site work well when printed?

    6. Does the site work well in Hand Held devices?7. Does the site include detailed metadata?

    8. Does the site work well in a range of browser window sizes?

    5. Basic Usability

    1. Is there a clear visual hierarchy?

    2. Are heading levels easy to distinguish?

    3. Does the site have easy to understand navigation?

    4. Does the site use consistent navigation?

    5. Are links underlined?

    6. Does the site use consistent and appropriate language?7. Do you have a sitemap page and contact page? Are they easy to find?

    8. For large sites, is there a search tool?

    9. Is there a link to the home page on every page in the site?

    10. Are visited links clearly defined with a unique colour?

    6. Site management

    1. Does the site have a meaningful and helpful 404 error page that works from any depth

    the site?

    2. Does the site use friendly URLs?

    le:///F|/incoming/______________DOCZ_SONNNNNNNNN...DESIGN/design/web/A_web_standards_checklist%20.htm (3 of 14)16.02.2005 04:25:56

  • 7/30/2019 A Web Standards Checklist

    4/14

    Max Design - A webstandards checklist

    3. Do your URLs work without "www"?

    4. Does the site have a favicon?

    . Quality of code

    1 Does the site use a correct Doctype?

    A doctype (short for 'document type declaration') informs the validator which version of

    (X)HTML you're using, and must appear at the very top of every web page. Doctypes are

    a key component of compliant web pages: your markup and CSS won't validate without

    them.

    http://www.alistapart.com/articles/doctype/

    ore:

    q http://www.w3.org/QA/2002/04/valid-dtd-list.html

    q http://css.maxdesign.com.au/listamatic/about-boxmodel.htm

    q http://gutfeldt.ch/matthias/articles/doctypeswitch.html

    2 Does the site use a Character set?

    If a user agent (eg. a browser) is unable to detect the character encoding used in a Web

    document, the user may be presented with unreadable text. This information is particularly

    important for those maintaining and extending a multilingual site, but declaring thecharacter encoding of the document is important for anyone producing XHTML/HTML or

    CSS.

    http://www.w3.org/International/tutorials/tutorial-char-enc/

    ore:

    q http://www.w3.org/International/O-charset.html

    3 Does the site use Valid (X)HTML?

    Valid code will render faster than code with errors. Valid code will render better than

    invalid code. Browsers are becoming more standards compliant, and it is becoming

    increasingly necessary to write valid and standards compliant HTML

    http://www.maxdesign.com.au/presentation/sit2003/06.htm

    ore:

    le:///F|/incoming/______________DOCZ_SONNNNNNNNN...DESIGN/design/web/A_web_standards_checklist%20.htm (4 of 14)16.02.2005 04:25:56

    http://www.alistapart.com/articles/doctype/http://www.w3.org/QA/2002/04/valid-dtd-list.htmlhttp://css.maxdesign.com.au/listamatic/about-boxmodel.htmhttp://gutfeldt.ch/matthias/articles/doctypeswitch.htmlhttp://www.w3.org/International/tutorials/tutorial-char-enc/http://www.w3.org/International/O-charset.htmlhttp://www.maxdesign.com.au/presentation/sit2003/06.htmhttp://www.maxdesign.com.au/presentation/sit2003/06.htmhttp://www.w3.org/International/O-charset.htmlhttp://www.w3.org/International/tutorials/tutorial-char-enc/http://gutfeldt.ch/matthias/articles/doctypeswitch.htmlhttp://css.maxdesign.com.au/listamatic/about-boxmodel.htmhttp://www.w3.org/QA/2002/04/valid-dtd-list.htmlhttp://www.alistapart.com/articles/doctype/
  • 7/30/2019 A Web Standards Checklist

    5/14

    Max Design - A webstandards checklist

    q http://validator.w3.org/

    4 Does the site use Valid CSS?

    You need to make sure that there aren't any errors in either your HTML or your CSS,

    since mistakes in either place can result in botched document appearance.

    http://www.meyerweb.com/eric/articles/webrev/199904.html

    ore:

    q http://jigsaw.w3.org/css-validator/

    5 Does the site use any CSS hacks?

    Basically, hacks come down to personal choice, the amount of knowledge you have of

    workarounds, the specific design you are trying to achieve.

    http://www.mail-archive.com/[email protected]/msg05823.html

    ore:

    q http://css-discuss.incutio.com/?page=CssHack

    q http://css-discuss.incutio.com/?page=ToHackOrNotToHack

    q http://centricle.com/ref/css/filters/

    6 Does the site use unnecessary classes or ids?

    I've noticed that developers learning new skills often end up with good CSS but poor

    XHTML. Specifically, the HTML code tends to be full of unnecessary divs and ids. This

    results in fairly meaningless HTML and bloated style sheets.

    http://www.clagnut.com/blog/228/

    7 Is the code well structured?

    Semantically correct markup uses html elements for their given purpose. Well structured

    HTML has semantic meaning for a wide range of user agents (browsers without style

    sheets, text browsers, PDAs, search engines etc.)

    http://www.maxdesign.com.au/presentation/benefits/index04.htm

    ore:

    le:///F|/incoming/______________DOCZ_SONNNNNNNNN...DESIGN/design/web/A_web_standards_checklist%20.htm (5 of 14)16.02.2005 04:25:56

    http://validator.w3.org/http://www.meyerweb.com/eric/articles/webrev/199904.htmlhttp://jigsaw.w3.org/css-validator/http://www.mail-archive.com/[email protected]/msg05823.htmlhttp://css-discuss.incutio.com/?page=CssHackhttp://css-discuss.incutio.com/?page=ToHackOrNotToHackhttp://centricle.com/ref/css/filters/http://www.clagnut.com/blog/228/http://www.maxdesign.com.au/presentation/benefits/index04.htmhttp://www.maxdesign.com.au/presentation/benefits/index04.htmhttp://www.clagnut.com/blog/228/http://centricle.com/ref/css/filters/http://css-discuss.incutio.com/?page=ToHackOrNotToHackhttp://css-discuss.incutio.com/?page=CssHackhttp://www.mail-archive.com/[email protected]/msg05823.htmlhttp://jigsaw.w3.org/css-validator/http://www.meyerweb.com/eric/articles/webrev/199904.htmlhttp://validator.w3.org/
  • 7/30/2019 A Web Standards Checklist

    6/14

    Max Design - A webstandards checklist

    q http://www.w3.org/2003/12/semantic-extractor.html

    8 Does the site have any broken links?

    roken links can frustrate users and potentially drive customers away. Broken links can also keep se

    gines from properly indexing your site.

    ore:

    q http://validator.w3.org/checklink

    9 How does the site perform in terms of speed/page size?

    Don't make me wait... That's the message users give us in survey after survey. Even

    broadband users can suffer the slow-loading blues.

    http://www.websiteoptimization.com/speed/

    10 Does the site have JavaScript errors?

    ternet Explore for Windows allows you to turn on a debugger that will pop up a new window and l

    ou know there are javascript errors on your site. This is available under 'Internet Options' on the

    dvanced tab. Uncheck 'Disable script debugging'.

    . Degree of separation between content and presentation

    1 Does the site use CSS for all presentation aspects (fonts, colour,adding, borders etc)?

    Use style sheets to control layout and presentation

    http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-style-sheets

    2 Are all decorative images in the CSS, or do they appear in the (X)HTML

    The aim for web developers is to remove all presentation from the html code, leaving it

    clean and semantically correct.

    http://www.maxdesign.com.au/presentation/benefits/index07.htm

    . Accessibility for users

    le:///F|/incoming/______________DOCZ_SONNNNNNNNN...DESIGN/design/web/A_web_standards_checklist%20.htm (6 of 14)16.02.2005 04:25:56

    http://www.w3.org/2003/12/semantic-extractor.htmlhttp://validator.w3.org/checklinkhttp://www.websiteoptimization.com/speed/http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-style-sheetshttp://www.maxdesign.com.au/presentation/benefits/index07.htmhttp://www.maxdesign.com.au/presentation/benefits/index07.htmhttp://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-style-sheetshttp://www.websiteoptimization.com/speed/http://validator.w3.org/checklinkhttp://www.w3.org/2003/12/semantic-extractor.html
  • 7/30/2019 A Web Standards Checklist

    7/14

    Max Design - A webstandards checklist

    1 Are "alt" attributes used for all descriptive images?

    Provide a text equivalent for every non-text element

    http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-text-equivalent

    2 Does the site use relative units rather than absolute units for text size?

    Use relative rather than absolute units in markup language attribute values and style sheet

    property values'

    http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-relative-units

    ore:

    q http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-relative-units

    q http://www.clagnut.com/blog/348/

    3 Do any aspects of the layout break if font size is increased?

    y this simple test. Look at your website in a browser that supports easy incrementation of font size

    ow increase your browser's font size. And again. And again... Look at your site. Does the page layo

    ll hold together? It is dangerous for developers to assume that everyone browses using default font

    zes.

    4 Does the site use visible skip menus?

    A method shall be provided that permits users to skip repetitive navigation links.

    http://www.section508.gov/index.cfm?FuseAction=Content&ID=12

    Group related links, identify the group (for user agents), and, until user agents do so,

    provide a way to bypass the group

    http://www.w3.org/TR/WCAG10-TECHS/#tech-group-links

    ...blind visitors are not the only ones inconvenienced by too many links in a navigation

    area. Recall that a mobility-impaired person with poor adaptive technology might be stuck

    tabbing through that morass.

    http://joeclark.org/book/sashay/serialization/Chapter08.html#h4-2020

    ore:

    le:///F|/incoming/______________DOCZ_SONNNNNNNNN...DESIGN/design/web/A_web_standards_checklist%20.htm (7 of 14)16.02.2005 04:25:56

    http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-text-equivalenthttp://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-relative-unitshttp://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-relative-unitshttp://www.clagnut.com/blog/348/http://www.section508.gov/index.cfm?FuseAction=Content&ID=12http://www.w3.org/TR/WCAG10-TECHS/#tech-group-linkshttp://joeclark.org/book/sashay/serialization/Chapter08.html#h4-2020http://joeclark.org/book/sashay/serialization/Chapter08.html#h4-2020http://www.w3.org/TR/WCAG10-TECHS/#tech-group-linkshttp://www.section508.gov/index.cfm?FuseAction=Content&ID=12http://www.clagnut.com/blog/348/http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-relative-unitshttp://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-relative-unitshttp://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-text-equivalent
  • 7/30/2019 A Web Standards Checklist

    8/14

    Max Design - A webstandards checklist

    q http://www.niehs.nih.gov/websmith/508/o.htm

    5 Does the site use accessible forms?

    Forms aren't the easiest of things to use for people with disabilities. Navigating around a

    page with written content is one thing, hopping between form fields and inputting

    information is another

    http://www.htmldog.com/guides/htmladvanced/forms/

    ore:

    q http://www.webstandards.org/learn/tutorials/accessible-forms/01-accessible-forms.html

    q http://www.accessify.com/tools-and-wizards/accessible-form-builder.asp

    q http://accessify.com/tutorials/better-accessible-forms.asp

    6 Does the 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.

    http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-table-headers

    ore:

    q http://www.bcc.ctc.edu/webpublishing/ada/resources/tables.asp

    q http://www.accessify.com/tools-and-wizards/accessible-table-builder_step1.asp

    q http://www.webaim.org/techniques/tables/

    7 Is there sufficient colour brightness/contrasts?

    Ensure that foreground and background colour combinations provide sufficient contrast

    when viewed by someone having colour deficits

    http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-colour-contrast

    ore:

    q http://www.juicystudio.com/services/colourcontrast.asp

    8 Is colour alone used for critical information?

    le:///F|/incoming/______________DOCZ_SONNNNNNNNN...DESIGN/design/web/A_web_standards_checklist%20.htm (8 of 14)16.02.2005 04:25:56

    http://www.niehs.nih.gov/websmith/508/o.htmhttp://www.htmldog.com/guides/htmladvanced/forms/http://www.webstandards.org/learn/tutorials/accessible-forms/01-accessible-forms.htmlhttp://www.accessify.com/tools-and-wizards/accessible-form-builder.asphttp://accessify.com/tutorials/better-accessible-forms.asphttp://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-table-headershttp://www.bcc.ctc.edu/webpublishing/ada/resources/tables.asphttp://www.accessify.com/tools-and-wizards/accessible-table-builder_step1.asphttp://www.webaim.org/techniques/tables/http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-color-contrasthttp://www.juicystudio.com/services/colourcontrast.asphttp://www.juicystudio.com/services/colourcontrast.asphttp://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-color-contrasthttp://www.webaim.org/techniques/tables/http://www.accessify.com/tools-and-wizards/accessible-table-builder_step1.asphttp://www.bcc.ctc.edu/webpublishing/ada/resources/tables.asphttp://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-table-headershttp://accessify.com/tutorials/better-accessible-forms.asphttp://www.accessify.com/tools-and-wizards/accessible-form-builder.asphttp://www.webstandards.org/learn/tutorials/accessible-forms/01-accessible-forms.htmlhttp://www.htmldog.com/guides/htmladvanced/forms/http://www.niehs.nih.gov/websmith/508/o.htm
  • 7/30/2019 A Web Standards Checklist

    9/14

    Max Design - A webstandards checklist

    Ensure that all information conveyed with colour is also available without colour, for

    example from context or markup

    http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-colour-convey

    here are basically three types of colour deficiency; Deuteranope (a form of red/green colour deficit)

    otanope (another form of red/green colour deficit) and Tritanope (a blue/yellow deficit- very rare).

    ore:

    q http://colourfilter.wickline.org/

    q http://www.toledo-bend.com/colourblind/Ishihara.html

    q http://www.vischeck.com/vischeck/vischeckURL.php

    9 Is there delayed responsiveness for dropdown menus?

    sers with reduced motor skills may find dropdown menus hard to use if responsiveness is set too fa

    10 Are all links descriptive?

    Link text should be meaningful enough to make sense when read out of context - either on

    its own or as part of a sequence of links. Link text should also be terse. http://www.w3.org/

    TR/WCAG10/wai-pageauth.html#tech-meaningful-links

    . Accessibility for devices

    1 Does the site work acceptably across modern and older browsers?

    Before starting to build a CSS-based layout, you should decide which browsers to support

    and to what level you intend to support them.

    http://www.maxdesign.com.au/presentation/process/index_step01.cfm

    2 Is the content accessible with CSS switched off or not supported?

    ome people may visit your site with either a browser that does not support CSS or a browser with C

    witched off. In content is structured well, this will not be an issue.

    3 Is the content accessible with images switched off or not supported?

    ome people browse websites with images switched off - especially people on very slow connection

    le:///F|/incoming/______________DOCZ_SONNNNNNNNN...DESIGN/design/web/A_web_standards_checklist%20.htm (9 of 14)16.02.2005 04:25:56

    http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-color-conveyhttp://colorfilter.wickline.org/http://www.toledo-bend.com/colorblind/Ishihara.htmlhttp://www.vischeck.com/vischeck/vischeckURL.phphttp://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-meaningful-linkshttp://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-meaningful-linkshttp://www.maxdesign.com.au/presentation/process/index_step01.cfmhttp://www.maxdesign.com.au/presentation/process/index_step01.cfmhttp://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-meaningful-linkshttp://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-meaningful-linkshttp://www.vischeck.com/vischeck/vischeckURL.phphttp://www.toledo-bend.com/colorblind/Ishihara.htmlhttp://colorfilter.wickline.org/http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-color-convey
  • 7/30/2019 A Web Standards Checklist

    10/14

    Max Design - A webstandards checklist

    ontent should still be accessible for these people.

    4 Does the site work in text browsers such as Lynx?

    his is like a combination of images and CSS switched off. A text-based browser will rely on well

    ructured content to provide meaning.

    ore:

    q http://www.delorie.com/web/lynxview

    5 Does the site work well when printed?

    You can take any (X)HTML document and simply style it for print, without having to

    touch the markup.

    http://www.alistapart.com/articles/goingtoprint/

    ore:

    q http://www.d.umn.edu/itss/support/Training/Online/ webdesign/css.html#print

    6 Does the site work well in Hand Held devices?

    his is a hard one to deal with until hand held devices consistently support their correct media type.owever, some layouts work better in current hand-held devices. The importance of supporting hand

    ld devices will depend on target audiences.

    7 Does the site include detailed metadata?

    Metadata is machine understandable information for the web http://www.w3.org/

    Metadata/

    etadata is structured information that is created specifically to describe another resource. In other

    ords, metadata is 'data about data'.

    8 Does the site work well in a range of browser window sizes?

    is a common assumption amongst developers that average screen sizes are increasing. Some

    velopers assume that the average screen size is now 1024px wide. But what about users with small

    reens and users with hand held devices? Are they part of your target audience and are they being

    le:///F|/incoming/______________DOCZ_SONNNNNNNN...ESIGN/design/web/A_web_standards_checklist%20.htm (10 of 14)16.02.2005 04:25:56

    http://www.delorie.com/web/lynxviewhttp://www.alistapart.com/articles/goingtoprint/http://www.d.umn.edu/itss/support/Training/Online/webdesign/css.html#printhttp://www.w3.org/Metadata/http://www.w3.org/Metadata/http://www.w3.org/Metadata/http://www.w3.org/Metadata/http://www.d.umn.edu/itss/support/Training/Online/webdesign/css.html#printhttp://www.alistapart.com/articles/goingtoprint/http://www.delorie.com/web/lynxview
  • 7/30/2019 A Web Standards Checklist

    11/14

    Max Design - A webstandards checklist

    sadvantaged?

    . Basic Usability

    1 Is there a clear visual hierarchy?

    Organise and prioritise the contents of a page by using size, prominence and contentrelationships

    http://www.great-web-design-tips.com/web-site-design/165.html

    2 Are heading levels easy to distinguish?

    Use header elements to convey document structure and use them according to

    specification

    http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-logical-headings

    3 Is the site's navigation easy to understand?

    Your navigation system should give your visitor a clue as to what page of the site they are

    currently on and where they can go next.

    http://www.1stsitefree.com/design_nav.htm

    4 Is the 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

    http://www.juicystudio.com/tutorial/accessibility/navigation.asp

    5 Does the site use consistent and appropriate language?

    The use of clear and simple language promotes effective communication. Trying to come

    across as articulate can be as difficult to read as poorly written grammar, especially if thelanguage used isn't the visitor's primary language.

    http://www.juicystudio.com/tutorial/accessibility/clear.asp

    6 Does the site have a sitemap page and contact page? Are they easy tond?

    Most site maps fail to convey multiple levels of the site's information architecture. In

    le:///F|/incoming/______________DOCZ_SONNNNNNNN...ESIGN/design/web/A_web_standards_checklist%20.htm (11 of 14)16.02.2005 04:25:56

    http://www.great-web-design-tips.com/web-site-design/165.htmlhttp://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-logical-headingshttp://www.1stsitefree.com/design_nav.htmhttp://www.juicystudio.com/tutorial/accessibility/navigation.asphttp://www.juicystudio.com/tutorial/accessibility/clear.asphttp://www.juicystudio.com/tutorial/accessibility/clear.asphttp://www.juicystudio.com/tutorial/accessibility/navigation.asphttp://www.1stsitefree.com/design_nav.htmhttp://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-logical-headingshttp://www.great-web-design-tips.com/web-site-design/165.html
  • 7/30/2019 A Web Standards Checklist

    12/14

    Max Design - A webstandards checklist

    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.

    http://www.useit.com/alertbox/20020106.html

    7 For large sites, is there a search tool?

    hile search tools are not needed on smaller sites, and some people will not ever use them, site-spec

    arch tools allow users a choice of navigation options.

    8 Is there a link to the home page on every page in the site?

    ome users like to go back to a site's home page after navigating to content within a site. The home p

    comes a base camp for these users, allowing them to regroup before exploring new content.

    9 Are links underlined?

    To maximise the perceived affordance of clickability, colour and underline the link text.

    Users shouldn't have to guess or scrub the page to find out where they can click.

    http://www.useit.com/alertbox/20040510.html

    10 Are visited links clearly defined?

    Most important, knowing which pages they've already visited frees users from

    unintentionally revisiting the same pages over and over again.http://www.useit.com/alertbox/20040503.html

    . Site management

    1 Does the site have a meaningful and helpful 404 error page that worksom any depth in the site?

    You've requested a page - either by typing a URL directly into the address bar or clickingon an out-of-date link and you've found yourself in the middle of cyberspace nowhere. A

    user-friendly website will give you a helping hand while many others will simply do

    nothing, relying on the browser's built-in ability to explain what the problem is.

    http://www.alistapart.com/articles/perfect404/

    2 Does the site use friendly URLs?

    le:///F|/incoming/______________DOCZ_SONNNNNNNN...ESIGN/design/web/A_web_standards_checklist%20.htm (12 of 14)16.02.2005 04:25:56

    http://www.useit.com/alertbox/20020106.htmlhttp://www.jnd.org/dn.mss/affordances-and-design.htmlhttp://www.useit.com/alertbox/20040510.htmlhttp://www.useit.com/alertbox/20040503.htmlhttp://www.alistapart.com/articles/perfect404/http://www.alistapart.com/articles/perfect404/http://www.useit.com/alertbox/20040503.htmlhttp://www.useit.com/alertbox/20040510.htmlhttp://www.jnd.org/dn.mss/affordances-and-design.htmlhttp://www.useit.com/alertbox/20020106.html
  • 7/30/2019 A Web Standards Checklist

    13/14

    Max Design - A webstandards checklist

    Most search engines (with a few exceptions - namely Google) will not index any pages

    that have a question mark or other character (like an ampersand or equals sign) in the

    URL... what good is a site if no one can find it?

    http://www.sitepoint.com/article/search-engine-friendly-urls

    One of the worst elements of the web from a user interface standpoint is the URL.

    However, if they're short, logical, and self-correcting, URLs can be acceptably usable

    http://www.merges.net/theory/20010305.html

    ore:

    q http://www.sitepoint.com/article/search-engine-friendly-urls

    q http://www.websitegoodies.com/article/32

    q http://www.merges.net/theory/20010305.html

    3 Does the site's URL work without "www"?

    hile this is not critical, and in some cases is not even possible, it is always good to give people the

    oice of both options. If a user types your domain name without the www and gets no site, this coul

    sadvantage both the user and you.

    4 Does the site have a favicon?

    A Favicon is a multi-resolution image included on nearly all professionally developed

    sites. The Favicon allows the webmaster to further promote their site, and to create a more

    customized appearance within a visitor's browser

    http://www.favicon.com/

    avicons are definitely not critical. However, if they are not present, they can cause 404 errors in you

    gs (site statistics). Browsers like IE will request them from the server when a site is bookmarked. I

    vicon isn't available, a 404 error may be generated. Therefore, having a favicon could cut down on

    vicon specific 404 errors. The same is true of a 'robots.txt' file.

    More about this list

    his checklist was first outlined in a rough form on the Web Standards Mail list in May 2004. It was

    esented to the Sydney Web Standards Group on 5 August 2004. It is also available as a downloada

    df checklist for developers.

    he presentation is also available in:

    le:///F|/incoming/______________DOCZ_SONNNNNNNN...ESIGN/design/web/A_web_standards_checklist%20.htm (13 of 14)16.02.2005 04:25:56

    http://www.sitepoint.com/article/search-engine-friendly-urlshttp://www.merges.net/theory/20010305.htmlhttp://www.sitepoint.com/article/search-engine-friendly-urlshttp://www.websitegoodies.com/article/32http://www.merges.net/theory/20010305.htmlhttp://www.favicon.com/http://www.mail-archive.com/wsg%40webstandardsgroup.org/msg05279.htmlhttp://presentation/checklist/http://presentation/checklist/checklist.pdfhttp://presentation/checklist/checklist.pdfhttp://presentation/checklist/checklist.pdfhttp://presentation/checklist/checklist.pdfhttp://presentation/checklist/http://www.mail-archive.com/wsg%40webstandardsgroup.org/msg05279.htmlhttp://www.favicon.com/http://www.merges.net/theory/20010305.htmlhttp://www.websitegoodies.com/article/32http://www.sitepoint.com/article/search-engine-friendly-urlshttp://www.merges.net/theory/20010305.htmlhttp://www.sitepoint.com/article/search-engine-friendly-urls
  • 7/30/2019 A Web Standards Checklist

    14/14

    Max Design - A webstandards checklist

    q Bulgarian, thanks to Boby Dimitrov

    q Chinese, thanks to Jjgod Jiang

    q Spanish, thanks to Osvaldo Rainero

    q Italian, thanks to Franco Carcillo

    q Italian, thanks to Livio Mondini

    q French, thanks to Christophe Ducamp

    q German, thanks to Mario Mueller

    q Polish, thanks to Krzysztof Szafranek

    q French (Quebec), thanks to Chantal Ide

    q Portuguese, thanks to Mauricio Samy Silva

    q Czech, thanks to Vit Dlouhy

    q Russian, thanks to Alex Kachanov

    q Finnish, thanks to Kalamuki

    hanks as always to Rose for proof reading and Lea de Groot for her developer checklist suggestions

    uss Weakley

    3-August-04

    opyright Max Design, 2004

    http://flashbg.org/tutorials/checklist/http://www.flashbg.org/http://www.niub.com/jjgod/wiki/WebStandardsCheckList.htmlhttp://www.niub.com/jjgod/http://www.nocodestudio.com.ar/articulos/checklist/index.htmhttp://www.nocodestudio.com.ar/blog/http://www.webaccessibile.org/argomenti/argomento.asp?cat=481http://www.webaccessibile.org/default.asphttp://www.tiuvizeta.it/web_standards.htmlhttp://www.tiuvizeta.it/http://www.elanceur.org/FractalCity/Articles/Check-ListStandardsduWeb.htmlhttp://www.elanceur.org/FractalCity/http://www.lingo4u.de/article/checklist/http://www.lingo4u.de/http://szafranek.net/works/articles/webstandardschecklist/http://szafranek.net/http://www.w3qc.org/docs/webstandards_checklist.htmlhttp://www.divetheweb.com/dive/http://www.maujor.com/WSchecklist.htmlhttp://www.maujor.com/http://vitdlouhy.cz/clanky/webove-standardy.htmlhttp://vitdlouhy.cz/http://www.webmascon.com/topics/tools/09a.asphttp://www.webmascon.com/http://kalamuki.net/ekstra/tarkistuslista/http://kalamuki.net/http://about_rose.cfm/http://elysiansystems.com/http://elysiansystems.com/http://about_rose.cfm/http://kalamuki.net/http://kalamuki.net/ekstra/tarkistuslista/http://www.webmascon.com/http://www.webmascon.com/topics/tools/09a.asphttp://vitdlouhy.cz/http://vitdlouhy.cz/clanky/webove-standardy.htmlhttp://www.maujor.com/http://www.maujor.com/WSchecklist.htmlhttp://www.divetheweb.com/dive/http://www.w3qc.org/docs/webstandards_checklist.htmlhttp://szafranek.net/http://szafranek.net/works/articles/webstandardschecklist/http://www.lingo4u.de/http://www.lingo4u.de/article/checklist/http://www.elanceur.org/FractalCity/http://www.elanceur.org/FractalCity/Articles/Check-ListStandardsduWeb.htmlhttp://www.tiuvizeta.it/http://www.tiuvizeta.it/web_standards.htmlhttp://www.webaccessibile.org/default.asphttp://www.webaccessibile.org/argomenti/argomento.asp?cat=481http://www.nocodestudio.com.ar/blog/http://www.nocodestudio.com.ar/articulos/checklist/index.htmhttp://www.niub.com/jjgod/http://www.niub.com/jjgod/wiki/WebStandardsCheckList.htmlhttp://www.flashbg.org/http://flashbg.org/tutorials/checklist/