Standards-Compliant New Windows

Posted on: 21 August 2003

Gez Lemon proposes a method for opening links in a new window that doesn't fail XHTML validation tests:

In previous versions of HTML, a target attribute could be used with links so they would open in a new window. The following is an example of an HTML 4.01 transitional HTML document using the target attribute.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Using a Target Attribute</title>
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
</head>
<body>
<p>
<a href="http://www.accessify.com" 
   target="_blank">Accessify</a> 
(Opens in a new Window)
</p>
</body>
</html>

The target attribute was deprecated in HTML 4.01, and consequently XHTML, leading developers to find a solution to launching new windows through JavaScript.

JavaScript to the Rescue

Launching a new window with JavaScript is achieved by passing the href attribute to the window object's open method, and returning a value of false from the event handler. If JavaScript is enabled, the return false stops the link from being processed, and is instead handled by the appropriate JavaScript event handler. If JavaScript isn't enabled, the link is processed as normal, providing a nice fallback mechanism. As we're concerned with accessibility, we need to ensure our code isn't device dependent. To ensure this, we provide an onclick event handler for those using a pointing device, and an onkeypress event handler for those using a keyboard. The following shows this in practice.

<a href="http://www.accessify.com" 
   onclick="window.open(this.href); return false;"
   onkeypress="window.open(this.href); return false;">Accessify</a> 
(Opens in a new Window if JavaScript is enabled)

No JavaScript

Whilst the method outlined above has a good fallback mechanism, it isn't truly giving us what we want. JavaScript may be disabled for a number of reasons, but we want the page opened in a new window should the user agent support new windows.

Modularisation of XHTML

The modularisation of XHTML 1.1 breaks down XHTML 1.0 Strict into a collection of abstract modules, grouped by related elements and attributes. The idea behind modularisation is instead of having one huge DTD that defines everything; modules are used as and when required. To ensure the basis of XHTML is consistent, four core modules are required.

XHTML Core Modules
Module Description DTD Fragment
Structure Structure Module Definition. Structure Module Implementation.
Text Text Module Definition. Text Module Implementation.
Hypertext Hypertext Module Definition. Hypertext Module Implementation.
List List Module Definition. List Module Implementation.

Other XHTML Modules

As well as these four core modules, there are other modules you may use.

XHTML Abstract Modules
Module Description DTD Fragment
Applet Applet Module Definition. Applet Module Implementation (deprecated).
Presentation Presentation Module Definition. Presentation Module Implementation.
Edit Edit Module Definition. Edit Module Implementation.
Bi-Directional Text Bi-Directional Text Module Definition. Bi-Directional Text Module Implementation.
Basic Forms Basic Forms Module Definition. Basic Forms Module Implementation.
Forms Forms Module Definition. Forms Module Implementation.
Basic Tables Basic Tables Module Definition. Basic Tables Module Implementation.
Tables Tables Module Definition. Tables Module Definition Implementation.
Image Image Module Definition. Image Module Implementation.
Client-Side Image Map Client-Side Image Map Module Definition. Client-Side Image Map Module Implementation.
Server-Side Image Map Server-Side Image Map Module Definition. Server-Side Image Map Module Implementation.
Object Object Module Definition. Object Module Implementation.
Frames Frames Module Definition. Frames Module Implementation.
Target Target Module Definition. Target Module Implementation.
Iframe Iframe Module Definition. Iframe Module Implementation.
Intrinsic Events Intrinsic Events Module Definition. Intrinsic Events Module Implementation.
Metainformation Metainformation Module Definition. Metainformation Module Implementation.
Scripting Scripting Module Definition. Scripting Module Implementation.
Style Sheet Style Sheet Module Definition. Style Sheet Module Implementation.
Style Attribute Style Attribute Module Definition. Style Attribute Module Implementation (deprecated).
Link Link Module Definition. Link Module Implementation.
Base Base Module Definition. Base Module Implementation.
Name Identification Name Identification Module Definition. Name Identification Implementation. (deprecated)
Legacy Legacy Module Definition. Legacy Module Implementation. (elements in this module are already deprecated by previous versions of HTML and XHTML)

