What is Toluu?
Toluu is a free service for sharing the feeds you read and discovering new ones.		 Get Invite

dotjay.co.uk

The writing's on the Web


jQuery UI accordion: enabling keyboard navigationNovember 4 2008

A couple of weeks back, Karl asked a question about jQuery UI’s Accordion interface widget and keyboard accessibility. I’ve got my head in various JavaScript frameworks at the moment, so I took a quick look.

So, what’s an accordion when it’s at home?

You’ve got an accordion interface when you have a small collection of vertically-stacked, collapsible layers of content that a user can flip between. It’s a similar concept to tabbed interfaces where you view one chunk of content at a time, but in an accordion each of the interface controls are vertical and span the full width of the content. It’s easiest explained with an example (make sure you have JavaScript enabled).

Problems with keyboard accessibility

Karl was finding that, while you could navigate and control the accordion using the keyboard in Safari 3 and Internet Explorer 7, there were problems when using Firefox 3. I’m not yet sure why, but it didn’t work at all for me in Opera 9.6.

When testing with Firefox 3, I observe

Scripting Enabled debriefSeptember 22 2008

I spent a great weekend up in London at the Scripting Enabled conference and hack day. It was really great to catch up with people I haven’t seen in a while and to meet new people as well. There were a couple of “click” moments like bumping into Peter Abrahams while scanning through the alphabetically-challenged name tags and then figuring out that the lovely lady from Devon was Laura Whitehead who had recently blogged about my list of accessibility videos!

The Scripting Enabled difference

Hackers

I come away from web conferences and geek meets inspired and chomping at the bit to get working on some of the ideas that have come out of such events. I get back to my cave, start blogging about something that I need to get out there, get distracted by something I wanted to look up (“Right, let’s open that in another tab and deal with it later”), rarely properly finish the entry, get back to doing pro

Denna Jones' Locker?June 9 2008

I recently worked with Jon Tan to build a site for Denna Jones, a multi-talented consultant and writer around architecture and culture. We took a somewhat new direction with her site; all of her content comes in from Web services, such as Flickr, Tumblr and Twitter. I’m going to run through how we used Flickr to manage the majority of the site’s imagery.

A bit of background

From the outset, the idea was to focus on the information and make it as easy as possible for Denna to update her site. We gathered content into the web site from the various services Denna uses (Flickr, Tumblr, Twitter, Ma.gnolia, Upcoming), removing the need for a conventional content management system.

If you want to read more about the general idea, there’s an overview of how Denna’s site was designed and built in the colophon on dennajones.com and

Accessible Ajax: OmniTIApril 24 2008

PHP all-stars, OmniTI, recently launched their web site; Jon Tan and I had the pleasure of aiding in its creation.

You can read more about the site’s development on Jon’s blog, starting out with evolving OmniTI’s brand with their team through to a review of the site’s build. Here I’m going to show you what we did to enhance the site with some JavaScript functionality and how we ensured that content updated using Ajax was accessible.

Progressive enhancement

Progressive enhancement firmly in mind, we wanted to provide users immediate access to some useful information, such as contact details and the search form. The JavaScript functionality is strictly separated from the structured content of the site into external files – no scripting in the markup.

The contact details and search form have dedicated pages on the site, which serve as fall-backs for cases where JavaScript is unavailable. When JavaScript is disabled, the search and contact links will take you to the respective pag

Mac snippet solution: Quicksilver ShelfApril 17 2008

I’ve been looking around for something that I can store little bits of text in and then easily grab them when I need them. There are a few note-taking solutions for Mac out there that would suit, but I tend to use TextMate for notes – its templates and snippets are great for the majority of what I do – fairly big chunks of predefined text. Then I stumbled across an item on Lifehacker about Quicksilver’s Shelf. I use Quicksilver for other things anyway, so I gave it a whirl.

Using Quicksilver’s Shelf

Quicksilver’s Shelf is fairly basic for text, but it suits my needs fine. To use it, you’ll need to make sure the Shelf is installed.

  1. Open up Quicksilver’s plug-ins preferences and find the Shelf Module under All Plug-ins.
  2. Make sure the box next to it is ticked.
  3. Once it is installed, you may need to restart Quicksilver.

To save an item to the Shelf:

  1. Invoke Quicksilver (I use ctrl+spacebar).
  2. Press the . key (period) to enter Quicksilver’s text mode.
  3. Type or paste in some text that you want to save on the Shelf.
  4. Hit the tab key and as you begin to type “shelf” you sho