A few weeks ago, I had a conversation where Stephen Hawking’s name came up (albeit, not in the most intellectual of manners). While searching the web to make prove he was still alive (I told you it wasn’t deep… the conversation started with talk of the six million dollar man… you know, Lee Majors… schkk-schkk-schkk-schkk), I came across Hawking’s website. I’m happy to report that he is very much still among the living. Thank goodness.
On the main page of the site, you are struck by a singular oddity: accessibility. It is completely understandable why Hawking would be interested in having a site that is as accessible and easy to use as possible. However, what we find is a very 1997 approach to accessibility. Firstly, the site is divided into two sites: a site with graphics, and a plain text variant. Okay, you say, that seems reasonable (albeit overkill and unnecessary in 2005). It gets worse, though. I’ll reprint the main page in markup:
<HTML>
<HEAD><TITLE>Stephen Hawking</TITLE>
<META NAME="keywords" CONTENT="">
<META NAME="description" CONTENT="">
</HEAD>
<BODY BGCOLOR="#ffffff" TEXT="#000000" LINK="#FF9900" VLINK="#0066FF" ALINK="#0066FF">
<CENTER><TABLE ALIGN="center" BORDER="0" WIDTH="500" HEIGHT="100%"><TD ALIGN="center" VALIGN="middle">
<FONT FACE="Verdana, Arial" SIZE="3">Welcome to Professor Stephen W. Hawking's web pages.</FONT><BR><br>
<FONT FACE="Verdana, Arial" SIZE="2">These pages have been designed to make your access to the information as straight forward as possible. For this reason we have produced two separate versions of the site, a <A HREF="text/index.html" TARGET="_top">text-only version</A> and a <a HREF="home/hindex.html" TARGET="_top">graphic version</A>.<br>
If you have any problems with accessing this site, please contact<br> <A HREF="mailto:Graduate_Assistant@damtp.cam.ac.uk">Graduate_Assistant@damtp.cam.ac.uk</a>
</FONT>
<BR>
<BR>
<BR>
</FONT>
</TD></TR></TABLE></CENTER>
</body>
</HTML>It is staggering to find a message about accessibility marked up in less than accessible HTML. Content sitting in a table for mere presentational auspices, font and center tags… okay before I go off in some elitist rant, I’ll keep myself in check. The site is obviously put together by a graduate assistant (thus the email address), and well, you can’t expect all grad students in the world to know about standards and accessibility. He/She probably did it because they were asked to. And the desire to make the site accessible to all (which is quite obviously driven by Hawking’s own physical predicament) is very noble. It just saddens me to see such effort expended for such results.
So what can they do? Why is this so bad? Well, with accessible, standards-based markup, they would only need one version of the site. No need for duplication, and the inherent text differentiation errors that come in maintaining two copies of the same site. Also, such markup lends itself to easier use by people with assisting devices (such as screen readers and tools for people who cannot control a mouse), as the devices need not try and weed through the extraneous markup to figure out what the actual content is. Plus, access keys seem to be an almost no-brainer in this situation.
I felt like pulling one of those internet-generousity tricks you see every now and then, and just redo the site in accessible code. Unfortunately, though, the site is fairly large in the way of content, and that’s a bit of an undertaking. I will, however, post an example of what could be done with the main two pages (rolled into one more coherent page):
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Stephen Hawking</title>
</head>
<body>
<ul>
<li><a href="#content" title="Skip Navigation" class="hideme">Skip Navigation</a></li>
<li><a href="/about/" title="Read more about Stephen Hawking">About Stephen</a></li>
<li><a href="/disable/" title="Information about ALS">Disability</a></li>
<li><a href="/activity/" title="A glossary of terms used in Dr. Hawking's work">Glossary</a></li>
<li><a href="/Lectures/" title="Read Dr. Hawking's Lectures">Lectures</a></li>
<li><a href="/info/" title="The latest news on Dr. Hawking">Information</a></li>
<li><a href="/" title="Return Home">Home</a></li>
</ul>
<p><a name="content"></a></p>
<h1>Welcome to Professor Stephen Hawking's website.</h1>
<p>Everything you could ever want to know about Stephen Hawking… Well, almost!</p>
<ul>
<li><a href="/about/" title="Read more about Stephen Hawking">A Brief History of Mine</a>: Stephen William Hawking was born on 8 January 1942 (300 years after the death of Galileo) in Oxford, England… [<a href="/about/" title="Read more about Stephen Hawking">Read More</a>]</li>
<li><a href="/lectures/" title="Read Dr. Hawking's Lectures">Lectures</a>: Does God play dice? Black holes! Find out what it's all about in the <a href="/lectures/" title="Read Dr. Hawking's Lectures">lectures</a></li>
<li><a href="/info/" title="The latest news on Dr. Hawking">The latest news</a>: Find out about future lecture dates.</li>
</ul>
<p>Would you like to <a href="/info/contact.html" title="Information on contacting Dr. Hawking">email Professor Hawking</a>? See 'contact information' in the 'Information' section.</p>
<p>If you have ever wanted to know about the man who wrote the all-time best seller <strong>"A Brief History of Time"</strong>, and more recently the book that is still topping charts all over the world <strong>"The Universe in a Nutshell"</strong> then this is an excellent place to start. These pages have been written so that you can learn more about not only Stephen, but also his work.</p>
<p>There are a number of features contained in this site to make it easier for you to get around. Along the top of every screen is a navigation bar. It will take you anywhere in only a few clicks. These pages have been designed to make your access to the information as straight forward as possible. If you have any problems with accessing this site, please contact <a href="mailto:Graduate_Assistant@damtp.cam.ac.uk" title="Access problems?">Graduate_Assistant@damtp.cam.ac.uk</a></p>
</body>
</html>Now, this is by no means complete. Nor even remotely stylish (I haven’t even given much thought to CSS aside from a class to hide the skip navigation link for regular browsers). You can see how dull it looks in the sandbox. But that isn’t the point here. The code is semantically marked up and any user-agent could read and understand it. With some nifty CSS, it can also be made to look pretty dashing as well (I’m thinking some suckerfish dropdowns and the like). This is only a beginning, but who knows how much it could help?
🙂