Category: Web

Denna Jones’ Locker?

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 and even some of its text.

A bit of background

From the outset, the idea was to focus on content and make it as easy as possible for Denna to update her site. We gathered content into the 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 and Jon Tan gives more detail on the concept and visual design on his blog.

Denna’s site was a fun project to work on because it was a bit of an experiment. (Denna obviously enjoyed it too!) Anyone who knows me well will know that I like to play with things; I break them, find out how they work, and then piece it all back together again. I’m an engineer. Playing with a new idea gets the creative juices flowing in Jon Tan and is a catalyst for my more technical sleight of hand. (It often feels like magic, even to me!) Now, that’s always a good place to start a project! So, it wasn’t exactly the watery doom you might have expected from the title of this entry, but then my clever play on words wouldn’t have worked; the apprehensive thalassophobic among you can breathe a sigh of relief.

Fostering the friendship with Flickr

Denna was already making good use of Web services, particularly Flickr. It made sense to lasso these elements from the sea of Web services and turn her site into a treasure trove of content, helping it to reflect the very essence of what Denna is and does. So, we jacked in the usual content management system approach in favour of outsourcing everything.

Denna finds Flickr a great tool for inspiring her work, but she also uses it to document her projects and share snippets of her day-to-day life. She’d modestly tell you that she’s no photographer, but she has a strong sense of the spirit of a place and is able to capture an environment, a building or room, even intricate details, in her own unique way.

We wanted to put Denna’s photos to work. Beyond simply including the photos in the site, they formed an integral part of its design and functionality. I’ll cover some of the mechanics involved in a moment, but first I’ll run you through the areas of the site where Flickr was used:

The masthead imagery

The masthead images throughout the site are pulled from Flickr using a photo tag search. All Denna has to do to add a new masthead image to her site is tag her photos; the site does the rest. On the home page, you can flick through the full series of masthead photos.

Denna’s work portfolio

We had originally collected the projects together into one set where each photo represented a project and its description introduced the project. We soon realised that we needed sets for each project, so that Denna could easily group together several photos for each project.

This is where Flickr’s photo collections came in useful. The photos and text descriptions used for Denna’s work portfolio all live inside a specific collection on Denna’s Flickr account. Each set represents a project and the set’s description is the project’s introductory text. Visitors are invited to see more photos of each project on Flickr.

The key photo for each project set is the one used to represent that project in the portfolio, so Denna can easily change that too from Flickr’s interface. Denna’s introductory text on the work page (to the side) is also pulled from Flickr; it’s the collection description.

Denna’s footer photo

As a little added extra, the photo of Denna used in the foot of each page is her “buddy icon” on Flickr; it’s just rather nice for the two to correlate. Again, this is simply requested from Flickr using the Flickr API, so if Denna changes her buddy icon on Flickr, the foot of her site gets updated as well.

The mechanics

PHP does the hard work on Denna’s site. To be more accurate, the CakePHP framework does a lot of the hard work with a little help from some friends. One particular friend is the rather wonderful phpFlickr class, which is a wrapper for the Flickr API and makes it really straightforward to liaise with Flickr from within PHP via the Flickr API.

Those of you who have worked with the Flickr API may already be wondering how I used Flickr’s photo collections when they are not yet supported in the API. As Jon mentioned in his entry about Denna’s site, I initially had to hack tags support for Tumblr, which used cURL to scrape the necessary data directly from their site. After emailing support about the fact that you could add tags to posts but do absolutely nothing with them, the Tumblr crew eventually exposed tags via their API. In a similar way, we had to work around the missing collections features in the Flickr API as well, which I may have to cover in a separate entry. Flickr collection support been discussed by users for some time, and while it looks like a solution may be on its way, it’s not yet seen the light of fibreoptic cable.

Denna’s site also uses PHP to resize photos from Flickr as necessary and then cache the images on the server. To keep the site up to date, the cache is flushed every night and repopulated, but it can also be manually refreshed by Denna. The number of masthead images pulled from Flickr is capped off to a limit. This is so that the server doesn’t have to go processing every image that meets our photo tag search, saving the server from heavy processing tasks and potentially bringing the site down.

