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="https://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="https://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.
| 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 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"
"https://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"
"https://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="https://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.