Useful Tools for validating HTML, CSS and Accessibility

Useful Tools for validating HTML, CSS and AccessibilityWho 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

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:

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 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

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?

6 Gedanken zu “Useful Tools for validating HTML, CSS and Accessibility

  1. Nice entry, another great thing just to check out in the end is Browsershots, it’s not really a code validator but it’s a great way to have a visual confirmation as well on how it works on different systems.

  2. Michael – I use the HTML Validator before using the W3C one because that way I can test minor changes without having to load the W3C validator.

    Slevi – I don’t use Browsershots often, that’s why I didn’t mention it here. If I got a page done, I use it every now and then though :)

  3. Ahh, thank you.

    I have Chris Pederick’s extension on my FF for quite a while now. Marc Gueury’s is new to me, I will check it out. :) It’ll be great to have an off-line validator.

    My connection to W3C server is pretty slow sometimes so this will definitely be helpful.

  4. goldfries – I believe it is also possible to get a standalone HTML Tidy, but I’m not sure. Also, the HTML Validator can cause some confusion because it also checks frames (even if included via JavaScript, like GoogleAds!) so sometimes it doesn’t validate although your actual page code is ok. That’s what happened to me when I checked your page. It turned out that the malformed URL was the only invalid part of your page.
    I apologize for my statement on this in my comment at Michael’s Pro Blog Design.

Add Comment Register



Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>