10th December is Human Rights Day and 2008 marks the 60th anniversary of the Universal Declaration of Human Rights (UDHR). Amnesty International members from London gathered at City Hall on Saturday to commemorate the anniversary with banners representing the 30 articles of the UDHR. Each London local group made a banner displaying a single article and one case that exemplified an abuse of that article. Rosie Montford made a banner for Blackheath Amnesty for article 9: “No arbitrary detention or exile” and the case of Aster Fissehatsion, imprisoned in Eritrea since 2001.

Despite the cold weather, about 200 people showed up, from 18 of the local groups and 5 of the London student groups. The evening ended with everyone holding up glow sticks to form a giant Amnesty candle beside Tower Bridge. My photos are up on flickr and there’s more on protectthehuman.com.

Blackheath & Greenwich Amnesty held our November book sale last Sunday. We made £4,200, which means the total for both of our 2008 book sales is a phenomenal £16,000.

Many thanks to everyone who volunteered their time to help out, and to the Church of the Ascension for hosting the sale.

HMS Illustrious, originally uploaded by eat your greens.

There’s a 20,000 tonne aircraft carrier parked up by Deptford Creek. Worth taking a look at if you’re down near the Cutty Sark. She’s in London for Remembrance Day and will sail out again next Wednesday, 12th November. The BBC have video of her coming through the Woolwich flood barrier.

Update: Simon Starr took a lovely photo of fireworks over the carrier last night.

The National Maritime Museum launched a podcast this summer. It’s called On the line and publishes monthly talks relating to the museum, the Royal Observatory and the Queen’s House. Transcripts for each talk are provided by Casting Words - see Bruce Lawson’s blog for discussion of how great they are. I did the front-end development for the site, building it as a blog using Movable Type Open Source with the podcasting plugin. I also used WAI-ARIA in my markup for the first time. If you aren’t familiar with ARIA, I’d recommend taking a moment to follow the previous link and read Gez Lemon’s excellent introduction to the subject. ARIA is currently in ‘Working Draft’ status, but Bruce Lawson points out that it’s already supported in browsers and the W3C are encouraging authors to use it.

Why use ARIA

ARIA addresses a problem I posted about a while ago - HTML isn’t expressive enough to describe the interfaces we use on web pages. For example, the On the line pages make use of tabbed interfaces where the current tab is selected by clicking on a link in a list of links. The links are styled, visually, to look like tabs but how does a browser, or assistive technology, recognise that these links are being used as tab controls? With ARIA, we add attributes to the HTML tags which describe their role and state.

Tabber.js

The tabbed interfaces are generated using Patrick Fitzgerald’s excellent tabber.js script. His site gives full instructions for using the script, so I’ll just give a quick overview here. We start with well-structured HTML, broken into headed sections. The overall tabbed area is given a class of tabber and each panel has a class of tabbertab. tabber.js will then convert this section of code into a tabbed interface, and generate a list of links based on the individual section headings. These links serve as the tab controls. Here’s example HTML markup.

	<div class="tabber">

	  <div class="tabbertab">
	    <h3>Section One</h3>
	    Section one content.
	  </div>

	  <div class="tabbertab" >
		<h3>Section Two</h3>
	    Section two content.
	  </div>

	</div>

Adding ARIA

Updating tabber.js to add ARIA support is straightforward. What we are going to do is add some new attributes to our HTML elements, to describe the role and state of those elements. We are also going to make sure that the values of the state attributes change when the state of the tabbed panels changes. You can download my modified version of the script here - tabber-aria.js. Instructions for using it are exactly the same as the original tabber.js. In this post, though, I’ll go through the changes that I’ve made to the code in order to add ARIA support.

Firstly, we have to override one of the default settings in tabber.js. We’ll want to add ids to our tabs, so that we can relate a panel to its controlling link. The addLinkId setting controls whether the tab links have ids, so we set this to true.

	/* If you want to add an id to each link set this to true */
	  this.addLinkId = true;

