Internet Explorer Validation and QA Toolbar

The goal of the IEQABar project is to integrate web site validation and quality assurance facilities into Microsoft Internet Explorer for Windows.

It will, unlike other extensions, not depend on online services like the W3C MarkUp Validator, but rather ship with the neccessary tools. It will allow to either validate the current page as loaded into your browser with a single click or automatically validate all pages you browse to and immediately show the results in the toolbar.

Why IEQABar is better

Beeing integrated into Internet Explorer, the toolbar offers a number of benefits:

Why IEQABar is even better

Not convinced yet? Ok, there is more. As currently designed, it is based upon two open source toolkits, OpenSP which is featured in the W3C MarkUp Validator, and HTML Tidy. Suppose you browse to a document like the following:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<p><img src='image' width='not sure' /></p>
</body>
</html>

There are two errors here:

When you ask for a validation report for this document, the toolbar will generate an XML document like the following:

<?xml version='1.0'?>
<?xml-stylesheet type='text/xsl' href='default.xslt'?>
<Document when="1082335017">
  <Location>http://www.example.org/foo</Location>
  <Encoding>utf-8</Encoding>
  <CompatMode>false</CompatMode>
  <XhtmlNS>true</XhtmlNS>
  <XmlDecl>false</XmlDecl>

  <Source utf8len="270">
    <l n="8">&lt;p&gt;&lt;img src='image' width='not sure' /&gt;&lt;/p&gt;</l>
  </Source>

  <doctype>
    <publicId>-//W3C//DTD XHTML 1.0 Strict//EN</publicId>
    <family>XHTML</family>
    <name>XHTML 1.0 Strict</name>
    <systemId>http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</systemId>
  </doctype>

  <Report reporter="OpenSP" took="234137">
    <m column="38" line="8" severity="2"
      >required attribute "alt" not specified</m>
  </Report>

  <Report reporter="Tidy" took="2473">
    <m column="4" line="8" severity="1"
      >&lt;img&gt; attribute "width" has invalid value "not sure"</m>
    <m column="4" line="8" severity="1"
      >&lt;img&gt; lacks "alt" attribute</m>
  </Report>
</Document>

Internet Explorer will then load this XML document and transform it using the specified default.xslt into a fancy report ( compare it to the W3C MarkUp Validator).

This approach makes the output fully customizable to suit your needs. You would probably like to have different output if you are going to paste the results into a mail or usenet posting, hide specific error messages, add links to other quality assurance services, or just change the style sheets to your favourite color scheme.

You will also note from the XML document above that OpenSP (and thus the W3C MarkUp Validator) is unable to detect the invalid width attribute but HTML Tidy reports the obvious error, using both tools you can make your documents truely valid!

How IEQABar could be even better

Tidy unfortunately does not detect some other errors, it would for example silently recover from an unquoted attribute value like in <font color=#ffffff>...</font> and it considers a legal empty <strong> element which it would trim as serve an error as improperly nested elements.

You can also see that processing the fairly simple document with OpenSP takes about 0.2341 seconds (on not quite up to date notebook) while Tidy finished processing the document already after 0.0024 seconds which is more or less insanely fast. The difference is less significant for large documents, but Tidy still outperforms OpenSP by numbers. Hence it would be an ideal solution to update Tidy to report all the errors OpenSP detects, but who is going to implement that?

Using the same tools as the W3C MarkUp Validator behind the scenes has another downside, you will get the same error messages as over there. Currently. There is nothing to stop us from improving it! Except OpenSP, of course. Nevertheless, rewriting some error messages and proving a hint here and there can greatly improve the usability as other tools like the WDG HTML Validator kindly demonstrate.

For XHTML documents it might be an option to rely on one of the various XML toolkits, Internet Explorer 6 for example already ships with Microsoft's MSXML 3.0 toolkit, which, believe or not, has more XHTML validation capabilities than the W3C MarkUp Validator, which correctly points out that is has only limited XML support.

Other, possibly better, options include Xerces-C or libxml, as they, unlike MSXML, are able to recover from well-formedness errors. Suppose you forgot to quote two attribute values and omitted two </p> somewhere, you would probably have to validate the document four times to spot and fix all the errors. But are the error messages from these tools actually more helpful than OpenSP's?

How IEQABar looks like

Let's browse to the homepage of the Keio University, one of the three W3C host organizations, and to CPAN:

[screenshot, Keio University]
[screenshot, search.cpan.org]

As you might guess, the red cross indicates that the homepage is actually invalid while the other one, CPAN, is valid. Clicking on the Validate button takes you the a report as shown above. Clicking on the little arrow next to it reveals even more features that a so tremendously cool that this needs to be kept a secret, not even I know about it. Ok, actually I did not implement anything there. Not yet. Which gets us to a problem:

How to get IEQABar

There is source code in CVS which can be compiled following my instructions (you need the free Visual C++ Toolkit 2003), but be ready to be disappointed, it's a command line application. Fully functional, but unfortunately not a toolbar which this project is all about. I've got toolbar code, but it's too much of a hack to publish it. Speaking for myself here, since I am already involved in maintenance and development of the W3C MarkUp Validator, the W3C CSS Validator, HTML Tidy, ... I probably won't have time to change that, and my co-developers currently neither. This project, and all the beforementioned projects, need your help!

How to contribute to IEQABar

Ok, here some ideas:

I am sure everyone can contribute a little to this project. Please do. There are two mailing lists, ieqabar-devel and ieqabar-users, just subscribe, say hello and tell us why you subscribed!

Thanks!