Web Standards Checklist

I have translated the original checklist A Web Standards Checklist, from MaxDesign.

Before starting, let’s clarify some concepts:

• What are web standards?
  
  The expression “web standards” can mean different things depending on who you ask. For some, it is nothing more than building websites without tables; for others, it means using valid code. In any case, the concept is much broader than that. Web standards could be defined as:
  
  
  Adherence to standards (HTML, XHTML, XML, CSS, XSLT, DOM, MathML, SVG, etc.) and the pursuit of best practices (valid code, accessible code, semantically correct code, user-friendly URLs, etc.).
  
  In other words:
  
  
  A site built according to web standards should be lightweight, clean, CSS-based, accessible, usable and search-engine friendly.


• About the checklist
  
  This is not a closed list. There are probably many points that could be added. It is simply a starting point. Among its practical uses are:
  
  
  • Demonstrating the breadth of web standards.
  • Serving as a practical tool for developers during the website production phase.
  • Helping developers who are interested in migrating towards web standards.
  
  The checklist is divided into 6 categories:
  
  
  • Code quality
  • Degree of separation between content and presentation
  • User accessibility
  • Device accessibility
  • Basic usability
  • Site management

The checklist:

• Code quality
  
  1. Does the site use a correct doctype?
  2. Does the site use a character set (charset)?
  3. Does the site use valid (X)HTML code?
  4. Does the site use valid CSS code?
  5. Does the site use CSS hacks?
  6. Does the site use unnecessary classes or IDs?
  7. Is the code well structured?
  8. Does the site contain broken links?
  9. How does the site perform in terms of page weight and speed?
  10. Does the site have JavaScript errors?


• Degree of separation between content and presentation
  
  1. Does the site use CSS for all presentation aspects (typography, colors, margins, borders, etc.)?
  2. Are all decorative images included in the CSS, or do they appear in the (X)HTML code?


• User accessibility
  
  1. Are “alt” attributes used for all descriptive images?
  2. Does the site use relative units instead of absolute units for text size?
  3. Do any layout elements break when the 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 color contrast?
  8. Is color used only for critical information?
  9. Is there a delay in dropdown menu response (for users with reduced motor skills)?
  10. Are all links descriptive?


• Device accessibility
  
  1. Does the site work acceptably in modern and older browsers?
  2. Is the content accessible with CSS disabled or unsupported?
  3. Is the content accessible with images disabled or unsupported?
  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 on handheld devices?
  7. Does the site include detailed metadata?
  8. Does the site work well across a range of browser window sizes?


• 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. Does the site provide a site map and a contact page that are easy to find?
  8. For large sites, is there a search tool?
  9. Is there a link to the home page on every page of the site?
  10. Are visited links clearly defined using a unique color?


• Site management
  
  1. Does the site have a meaningful and helpful 404 error page that works at any depth within the site?
  2. Does the site use friendly URLs?
  3. Do the URLs work without “www”?
  4. Does the site have a favicon?