TJKDesign: Home Page

ez-css Putting the 'less' in table-less layouts. css-101 logo
Bookmark this article at these sites:

Giving some thought to the process.

This article is about:

  • semantics,
  • unobtrusive scripting,
  • progressive enhancement,
  • dealing with behavior states (back button and bookmarking issues),
  • caring for screen-reader users.

So the purpose of this exercise is to demonstrate how we create a document keeping all of this in mind, using an FAQ (Frequently Asked Questions) page as an example.

Semantics

I believe a Definition List is the best HTML element to use to create a FAQ page. The point here is not to debate this choice, but to show that I have chosen not just some random element, but the one I think makes the most sense. So it looks like this:

<h2>Frames FAQ</h2>
<dl>
<dt>Frames incapable browsers</dt>
<dd>Browsers are "frames enabled" since NN2/MSIE3; it is, however, possible to turn frames "off" in some modern browsers.</dd>
<dt>Bookmarking</dt>
<dd>The browser's built-in feature bookmarks the URL from the address bar instead of a particular frameset state. When the user returns to the bookmarked page he only gets the default frameset instead of accessing the original frameset state.</dd>
<dt>Title of framed pages</dt>
<dd>By default, documents that load inside frames don't affect the title displayed at the top of the browser window. The title corresponds to the document loaded in the topmost window.</dd>
<dt>Sending the link to a framed page to someone</dt>
<dd>The browser's built-in feature sends the URL from the address bar. The recipient of the email accesses the frameset with its default documents for each frame instead of accessing a particular frameset state.</dd>
</dl>

Check step 1.

What's cool?
The markup is meaningful and "clean" (we're using the bare minimum). Note the rendering of the Definition List without any styling; the indentation of the DDs in the browser gives users a visual clue about the relationship that exists between DTs and DDs.
What's not so cool?
The page is pretty boring in visual browsers.

Unobtrusive scripting

We can use Javascript with CSS to create an accordion effect (show/hide behavior) without adding any further elements or attributes to the markup. The solution is keyboard friendly, and we are using the DTs to trigger the behavior rather than A elements.
Check step 2

What's cool?
It looks cool.
What's not so cool?
The state of the behavior is lost when the user refreshes the page or tries to bookmark it.

Keeping state

We can keep track of what's going on in the page by using the document URI (it is Lucian Cozma from Adobe Systems Romania who gave me this idea).
Check step 3

What's cool?
Now the user can bookmark or refresh the page without any problem.
What's not so cool?
Using the back button creates some confusion.
It does not work in ieMac nor Safari 1.3.

Fixing the back button

We can keep the sequence of the user's action in the browser history by using the URI of an iframe.
Check step 4

What's cool?
Now the user can safely use the back button.
What's not so cool?
Fixing this issue broke our previous fix for bookmarking. Unfortunately, I can't think of a way to make both techniques work at the same time.
It does not work in ieMac nor Safari 1.3.

Taking care of screen-reader users

The enhancements for this document create issues for screen-reader users. Let's not forget that all answers in the FAQ are accessible to them as soon as the page loads, this is not Ajax, this content is already part of the document. In fact, from a screen-reader user's perspective, the behavior we've implemented is a useless layer that is source of confusion.

So rather than simply offering these users a way to turn the behavior off, I decided to enhance their experience too. Once they have been identified as screen-reader users, I disable the original script to replace it with one that transforms the DTs and DDS of the Definition List into a succession of Headings and DIVs. This makes it easier for some user agents to access the questions of the FAQ (through grouping or keyboard shortcuts).
Check step 5

Wrap up

We have enhanced the experience for most users without polluting the original markup, while making sure the page degrades nicely without Javascript or CSS support.

Unfortunately, we still have the issue regarding bookmarking/refreshing the page.
Bummer!

Special thanks to Vicki (vicki.falkland@gmail.com) who is a great copy editor.