Who doesn’t know the situation when you release a website and within a short time you get complaints of users with browser X who say that xyz doesn’t work on the page.
These days there are many browsers out there and of course you can test your page on them if you have the time. Even then there is the chance you missed one or two and then you are back at zero. Also, it is possible that a design doesn’t allow users with a disability to use the page.
So what to do?
First of all it is a good advise to use valid HTML and CSS. Also make sure you don’t abuse JavaScript, Flash and Gifs. If you are reading this article, I assume I don’t have to tell you about these things…
But how can you validate your HTML, CSS and Accessibility?
Well, I will tell you which tools I’m using to validate my websites. These tools are not perfect, but if you use them properly you make sure that they cover each others weakness and leaving you with a valid website at the end. Also, there are some things you can’t validate by using a tool. You need to know the guidelines for HTML, CSS and Accessibility (WCAG)
HTML Validation
My major validator is the official W3C validator. It is always up-to-date to the latest spec’s and allows you to either test a page directly if said page is online or you upload/copy the page to the validator. You can reach the validator from any location as long as you are online, which can be very handy.
Additionally I’m using my Firefox for testing my websites. I have two very powerful extensions installed:
- HTML Validator by Marc Gueury
- Web Developer by Chris Pederick
The HTML Validator by Marc Gueury allows you to validate the page inside the browser without the need to visit a validator page like the W3C validator. The extension has 3 algorithm to validate the page.
- The „HTML Tidy“ algorithm is based on the HTML Tidy from W3C
- The „SGML Parser“ is based on the SGML reference information for HTML
- The „Serial“ uses both validator algorithms one after the other.
The first algorithm is recommended for all while the other two are recommended for professionals. I myself prefer the Serial algorithm, but I believe you need to test which one works best for you.
The Web Developer tool by Chris Pederick does not have a built in validator, but it allows you to easily check a page with the W3C validator. Also it allows you to easily disable scripting or it outlines your HTML elements. It has many more options and is also useful for validating your CSS or W3C.
CSS Validation
I‚m using the official W3C validator for validating my CSS code. It is always up-to-date to the latest spec’s and allows you to either test a page directly if said page is online or you upload/copy the page to the validator. You can reach the validator from any location as long as you are online, which can be very handy.
Additionally I’m using the Web Developer toolbar. It allows you to disable CSS if you want to. You can edit the CSS code and see the result without having to edit the original file and upload it again. You can even resize your browser window to test your layout for different resolutions.
Accessibility Validation
When writing a website I always rely on the HTML Validator extension. It tells you almost everything you need to know.
There are also online validators available, one of them you can easily access with the Web Developer toolbar. If it is not enough, you can always Google for other accessibility validators.
Wrap Up
Now you know which tools I’m using. I hope these tools will also help you. Or are you using them already? Do you know other tools you can recommend?