XHTML 1.1 Modules

When you use the XHTML 1.1 DTD, you automatically get the following modules.

  • Structure Module (core).
  • Text Module (core).
  • Hypertext Module (core).
  • List Module (core).
  • Object Module.
  • Presentation Module.
  • Edit Module.
  • Bidirectional Text Module.
  • Forms Module.
  • Table Module.
  • Image Module.
  • Client-side Image Map Module.
  • Server-side Image Map Module.
  • Intrinsic Events Module.
  • Metainformation Module.
  • Scripting Module.
  • Stylesheet Module.
  • Style Attribute Module (Deprecated).
  • Link Module.
  • Base Module.
  • Ruby Annotation Module.

Adding Modules

Whilst the target attribute has been dropped from XHTML, a non-deprecated XHTML module exists. We can use the module to support the target attribute for link elements, without having to use JavaScript, and in a standards compliant manner.

When we extend XHTML in this way, we need to specify the declaration module for the data types, and the qualified name module, as well as the core xhtml11 module. The following example is a DTD we could use, that brings in the target module to allow us to specify a target for links.

<?xml version="1.0" encoding="iso-8859-1"?>
<!-- 
    XHTML-with Target
-->

<!--
    Bring in the ENTITIES XHTML data types module for definitions
    of basic data types
-->
<!ENTITY % xhtml-datatypes.module "INCLUDE"> 
<![%xhtml-datatypes.module;[ 
<!ENTITY % xhtml-datatypes.mod 
PUBLIC "-//W3C//ENTITIES XHTML Datatypes 1.0//EN"
"http://www.w3.org/TR/xhtml-modularization/DTD/xhtml-datatypes-1.mod"> 
%xhtml-datatypes.mod;]]>

<!--
    Bring in the ENTITIES Qualified Name module for namespace 
    declarations and parameter entities
-->
<!ENTITY % xhtml-qname.module "INCLUDE"> 
<![%xhtml-qname.module;[ 
<!ENTITY % xhtml-qname.mod 
PUBLIC "-//W3C//ENTITIES XHTML Qualified Names 1.0//EN"
"http://www.w3.org/TR/xhtml-modularization/DTD/xhtml-qname-1.mod"> 
%xhtml-qname.mod;]]>

<!-- 
    Bring in the XHTML 1.1 driver
-->
<!ENTITY % xhtml11.dtd PUBLIC "-//W3C//DTD XHTML 1.1//EN"
           "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
%xhtml11.dtd;

<!-- 
    Bring in the Target Module
-->
<!ENTITY % xhtml-target.module "INCLUDE">
<![%xhtml-target.module;[ 
<!ENTITY % xhtml-target.mod 
PUBLIC "-//W3C//ELEMENTS XHTML Target Module//EN"
"http://www.w3.org/TR/xhtml-modularization/DTD/xhtml-target-1.mod"> 
%xhtml-target.mod;]]>

Using the new DTD

If the DTD above was hosted on Accessify, in a directory called DTD, we would use it with the following DOCTYPE.

<!DOCTYPE html PUBLIC "-//Accessify//DTD XHTML-with Target//EN" 
    "http://www.accessify.com/DTD/xhtml-target.dtd">

Target Example

The following is a complete example that uses the DTD defined above to allow the target attribute with links.

<!DOCTYPE html PUBLIC "-//Accessify//DTD XHTML-with Target//EN" 
    "http://www.accessify.com/DTD/xhtml-target.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb">
<head>
    <title>Using a Target Attribute</title>
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=ISO-8859-1" />
</head>
<body>
<p>
<a href="http://www.accessify.com" 
   target="_blank">Accessify</a> 
(Opens in a new Window)
</p>
</body>
</html>

Conclusion

The modularisation of XHTML means we can use modules to extend the basic DTD, and still comply with the standards as directed by the W3C. In the example used in this document, it means we can open links in a new window without the need for JavaScript.

This article was written by Gez Lemon of Juicy Studio ("Our goal is to exceed your expectations"). The site has recently been running a number of accessibility tips, so why not go on over and take a look.