Webstock 09: Derek Featherstone

Live blogging a presentation at Webstock 09 by accessibility and web development expert Derek Featherstone:

Derek starts with an example of a blind user trying to call a website help line.

Blind User: “Hello? I need some help please”

Help desk staff: “What is your login password please?”

Blind User: “Just a moment”. (He starts JAWS screen reader that reads out his password login info that’s stored in notepad)

Help desk staff: “Is there someone in the room with you sir?”.

Blind User: “No, it’s my screenreader”.

Help desk staff: “Sorry sir, but my superviser says I have to hang up on you now”.


This actually happened. User experience encompasses EVERYTHING. Even the help desk phone manner. People need to think about this! User support etc. Accessibility is SO important

Derek then showed the example of an accessible door sign with white lettering on a black background, plus raised lettering underneath, plus braille on a raised angle. This equals excellent accessibility and it should be inspiration for what we do on the web. Can we do things on the web to help people with a disability? We can and we should.

Derek’s vision: “People with disabilities will have their preferences and needs always available so the web / environment could adapt to them for a change.” Imagine if we could walk into a bookstore and signs would adapt to your personal disabilities, flaws or needs?

Accessibility is not always inspiring or cool. Most people think of the W3C guidelines when they think of accessibility.  But we should think of progressive enhancement when we design accessible websites:

1) Content

2) Presentation

3) Behaviour

That is the baseline for an accessible web site. Let’s go beyond this.

Small barriers can become big ones for people with disabilities surfing the web. Derek gave an example of an Advanced Search form which is completely unusable. Showed another example where the word “news” was used for popular items on the site. This created false expectations in the user because the items were nothing to do with breaking news items. The web designers should have used “highlights” instead.

Just because something is technically compliant DOES NOT mean it’s going to be easy to use. He showed an example of a hugely complex and challenging wheelchair ramp. It may have been technically compliant, but it would have scared the crap out of wheelchair-bound users. Accessibility doesn’t have to be hard.

Derek then played a sound-bite example of tags on Amazon URL being interpreted by a screen reader – it took foreeeeevvveeeerrr. Accessibility FAIL. He then played example of Chapters URL interpreted by a screen reader – All layout is done with CSS, using JavaScript correctly, implemented web standards properly. BUT something gets lost. The pop-up comment box interrupted the navigation. ALL tags get read out. Result = confusion and the Amazon site was actually easier to use for a visually impaired visitor. Goes to prove that even the sites who try the hardest can get accessibility wrong.

Derek was born with a club foot. He wore a cast for the first year of life. He had a major operation to correct it at age 3. But sports were still impossible as a kid. NOW, he does triathalons. Between his first in 2006 and his latest in 2008 he got better and fitter. Like Nat said yesterday, he had successful failures and learnt from them. He pushed his limits and got better.

We should do this on the web in terms of accessibility. Let’s get better at this stuff and keep improving accessibility. Derek showed an example of Google Maps – zoom not accessible via tabbing for visually impaired visitors, so they must use grids. Ugh. For a voice recognition user, this is awful. Luckily, Google Maps API allows us to create our own accessible version of Maps.

Someone challenged Derek to make an online crossword puzzle accessible. They said it couldn’t be done! He did it by using labels on clues, using JavaScript to jump from one clue to the next. He created a field set in correct numerical order and then applied JavaScript to make the crosspoint easier to use.

This is the type of thing you can do if you think a bit harder about accessibility. Previous version was image-based. You can also do Inline Editing and hover navigation. In BaseCamp, there’s no way to navigate without a mouse. So he created a GreaseMonkey script that allows disabled users to use BaseCamp right now. 37Signals should address the accessibility issues but who knows when?

The Social Accessibility Project is a FireFox plugin that uses crowdsourcing to improve usability experience for disabled surfers. It provides and takes instant feedback from user community in real time.

On August 1 2001, a Mozilla Bug Report was filed about a major accessibility issue in FireFox when trying to view Flash movies. Nothing has been done about it! So Derek and others took the same approach they used with Google Maps and hacked a solutionto use tabs to control play/pause, mute/unmute, again using a GreaseMonkey script to add keyboard controls. Awesome.

