Tag Archive for 'Webdesign'

Tab stop

Tab (242/366) by ChealionWhat if you search for directions from place A to place B while you are only able to use a keyboard as input and navigation device on websites?

MAIN_web, an Austrian initiative for media accessibility, asked to try and navigate the web only by using the tab key. I tried to get directions on three popular mapping sites: Google, Microsoft Live Maps and Mapquest. That’s how it went…

Google Maps

Google Maps initially focuses on the search bar and you can start typing the search query right away. Use “to” between both addresses and Google reads it as search for directions between 2 places. No tab yet needed (“enter” triggered the search) to get the first results. Unfortunately there are more options for one of both places and Google suggested some alternative addresses. Hoping down to the right suggestion took about 33 tabs. After that, the right directions showed up on the map, together with textual descriptions beside. The problem then was that it’s not possible to look up detailed views of the route only by navigating with the keyboard though.

Microsoft Live Maps

The site doesn’t focus on the search bar. It takes 9 tabs to reach the point where you can start typing the search query. The search engine didn’t understand “to” as search for directions, so I had to enable direction search first: 7 more tabs. From there you hop 19 tabs around the page to access the “start” field and one more to enter the “end” address. One address wasn’t found immediately, but the suggested correct address was only 4 tabs away. As before, the result page shows the route on the map and descriptions, but it’s not possible to access further or more detailed information on certain route items by only using the keyboard.


Mapquest puts the focus on the search bar. For directions you have to use the form below on the page: 5 tabs away before you can start typing start and end locations in different form fields. As before, one address wasn’t unique and Mapquest offers several suggestions. Unfortunately there’s no way to access those by using the keyboard only, the page sends you around in circles in the header area. So no directions from Mapquest at all.

It’s an interesting experiment and gives a feeling about web accessibility. I checked some other (own) mapping sites too and I guess there are some things we should look into. At least the main information or purpose of a site should be accessible that way.

Us & them

BEV shopsWhile others are offering an API or are working on even free access to public geodata, we are releasing a new portal with 5 different shop versions for public tax funded geodata.

Let alone that the world record attempt for using the smallest possible font size in an unlucky Cheetah UI rip-off isn’t quite state of the art in the year 2008. Especially not in times were public agencies are asked (by law!) to fulfill basic WAI requirements.


CSSeditIt needed Macheist to point me to CSSedit. This editor is just the right combination of WYSIWYG and text editor, features live preview and CSS overwrites. All seen in Firefox’s Web Developer toolbar of course, the Swiss army knife of web development. But not with such an intuitive user interface as CSSedit offers.

If you’re sitting behind a Mac and do CSS, you should give CSSedit a try, it’s worth it!

Click rebels

Click surveyNext time whenever I think I know exactly where users look and click on a website, I’ll do that click survey again.

Not very scientific, though, it gives some interesting patterns. Considering most people knew they are doing a test and probably tried rebelliously to avoid hitting popular spots, the symmetry of the results is fascinating.

Especially on the last image: the agglomeration line of clicks fits very well between the existing two lines and lies pretty much in the middle of them.

Updates and more

Actually I only wanted to update my WordPress installation to version 2.0.4 this weekend. Everything began when I started checking my plugins if they were updated too. I somehow ended up in the code of my WordPress theme, pursuing improvement of my site. A bit unhappy with the structure and appearance of it (I usually get bored with a theme every 6 months) I started browsing thru alternatives. So here we are: most of the (geek) sunday was used to implement and customize this new theme.

I know, it’s a heavy load with all the background images. Quite the opposite of a slick and fast text-based design. Well, if you prefer text-only, there is still the RSS feed.

Though the site is useable in IE6, it doesn’t look as nice there as in Firefox, Safari or any other web browser I know. The problem is the lack of transparent-png support of this old school web browser.


I didn’t know that Safari is already supporting parts of CSS3 like {text-shadow} and a few other properties. Apparently its time to dig through some W3C documents.


Wonderful what you can do with CSS. I guess it’s time to improve my CSS skills…

A demonstration of what can be accomplished visually through CSS-based design. Select any style sheet from the list to load it into this page.

css Zen Garden: The Beauty in CSS Design