Category Archives: accessibility

Logo Replacement

There are so many image replacement techniques out there I’ve lost count. Some using negative margins, super-small fonts or display:none, the reports are that some of them aren’t accessible.

But why replace images at all? Isn’t the alt attribute meant to replace images with text, rather than a contortion of CSS techniques?

For the MOE Website we used negative margins to do the image replacement for the MOE crest on the top left. However, under it is a black-and-white version of the crest. This is used in the printer styles, and will also be printed by browsers that aren’t CSS-enabled. The black-and-white crest has alt text to make it accessible should images be turned off.

I’m sure there are many ways to skin this particular cat.


Non-javascript Navigation

We finally solved the navigation problem. Though the number of users who have CSS-enabled but javascript disabled is small, untangling this dead-end was a priority for us because it is one of the basic guidelines for good accessibility.

The Solution

The current navigation needed javascript to function, so we wrapped a <script> tag around it and had it generated via a document.write. We added a <noscript> underneath it that called a server-side include for a non-javascript version of the navigation. Clicking on the roles without javascript enabled now brings you to separate websites housing the links you’d get from the slidedown menu.

It took a while to shift pieces of code for reusability’s sake, but I’m glad we got this out of the way.


One suggestion that came up every now and then was that we could provide accesskeys to improve the accessibility of the MOE website.

After doing the necessary research, there seems to be quite a number of reasons why accesskeys don’t work. Most of these revolve around the fact that browsers have already taken up most “alt-x” combinations for their own shortcuts, and overriding these default behaviours with accesskeys was a step backwards. It is important to note that the inclusion of accesskeys is a convenience, rather than an essential part of making a site accessible. I wasn’t ready to disable browser default shortcuts (already etched into some users’ usage behaviour) to add a little convenience which would be specific only to the MOE website.

A compromise was to include a few accesskeys using alt-number which was for the most part unused by the major browsers. I included accesskey 1 for home, accesskey 2 for skipping navigation and accesskey 9 for feedback on the recommendation from my longtime web hero Mark Pilgrim.