Some people created Outfox, a GreaseMonkey script using Firefox that brings voice to Firefox using JavaScript. It reads out maps etc. and effectively creates a talking map. Is this helpful? He’s not sure but let’s push the limits and see. These are all just experiments.

Ubiquity for FireFox enables Derek to invoke granular data such as specific addresses, links etc. The web is so much more complicated now – people say “I wish I had a command line”. So Derek thought, what could we do with this? What if we could create a play command line using Ubiquity so that a user doesn’t have to tab 30 times to get to the control they want? There are lots of applications here.

This stuff is cool to Derek. It may not be as cool as online gaming, but if it improves the User Experience, it is cool to him. What type of functionality can we all build into the web to improve it? Let’s see.

Webstock 09: A Mashup Case Study

Live blogging a Mashup Case Study presentation at Webstock 09 by EveryBlock.com founder Adrian Holovaty:

A mini Google Maps app was actually developed before Google did it by a NZ developer using the Google API. Got Adrian thinking and he developed ChicagoCrime.org which then morphed into EveryBlock.com.

ChicagoCrime.org was a mashup of crime data put together from the Chicago Police Dept’s web site and published together with Google Maps. Searchable via route, area, block or neighbourhood locations (e.g. barber shops, restaurants), even via mobster activity. Google’s rollout of Street View added even more data.

They then added Flickr data, user material etc. This eventually became EveryBlock.com, a news feed for your block. You can go to the site, select a city and choose your neighbourhood to see all news relating to your neighbourhood that has been written about in local media. The goal is to find the news that is very specific to you that may be buried on the major news sites by national or international media stories.

The data includes restaurant reviews, product launches, feel-good stories, lost and found stories etc. You can search via trends e.g. all restaurants with particular food safety violations e.g. vermin. You can search via RSS feeds in your neighbourhood, real estate listings, press releases etc.

How Does it Work?

Complex technology is used to pull all the data together. The site uses natural language processing including datafeeds from portals, search engines, media agencies, APIs like Flickr’s, geocoding API, Craiglist, Yelp, Valpak, Trulia. Government resources.

How to Best Make a Successful Mashup:

Lesson 1: Take advantage of existing data

Lesson 2: Sort by date – this adds value

Lesson 3: The more effort it takes, the higher the reward. Unlike Google. Google likes convenient, centralized, USA building-permits databases. Anything else is too much work. Be the anything else.

Lesson 4: Governments are opening up. Be nice and appeal to civil servants (and librarians!). Plot cities/agencies against each other. Governments shouldn’t build interfaces into their data, they should offer an API so others can pull out RAW data.

Lesson 5: Avoid using maps as a crutch. Google Maps is not the app. Use it as a tool to create an awesome app – push data, don’t pull.

Lesson 6: Permalink everything. Anything that can be a link should be a link. Used IMDB.com as example. There’s a special place in hell for session cookies.  EveryBlock gets a LOT of link love and rankings for long tail search queries from Google because of permalinks. Granular Permalinks future proofs a site.

Lesson 7: The simplest way to granulize URLs: Use attributed URLs E.g. Date / crime/dates Type: /crime/types/ Address: /crime/addresses/  Location: /crime/locations/  Then drill down further e.g. /crime/locations/hotels/  Flickr and Delicious use that. Use the Django databrowse to look at database schema and create a directory structure to suit!

Lesson 8: Move Beyond Points – web apps that use geo-spatial info should respect usability. Points aren’t everything. Bubbles aren’t everything. Use lines to make the maps more usable. Use polygons, use transparencies. Don’t overlay data on data. Use GeoRSS to geographically encode objects for RSS feeds.

Lesson 9: Roll your own maps – Google maps is great, BUT use it intelligently. Use colors, fonts, text size, behaviour at zoom levels, road widths, languages etc.

Lesson 10: Make a mashup!

and the winner is…

The winning design

Wow, thank you to all readers for your impressive participation in the poll for our 2009 Search Engine College t-shirt design competition.

