There’s also a third player in the debate, the World Wide Web Consortium. According to the XHTML Strict specifications, the usage of the target attribute has been banned. This happens because the XHTML Strict standard focuses entirely on the content of the document while sending all the presentation data to the stylesheet. The target attribute is a presentational one, because it specifies how the data from the hypertext reference should be presented to the user (in a new window, in a frame and so on). The XHTML Strict standard is meant to be used with all kinds of user agents – not just browsers – even with those that don’t support data presentation in the traditional way, in a browser’s window. This category of user agents includes, but is not limited to, screen readers for visually impaired persons, text-based browser such as links, web crawlers and so on. How could a text-based browser open a link in a new window? It doesn’t even have the “new window” concept.

Javascript to the rescue

If you want a well formatted XHTML document with target="_blank" links, go for the Transitional doctype. If you’re stubborn and want to use the Strict doctype, simply mark all external links with a special class, let’s say “outgoing”. If a link has this class than it should open in a new window. A good idea is to use this class in your CSS file and mark all external links with an easy to spot icon, just like Wikipedia does. It’s very user friendly. After all the links in the document are marked this way, simply use one of the javascript snippets below – depending on which framework you use – to make them open in a new window.

First the prototype version…

Event.observe(
    window,
    'load',
    function() {
        $$( 'outgoing' ).each(
            function( item ) {
                item.target = '_blank';
            }
        );
    },
    true
);

…and now the jQuery version…

$( function() {
        $( '.outgoing' ).each(
            function() {
                this.target = '_blank';
            }
        );
    }
);

Isn’t this just cheating the standard? Well…ummm…kind of. But it keeps everybody happy. Because if the target attribute is not supported by the user agent – not a GUI browser – it will still receive the well formatted XHTML document and will be able to parse it and use the information within without breaking a sweat. And if the user agent does support the target attribute – usually this means that it’s a GUI based web browser – then all the links will pop up in new, extremely annoying, windows and the folks in the sales department will be very, very happy.

Proper use of labels

You can assign labels to text inputs or textareas by specifying the “for” attribute. Like so:

<label for="username">Enter your username</label>
<input type="text" name="username" id="username">

This will help screen readers and other software designed to help impaired people surf the web to correctly interpret your code and make the right associations between labels and textfields. For instance, the following piece of code displays a table row with some form tags in it:

<tr>
	<td>
		Enter your username
	</td>
	<td>
		<input type="text" name="username" id="username" />
	</td>
</tr>

For a normal visitor, this is very simple to understand because the “Enter your username” text and the username textfield are on the same line. But for a blind person that uses a screen reader, this will not be displayed at all. And the screen reader must decide witch text goes with what textfield.

On this example, I believe that most screen readers will make the right connection between text and textfield, but if the html code becomes a little more complicated (ie. more text or other tags) I sure that the screen reader will fail to make the right assumptions. But the use of labels can fix that.

Label’s accesskey

If you want to give your forms a cool “web2.0 style” functionality, you can specify the accesskey attribute for your labels. For example you can do something like:

<label for="username" accesskey="u">Enter your <strong>u</strong>sername</label>
<input type="text" name="username" id="username" />

…and when the user presses CTRL/ALT + u (depending on the browser) he’ll be taken directly to that textfield. Pretty neat.