Example of XHTML running on a phone
Steven Pemberton, CWI, Amsterdam and W3C
Chair, W3C HTML and Forms Working Groups
Editor in chief, ACM/interactions
What are the features of websites that you go back to regularly, that differentiate them from websites with the same purpose that you don't go back to?
Forrester did some research on this:
(the rest is noise: 14% and lower)
It is possible to design markup for usability.
For instance HTML 2 had image maps, that indicated that the image was clickable:
<img src="buttons.gif" ismap>
A problem with this is that the clickable areas were defined on the server, so the browser could give no feedback about where was clickable. For accessibility it was a disaster!
Later versions of HTML added client-side image maps, where the clickable areas were defined in the document:
<img src="buttons.gif" map="#buttonsmap">
This improved usability, but also accessibility.
Rather than being designed, HTML just grew, by different people just adding stuff to it.
We now have three versions:
XHTML is a family of XML-based markup languages being designed.
Currently it consists of:
There is an amusing platitude that goes "A camel is a horse designed by committee".
This is of course an insult to camels, which are perfectly designed for their environment. You just trying putting a horse in a desert and see what happens.
Something that wasn't designed by a committee as it happens is the <img> tag in HTML. This element specifies an image for inclusion in a page, and has the form
<img src="pic.gif"
alt="Me, en route for France">
This was badly designed in three ways:
If <img> had been designed well, firstly it would be called <image> (contractions are OK, but there's no need to overdo it: why <img> when you have <blockquote>?), and secondly it would have a fall-back possibility like this:
<image source="pic.png">
<image source="pic.gif">
Me, <em>en route</em> for France
</image>
</image>
This would display a PNG graphic if the browser knew about them, otherwise a GIF graphic, and if all else failed (or images were turned off) the marked-up text. Browsers which have never heard of the <image> tag would still display something sensible.
A facility that was added to HTML 4 was the ability to give a link to a 'long description' of an image:
<img src="temps.gif"
longdesc="temps.html"
alt="Average temperatures">
The problem with this solution is that hardly anyone uses it and there is little browser support for it.
In designing XHTML 2 we decided to do away with a separate concept of an image altogether. Now we just say that there is an equivalence between an external resource and an internal one. For instance
<table src="temperatures.png"> <caption>Average monthly temperatures</caption> <tr> <th>Jan</th> <th>Feb</th>.... <tr> <td>0</td> <td>-4</td>... </table>
A browser that can do images will display the image; others will display the table.
This aids device independence, accessibility, and even usability (since if the image is unreachable the document is still useful.)
The new member of the XHTML family is in our minds the real XHTML.
Our aims are:
In fact as I will show, many of these things are intertwined.
By 'generic XML' we mean: if a facility exists in XML technologies, and it is suitable, use it and not a special-purpose XHTML facility. Try to get missing functionality added to XML. Examples:
Major missing functionality: Linking (XLink insufficient for XHTML's needs).
Advantages: less variability; more interoperability; much of XHTML 2 works already; opportunity to make a cleaner break.
Remove all presentation-only markup.
Use stylesheets to define presentation.
Advantages: possible to author once, and display on different devices; better presentation possibilities; device presentation not hardwired; CSS has support for devices; more accessibility.
The power of CSS is currently seriously underappreciated.
(Note: doesn't require CSS to be implemented; just uses its model)
Add more semantically-oriented markup to make documents richer.
Examples: <l> element instead of <br>. <section> and <h> elements instead of <h1> <h2> etc
Not
I think that I shall never see<br> A poem lovely as a tree
but
<l>I think that I shall never see</l> <l>A poem lovely as a tree</l>
Advantages: more presentational opportunities (folding,
marquee, numbering)
[More shortly]
There are two principal 'users' of XHTML:
observe incorrect current use; identify other areas
the design of the markup can affect the end user's experience
As an example of poor usability, current frames are a disaster!
Currently devising XFrames, a replacement for Frames.
One day we will all be grateful for accessible websites. Maybe even today.
As an example of a current problem: <h1>, <h2> etc are mostly terrible for accessibility, because no one uses them right, and it is hard to work out document structure from so little information.
For example, as already pointed out, client-side image maps compared with server-side ones:
Client-side image maps give better usability by allowing feedback to the user about where is clickable, and where a click will lead to.
But they also give more accessibility, by allowing accessible software to create an equivalent navigation control.
<h2>Chapter 1</h2> ... <h3>Section 1</h3> ...
is now:
<section> <h>Chapter 1</h> .... <section> <h>Section 1</h> ... </section> </section>
More structure gives more accessibility.
Observe how scripting is currently used.
Identify missing markup/functionality.
Add it where possible; try to cover 80% mark
Examples: menus for navigation; forms data checking; folding presentation.
Advantages: more devices, more presentational variations, better search, better accessibility
The aim of 'less scripting' has already been mentioned: this clearly increases device independence.
Similarly, no hard-wired presentation means that a document can be styled with different stylesheets for different devices (as supported by CSS2)
There are two other areas where device independence is being addressed:
Events and Forms
Current HTML events are a disaster
Problems include:
The new event mechanism is extensible for new event types and 'abstract' events can replace the old device-dependent ones (e.g. 'activate' instead of 'click')
It is independent of scripting language
You can entwine event markup in the document, or separate it out
<a onClick="...javascript..." ...>
becomes
<a ev:event="activate" ev:handler="#myhandler" ...>
Advantages: more types of events, other types of scripting (e.g. declarative), more device independence, more accessibility
HTML forms were the basis of the ecommerce revolution. XForms improves on them:
It defines two separate parts: the 'real' form (data, datatypes and submission details), and form controls bound to the data.
Form controls are device-independent and accessible.
Advantages: usability, accessibility, device independence
<input ref="/person/date"> <label>Date of birth</label> <hint>Please enter your date of birth</hint> </input>
A user agent has a default presentation.
If the user agent supports it, a stylesheet can be used to define other presentations.
<select ref="icecream/flavors">
<label>Flavours</label>
<item><label>Vanilla</label>
<value>v</value></item>
<item><label>Strawberry</label>
<value>s</value></item>
<item><label>Chocolate</label>
<value>c</value></item>
</select>
This example covers both radio-button style selection, and menu selection: not encoded in the control.
It was already mentioned that Forrester's research gave good economic reasons for supporting usability. But how about accessibility?
"Google is, for all intents, a blind user. A billionaire blind user with tens of millions of friends, all of whom hang on his every word. I suspect Google will have a stronger impact than [laws] in building accessible websites."
...
"In a world where Google likely has a valuation several orders of magnitude higher than any chrome such as flash, graphics, audio, interactivity, or "personalization", I see a heady revision."
Karsten M. Self
Things to avoid:
In other words: avoid things that are bad for accessibility!
HTML was originally designed as a structure description language, not a presentational language.
The design of XHTML is truly 'radical': taking HTML back to its roots.
Device independence, accessibility and usability are surprisingly closely related.
Even though website builders may not yet know it, device independence, accessibility and usability have a major economic argument in their favour. Spread the word!
More information: www.w3.org/Markup, www.w3.org/WAI