The masthead image on the home page is rotated when you hit “next”. This is achieved using PHP sessions to remember the current image and some cache control to switch to the next image. As a progressive enhancement, a JavaScript image rotator takes over control of this feature so that a page reload is not necessary. To speed up development, my framework friend this time was jQuery. Other pages feature randomly selected masthead images on each page load.

Until next time

That’s about it for now. I hope you’ve found this little commentary on how we put together Denna’s site interesting.

Accessible Ajax: OmniTI

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 as accessible as possible.

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 pages. If JavaScript is enabled, it runs when the page loads and sets up everything that it needs for the added functionality.

We opted to use the jQuery JavaScript framework to implement these features. Using a framework allows you to quickly build prototype features and makes code easier to maintain in the long run. We specifically chose jQuery because it is fast and lightweight.

Sensible Ajax

The additional layers of markup for both the contact details and search layers are requested from the server using Ajax, which jQuery makes really easy. It’s common for such layers to be embedded in the page markup and hidden using CSS when the page loads. The information in these layers are for convenience and is available on other pages of the site, so it doesn’t need to be on every page. Using Ajax in this way also allows the markup for those layers to be easily maintain server-side.

Having requested the markup as necessary using Ajax, it may be tempting to inject the markup into the DOM straight away. If you do this and disable CSS, the markup will be visible at the top of each page, just as it would if you had embedded it in every page on the site. It just doesn’t need to be there. Instead, the markup is held in a JavaScript variable rather than injected into the page from the start. These layers are only added to the page when they are needed. This way, even if CSS is disabled, the content is only there when it needs to be and doesn’t interfere with the rest of the content.

The interface

When a visitor hits either the contact or search links at the top of every page, if JavaScript is enabled, the appropriate layer of information slides out from the top of the page. Hitting the close button or the link that activated the layer removes the layer from the DOM rather than simply hiding it with CSS. As a nice extra, hitting the contact link when the search layer is open will toggle between the two layers.

That’s all fine for the majority of users. Let’s make sure we think about other users who may have different, and diverse, needs.

A more accessible interface

Sighted users see the lovely jQuery slide down effect when they click one of the activating links; it grabs their attention and shows them that new information is on the screen. If you can’t see, you need different feedback to tell you what’s happened when you followed the link, otherwise you might think that nothing has happened.

For keyboard users, which includes most screen reader users, we need to give the added layer focus in some way. JavaScript to the rescue; we can move keyboard focus to a focusable element using some simple code. If we don’t do this, users will have to navigate a long way through the page to get to the place that the new layer has been added to the DOM. As you might imagine, few users will be patient enough to search around for the new information. In fact, they may not even know that new information is on the page.

Sometimes it will make sense to inject new information into the DOM just after the element that actions the addition. Doing so will help screen reader users to find the information because the very next thing they read is likely to be that new information. However, for the OmniTI site we wanted to add the new layers to the top of our page for visual effect. So, we need to tell JavaScript to focus on something appropriate within the new layer.

Using focus for feedback

We need to pick a focusable element in the new layer we’ve added to the page, i.e. a link or a form element. Conveniently – although, some might say by design – there are appropriate elements at the start of our new layers. In the search layer, it makes sense to focus on the search input of the form. In the contact layer, the first element is an email link, so we can put focus on that.

Keyboard focus can be brought about easily by calling focus() on the required element, so long as the element is focusable. For example, after injecting the layer, we can pick it out the target element and give it focus:


Ironing out some creases

During testing, the most prevalent screen reader software, JAWS, coped well when focusing on form elements. However, it doesn’t always seem to like focussing on links; the screen reader’s buffer (its copy of the page’s DOM) seems to get updated correctly, but its virtual cursor is not always moved when focus() is called in the JavaScript.

Where Ajax is involved, problems can occur when the screen reader updates its virtual buffer before the Ajax call is complete. The response to the Ajax call may result in a change in the browser, but that change is not passed on to the screen reader. As our Ajax calls are only executed when the script is initiated, that’s unlikely to be the case this time.

