In order to check that the HTML and CSS is valid, the World Wide Web Consortium (W3C) provide validation tools which can check HTML and CSS code. These tools are the HTML validator and the CSS validator. If you check your code and your HTML or CSS is not valid, then you will see a report advising what the problems are.
In order to check websites comply to accessibility (typically WCAG) standards, there are also a number of web based tools that can check some elements of validation. Tools include achecker, WebAIM's WAVE tool and CynthiaSays.
It is important to be aware that these tool cannot check all aspects of accessibility, therefore manual checks must also be carried out. An example of an accessibility check that must be carried out manually is for the appropriateness of alternate text on images. Conside the example of an image depicting an orange, with the alternate text of "Apple". Whilst the tool would detect omission of alternate text, it would not know the alternate text was wrong.
The W3C HTML validator, CSS validator, and the achecker WCAG tool have the ability to check live web pages that link to them.
The tools know which site to check by using the 'referer' HTTP header field, which contains the address of the website that linked to the requested resource.
This means that for pages that are live on the web (i.e. not ones you are working on locally), it is quick and simple to check your pages.
The code to link to both W3C checkers and the achecker tool is as follows:
<a href="http://validator.w3.org/check?uri=referer">Validate HTML</a> |
<a href="http://jigsaw.w3.org/css-validator/check/referer">Validate CSS</a> |
<a href="http://achecker.ca/checker/?uri=referer">Check WCAG</a>This would render as shown here:
Validate HTML | Validate CSS | Check WCAG