After helping to fix the Yahoo search result pages with the correct language attributes to make them accessible for screen reader users I was wondering how this could be done with user generated content. The easiest option of course would be to ask the user to provide the right language in the profile, but if you are bilingual like me you actually write in different languages. The other option would be to offer me as the user to pick the language when I type it, which is annoying.

I then stumbled across Google’s Ajax Translation API and thought it should be very easy to marry it with for example the JSON output of the twitter API to add the correct lang attributes on the fly.

Alas, this was not as easy as I thought. On the surface it is very easy to use Google’s API to tell me what language a certain text is likely to be:

var text = “¿Dónde está el baño?”;

google.language.detect(text, function(result) {

if (!result.error) {

var language = ‘unknown’;

for (l in google.language.Languages) {

if (google.language.Languages[l]  result.language) {

language = l;

break;

}

	
}

var container = document.getElementById("detection");

container.innerHTML = text + " is: " + language + "";

}
	
});

However, if you want to use this in a loop you are out of luck. The google.language.detect method fires off an internal XHR call and the result set only gives you an error code, the confidence level, a isReliable boolean and the language code. This is a lot but there is no way to tell the function that gets the results which text was analyzed. It would be great if the API repeated the text or at least allowed you to set a unique ID for the current XHR request.

As Ajax requests return in random order, there is no way of telling which result works for which text, so I was stuck.

Enter Firebug. Analyzing the requests going through I realized there is a REST URL being called by the internal methods of google.language. In the case of translation this is:

http://www.google.com/uds/GlangDetect?callback={CALLBACK_METHOD}&context={NUMBER}&q={URL_ENCODED_TEXT}&key=notsupplied&v=1.0

You can use the number and an own callback method to create SCRIPT nodes in the document getting these results back. The return call is:

CALLBACK_METHOD(‘NUMBER’,{“language” : “es”,”isReliable” : true,”confidence” : 0.24716422},200,null,200)

However, as I am already using PHP to pull information from another service, I ended up using curl for the whole proof of concept to make twitter speak in natural language:

	

// curl the twitter feed

$url = ‘http://twitter.com/statuses/public_timeline.rss’;

$ch = curl_init();

curl_setopt($ch, CURLOPT_URL, $url);

curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);

$twitterdata = curl_exec($ch);

curl_close($ch);

// get all the descriptions

preg_match_all(“/([^<]+)/msi”,    $twitterdata,$descs);

// skip the main feed description

foreach($descs[1] as $key=>$d){

if($key=0){

continue;

}
	
// assemble REST call and curl the result

$url = ‘http://www.google.com/uds/GlangDetect?callback=’ .

‘feedresult&context=’ . $key . ‘&q=’ . urlencode($d) .

‘&key=notsupplied&v=1.0’;

$ch = curl_init();

curl_setopt($ch, CURLOPT_URL, $url);

curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);

$langcode = curl_exec($ch);

curl_close($ch);

// get the language

preg_match(“/”language”:”([^”]+)”/”,$langcode,$res);

// write out the list item

echo ‘
‘.$d.’
‘;

}

	
?>


	

Check out the result: Public twitter feed with natural language support

I will do some pure JavaScript solutions soon, too. This could be a great chance to make UGC a lot more accessible.

Thanks to Mark Thomas and Tim Huegdon for bouncing off ideas about how to work around the XHR issue.

I just finished my sesssion at BarCamp Brighton about making online video more accessible by allowing for sensible, time-based commenting which could become a poor man’s captioning in a second stage. In general it is just showing off my hack of the YouTube player using their API.

One thing that has been annoying me for ages is that no video player on the web allows you to write comments for a specific time in the video that get displayed as plain text. Viddler allows you to comment at a certain time and it appears in the video, but the benefits of time based captioning both in terms of accessibility and SEO didn’t quite transpire to any video site maintainers yet. Edit: Darn, I hadn’t looked at Viddler for a long time, it actually does this now, well done!

Google just released a JavaScript API for YouTube which makes it dead easy to control a video with JavaScript. You can start, stop and jump to a certain time of the video but more importantly – you have events firing when something happens to the player. This made it easy for me to whip up a proof of concept how time-based captioning might work as an interface. Click the screenshot to see it in action.

Start the video and hit the pause button to add a new caption. You can delete captions by hitting the x links and you can jump back to the section of the video by clicking the time stamp.

Check the source for how it is done. In order to make this a service, all you need to do is have a backend script that gets all the form fields and store it in a DB.

The lovely people at Paris Web just released all the videos of the 2007 conference on dailymotion. My talk is the only English one and deals with the topic of how following web standards helps your team to be more successful:

Slides:

The other videos are pretty interesting insofar as they cover accessibility and internationalization matters from a technical, social and legislative angle. My favourite was the IBM server that automatically transcribes videos by running voice recognition over the audio stream.

One of the biggest podcasts in the UK when it comes to web development and web design is Paul Boag’s Boagworld.com. Every week Paul talks about what’s hot and happening in the development world and mixes it with good humour and believable insights.

This week’s podcast is entitled “Hiring” but ends with an interview Paul did with me over Skype on Valentine’s. If you listen to it, you’ll hear that I did have a cold and it was a long day, and if you read the transcript, you’ll see that both Paul and me “um…” a lot.

Nevertheless Paul had some very good questions, and I hope I had interesting answers.

• Download the Podcast
• Check the podcast transcript on Boagworld