As a focusable element, the target link should be able to receive focus with no trouble, but in conjunction with injecting elements into the DOM, it doesn’t always work. However, there’s a fix.

Technically, setting a tabindex value of -1 on an element should allow any type of element to become focusable. (You can read more in Gez Lemon’s Making Ajax Work with Screen Readers.) Obviously, the link should be focusable anyway, but using JavaScript to set a tabindex value of -1 on our link before we give it focus results in more reliable behaviour from JAWS.

Update: I found out from Christian Heilmann that this is likely to be a symptom of Internet Explorer’s hasLayout issues, which should mean that it can be fixed by triggering hasLayout on the target element.

We’ve got one last problem to iron out. In some browsers, setting a tabindex value of less than zero will remove the element from the tab order of the page. Keyboard users will often make use of the Tab to navigate around the focusable elements of a page. The tab order is the sequence in which these elements are given focus as a user tabs around a page. As our link should be in that tab order by default, we’ve just removed it by messing with its tabindex. Setting the tabindex value to zero (and possibly blank, but I’d need to double check) will put the link back in its place in the tab order. I don’t recommend setting tabindex in markup, but if you happen to be doing so, you should set the tabindex back to its expected value.

John Slatin Fund Accessibility Project

John Slatin was a leading light in the field of web accessibility, which is a passion of mine and my area of work. He co-authored Maximum Accessibility – a book on web accessibility – was co-chair of the WCAG Working Group for a time and led accessibility research at the University of Texas at Austin. Sadly, John passed away in March after a three-year battle with leukaemia.

I never met John, but along with many other accessibility experts, I’m taking part in the John Slatin Fund Accessibility Project to help raise money for John’s wife, Anna, to honour John and to promote his cause; accessibility.

The project aims to raise money to help his family with the medical expenses incurred during John’s illness. Volunteer accessibility experts are matched to companies that want to have their web site checked over for accessibility issues. In return for a brief accessibility audit, the web site owners contribute a minimum of $500 to the John Slatin Fund.

More than 70 accessibility experts have volunteered their time to the project; now we’re looking for companies to take part too. If you work for or know of a company that would be interested in taking part, please point the appropriate people to the project information for companies or contact me directly.

Happy JavaScript Amputation Day!

I’ve been coerced into stripping off in aid of CSS Naked Day for another year, but I’ve also changed my behaviour.

What’s CSS Naked Day all about?

The idea behind this event is to promote Web Standards. Plain and simple. This includes proper use of (x)html, semantic markup, a good hierarchy structure, and of course, a good ‘ol [sic] play on words. It’s time to show off your <body>.

It’s a nice way to exploit the viral nature of the Web to promote web standards and good design, and it works well because it has visual impact. The huge number of CSS design galleries are testament to the fact that the Web grew up to be a place to show off talent for visual design.

Where next for viral evangelism in web standards?

When it comes to separation of CSS and JavaScript from our plain old semantic HTML, CSS Naked Day has it covered. What about raising awareness of using progressive enhancement to implement JavaScript features? In a time when the Web is an application playground fuelled by Ajax, I’d like to see people paying more attention to making sites work both with and without JavaScript.

So, today I’m removing not just my CSS styles, but my JavaScript as well. Perhaps you’d like to do the same?

Analogies for accessibility

I’ve never been able to pin down my learning style. Although I’ve always thought myself to be hands-on, my learning style tests always seem to suggest that I’m multimodal, varying slightly around level scores.

I like analogies. I find them to be useful tools for learning, particularly ones that have physical value. They make understanding a new topic easier by relating it to and drawing parallels with an already understood topic. Apparently, it’s auditory learners who tend to use stories or verbal analogies to understand things. Hmm, perhaps that somehow links with my love of music.

Making accessibility more… accessible

Okay, before I wander off on any more tangents, I’ll get to the point. In learning about Web accessibility, I’ve come across a few analogies for helping people to understand the topic and I have a couple of my own. I thought I’d air some of them to see what people think and perhaps hear some new ones.

The access ramp analogy

It’s probably safe to say that most people will think of physical access to buildings when you talk to them about accessibility. It’s something that most people know about and can understand without much effort.

