Web Standards & Validation - The Basics
Jan 20th, 2010 1:01 amI've often spoken of the importance of having valid markup on your websites - but how do you know if your markup is valid? Fortunately, the organization that is in charge of standardizing web, the World Wide Web Consortium has its own free online validator:
http://validator.w3.org. With this tool, you can check your website for any errors or problems. The results come back with line numbers to make fixing these errors easy.
Similarly, a CSS validator checks your Cascading Style Sheets in the same manner, by cross-checking with standards set by the W3 Consortium. There are some that will also tell you which CSS attributes are supported by different browsers. This validation tool is also available from the W3 Consortium:
http://jigsaw.w3.org/css-validator
So why validate your website?
- It helps with cross-browser, cross-platform compatibility, and the future compatibility of new browsers.
- Search Engine Visibility: Search engines love valid markup - it makes it easier for them to sift through the content. So, more often than not, a website with valid markup will get higher rankings than one with messy markup.
- High quality and professional website - many web designers either do not validate or do not know how to fix a site with errors. Top notch web designers do.
The W3 Consortium Web Standards Checklist
1. Quality of code
- Does the site use a correct Doctype?
- Does the site use a Character set?
- Does the site use Valid (X)HTML?
- Does the site use Valid CSS?
- Does the site use any CSS hacks?
- Does the site use unnecessary classes or ids?
- Is the code well structured?
- Does the site have any broken links?
- How does the site perform in terms of speed/page size?
- Does the site have JavaScript errors?
2. Degree of separation between content and presentation
- Are all decorative images in the CSS, or do they appear in the (X)HTML?
3. Accessibility for users
- Are "alt" attributes used for all descriptive images?
- Does the site use relative units rather than absolute units for text size?
- Do any aspects of the layout break if font size is increased?
- Does the site use visible skip menus?
- Does the site use accessible forms?
- Does the site use accessible tables?
- Is there sufficient color brightness/contrasts?
- Is color alone used for critical information?
- Is there delayed responsiveness for drop down menus (for users with reduced motor skills)?
- Are all links descriptive (for blind users)?
4. Accessibility for devices
- Does the site work acceptably across modern and older browsers?
- Is the content accessible with CSS switched off or not supported?
- Is the content accessible with images switched off or not supported?
- Does the site work in text browsers such as Lynx?
- Does the site work well when printed?
- Does the site work well in Hand Held devices?
- Does the site include detailed metadata?
- Does the site work well in a range of browser window sizes?
5. Basic Usability
- Is there a clear visual hierarchy?
- Are heading levels easy to distinguish?
- Is the site's navigation easy to understand?
- Is the site's navigation consistent?
- Does the site use consistent and appropriate language?
- Does the site have a sitemap page and contact page? Are they easy to find?
- For large sites, is there a search tool?
- Is there a link to the home page on every page in the site?
- Are links underlined?
- Are visited links clearly defined?
Check out your website with the links above and see if it validates. Pass the info on to your web designer. If they can't fix your site, find someone who can. Our programmers here at Avallo write obsessively clean markup and code, and we pride ourselves on the quality of websites we develop. If your website isn't validating, give us a call.
763-488-1630