Next we’ll add roles to the tab control and the tab panels. We do this by editting the section of code which creates the list and adding a role attribute using the DOM’s setAttribute method. The list of controls has a role of tablist and each tab panel has a role of tabpanel

	/* Create a new UL list to hold the tab headings */
  DOM_ul = document.createElement("ul");
  DOM_ul.className = this.classNav;
  DOM_ul.setAttribute('role', 'tablist');

  /* Loop through each tab we found */
  for (i=0; i < this.tabs.length; i++) {
    t = this.tabs[i];
	t.div.setAttribute('role', 'tabpanel');

Next we modify the section of code that generates the links which act as the tabs themselves. We give each of these a role of tab and also add an aria-selected attribute to describe the current state of the tab. Initially, these will all be false. Later, we’ll update so that the active tab has aria-selected="true".

	/* Create a link to activate the tab */
    DOM_a = document.createElement("a");
    DOM_a.appendChild(document.createTextNode(t.headingText));
    DOM_a.href = "javascript:void(null);";
    DOM_a.title = t.headingText;
    DOM_a.onclick = this.navClick;
	DOM_a.setAttribute('role', 'tab');
	DOM_a.setAttribute('aria-selected', 'false');

Next, we’ll link up the controls to their respective tab panels by using ids. First we need to make sure that the tab container, div.tabber, has an id. Check if one exists. If not, generate ids until we find one that isn’t in use, then apply the generated id to the tabber and update the DOM. I chose to use ids of the form tab0, tab1, tab2, etc.

	if (!this.id) {
		  var idRoot = 'tab';
		  var j = 0;
		  while (document.getElementById(idRoot+j)) {
					j++;
				}
		  this.id = idRoot+j;
		  e.id = this.id;
	  }

This id is then used as the root of a distinct id for each individual tab link. Once those ids have been set, each tab panel (t.div in the code) can be linked to its respective control using the aria-labelledby attribute:

	DOM_a.id = aId;
	t.div.setAttribute('aria-labelledby', aId);

Now, we’ll want to update the ARIA state attributes whenever the state of the tabs changes. There are four methods which handle state changes; tabShow and tabHide handle showing and hiding the tab panels by changing the class names on each panel. I’ve modified them so that, additionally, tabShow sets aria-hidden="false" on the selected panel and tabHide sets aria-hidden="true" on each panel. Finally, the methods navSetActive and navClearActive set the currently active tab in the list of tabs. I’ve updated these to also set aria-selected="true" on the active link in navSetActive and aria-selected="false" on each of the other links in navClearActive. Here’s the modified navSetActive method as an example.

	/* Set classNavActive for the navigation list item */
	  this.tabs[tabberIndex].li.className += ' ' + this.classNavActive;
	  var a = this.tabs[tabberIndex].li.firstChild;
	  a.setAttribute('aria-selected', 'true');
	  return this;

You can download the full modified code, tabber-aria.js, and use it yourself in exactly the same way as the original tabber.js. Hopefully, the code I’ve added here shows how easy it is to use the ARIA attributes. You can see the final script in action at On the line and also on the Maritime Museum home page.

The Writers in Prison Committee (WiPC) of International PEN is shocked to learn of the ten year prison sentence served against the independent journalist and human rights defender Salidzhon Abdurakhmanov, on 10 October 2008. Aburakhmanov was arrested in early June 2008 on charges of possessing illegal drugs, charges widely considered to have been fabricated in retaliation for his human rights reporting. The WiPC considers his conviction to be a serious breach of Article 19 of the International Covenant on Civil and Political Rights, to which Uzbekistan is a signatory, and calls for his immediate and unconditional release.

Source: International PEN

Amnesty International has background information about Salidzhon Abdurakhmanov’s case. Blackheath & Greenwich Amnesty will have our monthly letter-writing evening at Greenwich Picturehouse next Tuesday. We’ll have letters, which you can sign, calling for Mr Abdurakhmanov’s release.

Update: I’ve drafted a letter calling for Salidzhon Abdurakhmanov’s release. There’s a copy to the Deputy Prosecutor General and another to the Minister of Internal Affairs. Feel free to download these and mail them on your own behalf. Alternatively, you can e-mail the Deputy Prosecutor General at prokuratura@lawyer.com and the Ministry of Internal Affairs at mvd@mvd.uz.

Australian video artist Craig Walsh has an installation, Classification Pending, running alongside London Bridge until Sunday, 19th October. It is brilliant – go and check it out if you have a chance. It starts running around about sunset at the north-west end of the bridge, and twilight is probably the best time to see it. Two dinosaurs swim around in the water, occasionally popping their heads up to look around. The BBC has a video of the installation.

7th annual Blackheath & Greenwich Amnesty clearance book sale
Saturday 15th November 2008
10am 2008-11-15T10:00:00+1:00 until 4pm 2008-11-15T16:00:00+1:00
Church of the Ascension
Dartmouth Row
Blackheath SE10 8BF

20,000 new and used books at bargain prices. In June we raised a record-breaking £11,500 for Amnesty International UK but we still have thousands of books left to sell. We hope to raise a further £3,000 by selling the unsold books in November.

If you would like to help with preparing for the sale, or are interested in collecting unsold books at the end of the day, please leave a comment using the form below.

You can also find us on Upcoming and facebook. Flyers can be downloaded from flickr.

We had a stall in Greenwich Market today, opposing the proposed increase in detention to 42 days without charge for terrorism offences. Please sign the online petition if you agree that this is an unreasonable extension of the police’s powers.

Having some problems with Movable Type on a shared host, so I’m giving Wordpress a go instead. It’s all very strange and new.