Ramp access to buildings makes a good analogy for any kind of access technology — something that reduces the effect of a barrier or bridges a gap. Ramps improve accessibility for wheelchair users, parents with prams, the UPS guy delivering your office’s new photocopier – notice it’s not just about people with disabilitiesfootnote 1.

Jon Dodd from Bunnyfoot uses a library as an analogy for Web accessibility (or see the library analogy in more detail in the Northern Ireland Civil Service’s accessibility primer). It makes good use of the ramp analogy. Personally, I think a ramp is more an example of what I call bolt-on accessibility, designed to overcome existing obstacles rather than prevent them.

The transport analogy: everyday access

Think about the innovation that are curb cuts while reading this quote from someone who obviously knows what he’s talking about, me:

“We all know, the Web is not as real to people as the physical world. Using a computer is still very alien to some people. This, I think, is one of the reasons that people are unaware of Web accessibility. Most people will see accessibility on a daily basis in the physical world. In a way, everyone experiences accessibility on a daily basis — every time a person drives their car, rides their bike or uses their wheelchair. Roads, pavements and buildings are reasonably barrier-free, or getting there. People can understand these kinds of physical considerations easily.

“I think some people have difficulty considering accessibility in computers because it’s fairly intangible and those people almost expect accessibility to just exist because they don’t have any problems.”

Roads are so common that we forget that they facilitate accessibility — to get you from A to B. Pavements (“Sidewalks” for the uninitiated) have curb cuts, an innovation that facilitates accessibility for many of us on a daily basis.

Websites are like mobile phones

This one is more related to user experience rather than directly to accessibility.

You know how annoying it is when you’re trying to send a text message on your mobile phone and you can’t get a signal? You try holding your mobile up in the air to get a better reception. You try a different room to see if there’s a better chance of a signal somewhere else. You try hanging out the window. You wonder if there’s a problem with your phone.

It’s an example of a poor user experience and inaccessibility caused by a barrier or some other problem. Like trying to send a text message when you’ve got poor signal, sometimes things are not as immediate or as obvious as they should be.

People may try to muddle through, but rarely without frustration. We try relentlessly to get better reception with our mobile phones, hoping for success, but sometimes there just isn’t a signal. Likewise, sometimes a website is simply more noise than signal. Don’t fuel user frustration — take time to consider how you might create a positive user experience.

You may not be able to send your text message because there’s too much interference from something — a problem caused by things you cannot see. Sometimes there’s a problem with the phone that you don’t know about. If you cannot see or do not know about a barrier, it doesn’t mean it’s not there. Being able to foresee problems comes with experience, but it’s important to be receptive to problems faced by frustrated users in order to learn. When it comes to accessibility, if you can’t see or don’t understand a disability, it doesn’t mean you’re okay to ignore it.

Bad experiences with your mobile phone will make you think twice about using that service provider in the future or buying that brand of phone again, won’t it? People are impatient, so don’t burn their fuses at both ends by not taking the time to think about accessibility and ensuring a good user experience.

Accessible specsfootnote 2

Okay, this one’s not an analogy for Web accessibility as such, but I think it’s worth mentioning.

Think of how many of your family and friends either wear glasses or contact lenses. Quite a few I’d imagine. Myopia (nearsightedness) is surprisingly common. Something in the order of half of us are affected by it. Much of the world will probably think nothing of it these days, but there was a time when specs were a new technology (eyeglasses were invented in northern Italy some time around the end of the 13th century).

Spectacles are really a crutch — an aid, not a solution. We have solutions for improving Web accessibility, and techniques that help us to avoid causing problems for people, but my guess is that the majority of Web designers don’t use them. I sometimes feel frustrated to think that accessible techniques are not used by every Web professional. Then I remember the specs that are perched on my nose and wonder how quickly they caught on when the technology was new.

Your analogies