The lead changed hands a couple of times during voting week, but by Sunday evening we had a clear winner. When voting closed at midnight on Sunday, here’s what the top 3 results were:

  • Tee Design 7 (Pete Newsome) Front / Back
  • 152 votes

  • Tee Design 6 (Matt Burgess) Front / Back
  • 98 votes

  • Tee Design 8 (Andrew Ballard) Front / Back
  • 9 votes

My hearty congratulations to our winner Pete Newsome (whose design is pictured) and the two runners up Matt and Andrew.

Pete, as winner of our tee design competition, you get the following cool stuff:

– a free conference pass to SMX Sydney 2009 thanks to Barry Smyth of Search Strategies.

– enrollment in a Certification Pathway of your choice at Search Engine College

– a t-shirt sporting your design

– the kudos of your design printed on t-shirts and distributed to all attendees at SMX Sydney 2009

I’ll be in touch shortly with details on your prize pack. Thanks again to all who entered and voted.

Stephen Fry Joins New Zealand Internet Blackout

Actor, comedian and Twitter superstar Stephen Fry weighed in today on the controversial copyright debate currently raging in New Zealand.

According to the Creative Freedom Foundation, soon to be amended Sections 92A and C of the New Zealand Copyright Act of 1994 establish a guilt upon accusation principle that could see anyone accused of “copyright infringement”, resulting in his or her Internet connection being severed.

What’s more, according to GeekZone, under the new laws (drafted as the Copyright New Technologies Amendment Act 2008), anyone who provides any form of services over the Internet is an ISP:

“That means libraries, councils, schools, businesses, government offices, you name it. If you share your Internet connection with your flatmates, you’re probably an ISP too under the new act. Geekzone is an ISP. Think about what that means”

The proposed amendments come into force on 28 February 2009.

To make their disgust felt at the proposed amendments, GeekZone and Creative Freedom put their heads together and came up with the Internet Blackout Feb 16-23:

They’ve encouraged users of Twitter, Facebook, MySpace and anyone with a web site to show their support for the campaign by blacking out their avatars and images for a week to demonstrate the strength of public disapproval of the proposed laws.

The blackout began this morning and the impact was immediately felt across the social media community. Twitter account holders across the country turned their avatars black, prompting a lot of questions from their followers and more publicity for the campaign. I blacked my avatar out about mid-morning and was delighted to see so many others do the same, even non-Kiwis were joining in!

During the day, Twitter elite member Nat Torkington cheekily challenged Twitter superstar Stephen Fry to tweet about the issue. Unbelievably, Mr Fry not only responded, but joined the blackout bandwagon, removing his avatar and replacing it with the campaign’s recommended black square. He then changed his entire Twitter bio, dedicating it to an explanation of his avatar change and the reasons behind it. I’m guessing his very recent visit to New Zealand has had quite an impact on him!

Now, if you’re not a Twitter user, you may not understand the type of exposure this provided. Let me explain: not only does he have a huge profile in the entertainment industry, but Mr Fry has 193K followers on Twitter. That’s makes him #1 in the Twitter popularity stakes. Instant exposure to 193,000 sets of eyeballs cannot be underestimated.

As you can imagine, campaign participants were positively thrilled. Unfortunately, GeekZone servers were not. Apparently the sheer volume of traffic sent GeekZone’s way knocked over their servers for a short time. Mr Fry instantly apologised and suggested his tweeps Digg the related article instead.

With all that support and publicity, I’m sure this issue is far from put to bed. Will the archaic Copyright Law amendments go ahead at the end of the month? Stay tuned for updates.

EDITOR NOTE: If you want to help our cause, please share this link, blackout your avatars and if you tweet about the issue, please use the hashtags #blackout and #s92a  Follow me on Twitter so I can acknowledge your contributions.

Thank you in advance!

EDITOR NOTE 2: It worked! The widespread protest which took on a viral marketing quality via Twitter, Facebook and other sites was apparently enough to raise the profile of the issue and encourage New Zealand Prime Minister John Key to postpone the implementation of the controversial s92a amendment.

Thank you to everyone who blacked out their avatars, sent messages of support and tweeted about the issue. You guys give real meaning to Power of the People. Rock on!