nerkalog

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.

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

nerkles December 28th, 2004

My dad & step-mom were in Thailand for the tsunami disaster, and I got word last night that they are OK. I am SO relieved. Their itinerary happened to place them far from the ocean at the time it happened.

I still feel the utmost sympathy for all the people affected by this, it’s just so terrible, and the news about it keeps getting worse.

• General
• Comments(0)

nerkles December 14th, 2004

This is great advice which you should take, especially, “If possible, don’t use Microsoft Windows. Buy a Macintosh or use Linux.” I think that’s quite a statement coming from a well-known security expert.

• bookmarks , General , Nerding
• Comments Off

nerkles October 30th, 2004

Here’s a little tree i drew.

This one goes out to dad — happy birthday!

click it to see full-size

• arts , General
• Comments(5)

nerkles October 24th, 2004

I’ve concluded I don’t like the name ‘nerkalog,’ which was chosen a bit hastily. So, dear friends & family, and anybody else who sees this…

Let’s play Name That Blog!

Please “vote” for one of these names, or add in your other ideas by adding a comment below. Or email me if you have the address.

Here’s a few gems we came up with so far, but don’t let your imagination be limited to these ideas.

• talkin’ sh** about a pretty website (a reference to a song by Modest Mouse)
• the cheesecake truck
• “other possibilities”
• “sueños en realidad”
• The System Is Down
• WebThumper
• fighting in a sack (or maybe “fyt sak”)
• double jesus! [an inside joke--you had to be there]

To help fuel you, I’m planning this site mainly to be a place for sharing my tricks of website-making and general nerdery, and secondarily for movie & music reviews and recommendations, ‘deep thoughts,’ and the occasional random idea, silly story, or rant.

• General
• Comments(4)