A couple of rather straggled analogies there, so I’m sure there are better ones. Do you have a favourite analogy for accessibility you’d like to share with the world? Post a comment and let us know…


  1. Some people would argue that a ramp is an example of universal design rather than being an accessibility feature. That’s not meant to sound like a dig at the “universalists” out there, but while I’m thinking about it: It seems to me that there are more useful things that require our attention than arguing about different interpretations of what accessibility encompasses. Just a thought. Back to footnote 1 source
  2. Nope, not WCAG – I said specs! Back to footnote 2 source

Geek networking in the South West of England

I went to the Future of Web Apps Road Trip geek-up in Bristol last month and more recently to d.Construct in Brighton. Both events were a great departure from the workload and a chance to socialise with like-minds and discuss Web geekery.

Networking within our industry is difficult in areas of the South West of England, particularly the more sparsely populated areas, the backwaters of Devon being my particular neighbourhood! Hence, the Road Trip meet-up in Bristol was especially welcomed.

Attending these recent events reminded me how important it is, at least to me, to meet up with others in our industry. I’m encouraged and inspired by these events, and I find it difficult to get to them often enough. It was with this in mind that Zach Inglis and I launched South West New Media (SWNM), but with sporadic interest in the site and little time for promoting, it has fallen by the wayside. Time to do something about it.

There’s movement on the creative horizon up in Bristol (or “Brizzel” to the locals) with Bristol Skillswap, BarCampBristol, GeekTogether, etc. Indeed, judging by activity on the
South West Web Designers (SWWD) group, recently set up by Paul Boag, there’s quite a bit going on throughout the South West.

Call to action

I think it’s time to pull my thumb out and keep the South West New Media site updated with events – there certainly seems to be a growing interest for it around here. So, if you run or attend a geek event in your area, tell others about it by adding it to the South West New Media group on The event will then show up on the site too. If you have any ideas for making the site useful to you or are interested in helping out, give me a shout as I’ll be freshening up the site before the year is out.

There’s also a mailing list on South West New Media, so feel free to join that or the aforementioned South West Web Designers (SWWD) group.

I have no style

Having only recently refreshed my CSS files, I’ve now ripped them out. Why? It’s CSS Naked Day!

CSS Naked Day is an annual event with the aim of promoting Web Standards through demonstrating the power of separating content from presentational information. So, marvel at my semantic, well-structured markup.

In the interests of internationalisation and all that, has stripped off twelve hours early – 48 hours of nakedness for the benefit of those for whom it is tomorrow already.

Suddenly the site is looking a lot better in Internet Explorer!

Government responds to website accessibility e-petition

Towards the end of last year I wrote an entry urging readers to sign an online petition. The petition aimed to highlight the poor standard of accessibility in UK Government websites following the launch of a disappointing new website by the Department for Trade and Industry (DTI) in May 2006.

In what I’m starting to percieve as “bloomin’ typical”, the Government response to this e-petition leaves the main question unanswered: how is the Government going to ensure that the websites they launch will be accessible?


The Government’s response implies that their current strategy will ensure accessibility, but the sub-standard DTI website contradicts that claim.

In the response, they mention that their Digital Strategy “is to be implemented by [the] DTI” (my emphasis). The Government’s Digital Strategy has been around since March 2005 and includes the following statement of action:

Tackling social exclusion & bridging the digital divide

Action 7: Improve accessibility to technology for the digitally excluded and ease of use for the disabled

Connecting the UK: the Digital Strategy

The new DTI website was launched in May 2006, over a year after the Digital Strategy was published. So, the DTI website fell short of this action, despite the fact that the report outlining that strategy was jointly written by the Prime Minister’s Stategy Unit and the DTI. They fell short of meeting their own standards.

For me, this fact doesn’t support the idea that the DTI is capable of supervising the cross-government review of the Digital Strategy mentioned in the response to the petition. Ian Lloyd raises this point for discussion over at Accessify:
Typical Government Response? Yup.

But what can you do? Time for another petition?! Or is that just another waste of time for the general public?

Petitioning for accessible governmental websites

Following the disappointing redesign of the Department for Trade and Industry (DTI) website earlier in the year, an online petition has begun to collect signatures on the Prime Minister’s website in an attempt to highlight the issue of accessibility standards for UK Government websites.

A little background

