nerkalog

nerkles March 15th, 2005

I spent my train ride home from work sketching this… I always come out with a tree when I doodle. Hmmm. I must like them or something.

• General , arts
• Comments(1)

nerkles March 14th, 2005

Molly.com has an interesting post (and ensuing discussion) about “The Return of JavaScript”.

I posted this in the comments (so far it seems to still be in the moderation queue UPDATE: it’s posted now.):

It is “back,” but in a new way.

JS + DOM + CSS enables us to start with a basic, standards-compliant, accessible page first, and then add in some clever tricks and styling with JavaScript and the DOM later (after the page loads). It’s tricky (though a fun challenge) to do it in ways that don’t ruin the order in which a screen reader like JAWS will read the page. Using a post-page-load script to move elements around can help you determine how search engines and content indexing systems will read your pages, but you can still have the layout you want.

I recently wrestled that one down (I think!) in this method of adding a floated sidebar that text can wrap around while keeping it at the end of the source.

The DOM can become a good friend to standards-based design now that a majority of browsers support it well. And emerging things like Ajax can make very interesting use of the DOM too.

• Code , General , Nerding , web stuff
• Comments(0)

nerkles March 8th, 2005

Here’s a simple technique to add a floated sidebar to a web page with the following features:

• uses table-free layout with CSS.
• source-ordered: the sidebar content is at the end of the XHTML source code.
• good accessibility.
• graceful degradation: still visible and usable in old browsers (pre-5.x), but it’s at the bottom of the page and accessed via anchors instead of floated alongside the article.
• uses unobtrusive JavaScript to move the sidebar into place on modern browsers at page load time.
• you can style it however you like with CSS.

Here is a complete example.

And here’s what it will look like on older browsers. (This is the exact same XHTML & CSS, minus the JavaScript.)

An Accessibility Story

I downloaded the demo version of JAWS to get an idea of how this would work out. My first attempt at this placed the sidebar into the flow of the document’s body, but running JAWS revealed that it reads you the document after the JavaScript has had its way with the DOM. What to do?

The technique leaves the sidebar at the bottom of the document by performing this series of steps:

1. move a copy of the sidebar into the document via the DOM to where you want it appear.
2. get its pixel size and position
3. remove the copy of the sidebar from the DOM
4. replace it with a floated, empty div of the same dimensions
5. position the actual sidebar content on top of the empty one with absolute positioning, setting its position and size to match.
6. repeat this process at onresize events

I’d appreciate if any users of screen readers or other assistive devices out there would report whether this technique works properly for them. From my tests, it works well in JAWS.

I suspect a similar problem is cropping up for JAWS users with the Semantically Correct Knockout Quotes technique I posted, so I’ll have to re-visit that at some point.

NOTE: this requires the X library, and you may need to adjust the path to it in the JavaScript to match where you put it.

• General , Nerding , articles , web stuff
• Comments(1)