Earlier in the year, the DTI re-launched their website after investing £200,000 to rebuild it, the requirements for which included meeting the Government’s accessibility requirements.

In December 2005, Alun Johnson of the DTI had the following response to a question from Charles Hendry, Conservative MP, regarding the level of accessibility the DTI intended to achieve:

DTI follows the Guidelines for UK Government Websites which mandate Level A of the W3C‘s Web Content Accessibility Guidelines. DTI aims to go beyond this by meeting the AA standard, along with those elements of AAA which are considered best practice.”

Trade and Industry: Departmental Websites

However, the new site was launched failing even basic accessibility guidelines, hence failing to meet those standards and the requirements specified in official documentation.

Since the launch, two respected professionals in the Web community, Dan Champion and Bruce Lawson, have contacted the DTI in an attempt to ascertain how a Government body could allow such a failure to occur, and what plans are in place to rectify the situation. You can find out more on Dan’s and Bruce’s websites. Suffice to say that the DTI are lacking in useful responses, but an accessibility audit of the website is being carried out.

So, a Government body who claim to champion equal access to online services – and indeed should be attempting to do so – have instead seemingly wasted a large amount of resources and public funds on producing something that is far from adequate in the eyes of the Web design industry. And it’s only going to cost more to rectify the situation.

We the undersigned…

An important question now is one of how to ensure that the mistakes of the DTI are not repeated in other government organisations.

If you are a British citizen (or an expatriate) and think that websites launched by the UK Government should be accessible to disabled people, you can show your support by signing the online petition on the Prime Minister’s website, which has attracted over 100 signatures in its first week.

If you are a user, you can digg the petition and help by increasing its circulation.


21 Mar 2007

The Government has dodged the point in its response to this e-petition. It’s a shame, but probably to be expected judging by the responses from the DTI concerning their website. Read more in Government responds to website accessibility e-petition.

Indispensable Firefox Extension

A couple of weeks back, I discovered the Session Saver extension and I just can’t believe that I had never installed this wonderful Firefox extension! Get it! If you don’t already use it, just forget the rest of this post and install it… now! Update: Or install Firefox 2.0 and set up the Session Restore feature!

Session Saver has got to be one of the most indepensible extensions out there. And this one’s not just for all the Web developers out there either. I reckon this even beats the Web Developer toolbar in terms of usefulness.

Gradually going ga-ga

I’ll often have several windows open and several tabs open in each of those windows. Maybe I’m researching something or I’ve ended up multitasking again!

Then, I find myself in one of the following situations:

  • I’ve hit utter knackeredness and need to get some sleep. I’d usually hibernate Windows, but this sometimes leaves your programs running sluggishly when you resume Windows. As long as I don’t have any half written posts or other programs open, I’d bookmark all my open tabs and come back to them. Now, the problem is that I have a silly number of bookmark folders!
  • I go off on a little tangent and try out a demo for SVG or something. The demo crashes Firefox and I lose all the pages I have open.
  • My computer crashes, or Windows just decides that there’s some driver problem and restarts without any warning. Again, I lose the pages I have open.
  • I somehow manage to click “Close tabs” when I accidentally click the close button on the browser window.

All of the above situations usually end up with me trawling through my browsing history to find the useful pages I had left open to either read or bookmark.

Well, no longer. Session Saver will save pretty much everything, the entire state Firefox is in, including half-written posts.

A word of warning though: don’t panic! If you somehow manage to lose your previously saved state or accidentally close a single tab (I’ve done both so far), Session Saver backs up your previous state and the last ten tabs you have had open. Don’t do what I did: close Firefox one window at a time, worry that the two windows you wanted didn’t get saved, open Firefox, swear a lot, close Firefox only to ponder about whether or not Session Saver backs up your previous sessions, open Firefox to find it was too late and your last session had been backed up over the session you wanted.

A huge thanks to Jeroen for linking to the extension in the post I was reading about Multiple Firefox Versions.

How about you?

There are other extensions I use, but I’m not going to list them all here. I’ve seen several lists of essential Firefox extensions around, so I don’t see the point in adding mine. What’s the most indispensable extension you use?