cazmockett.com

Day two of the event was a “hack day” style event, where lots of geeks gathered with the speakers to try and build something useful. There were lots of mini-projects on the go.

I did a bit of hacking with some bookmarklets and javascript to switch to user-defined style sheets, giving the option of looking at any website as reversed video with much larger text, for instance. Here are a couple of screenshots:

[Regular video Flickr,  but with large text]

[Reversed-video style sheet is easier for users with some visual impairments or other disabilities]

I hope to be able to use some of the techniques in future projects.

I was also rather amused  by the tshirt one of the other geeks was wearing:

[Clueless!]

I attended the excellent Scripting Enabled conference and developer day recently held in London. It was extremely enlightening about various aspects of the web and how users with varied access difficulties are affected by the decisions us developers make every day.

There were some excellent panels - links to the trascripts, slides and audio etc:

• Denise Stephens talking about her life with Multiple Sclerosis.
• Antonia Hyde from United Response talked about learning disabilities.
• Jonathan Hassell of t he BBC on Dyslexia
• Kath Moonan from Abilitynet talked about Why she hates the Interweb.
• Artur Ortega & Leonie Watson shared their expertise on screen readers and JavaScript
• Audio files for most of the session are available now too

[Kath  hates the interweb!]

[Leonie and Artur talk about Screenreaders and JavaScript]

[The panel takes questions at the end of the day]

WAI-ARIA - It’s Easy

Steve Faulkner

Web Accessibility Initative - Accessible Rich Internet Applications

It’s a W3C spec, close to becoming a recommendatio, aims to make sense out of NOISE, out of silence.

Wherever possible, use the native tags to convey role and state - where you can’t, use the new WAI-ARIA attributes to add extra meaning - this way, the keyboard operability is built in.

Role and state information can be applied to virtually any HTML element. For instance, the extra code for a button/graphic might be:

<a href=”" title=”OK” role=”button”><img src=”ok.gif” /></a>

The extra attribute, role=”button” is the thing which tells assistive technologies more information - the role of the element is a button, and the standard usage instructions fed to the user would be “to activate, press spacebar”.

Of course, the same thing could be achieved with an image button, but WAI-ARIA can still add extra useful information:

Button off-state:

<input type=”image” src=”okoff.gif” alt=”highlight off” role=”button” aria-pressed=”false” />

and for the on-state:

<input type=”image” src=”okon.gif” alt=”highlight off” role=”button” aria-pressed=”true” />

AJAX and WAI-ARIA

It can help in the following situations - when

1. Users not having access to content changes
2. Users not being aware of content changes

Eg Twitter’s letters left indicator - when you’re typing in the box, screen reader users don’t know the numbers are changing (they are in virtual cursor mode for text input).

Live Region attribute addresses this problem - pause during typing, and the letters left is announced by the screen readers. The relevent attribute is aria-live, properties are “off, polite, assertive or rude”. So they gain access to content changes.

Support
Major browser vendors, yahoo, google, Jaws, etc. You can start using them now, they won’t break agnostic browsers, it will be ignored.

FireVox is a plugin for FF - you can test it with that?

Attributes can be added by unobtrusive Javascript. But if you put them in now, they might not validate.

Firefox Accessibility Extension - useful for testing without a screenreader. Knows about WAI-ARIA attributes and will indicate state changes etc.

ARIA: Accessible Rich Internet Applications/Relationship to HTML FAQ

Steve’s presentation: slides | audio

There have been general BarCamps aplenty, but this one, arranged by Semantic evangelist Tom Morris, was geared specifically towards the Semantic (and semantic) Web.

It had a slightly different feel to it, in that we didn’t stay overnight. But it was good to see some different faces in the crowd than the usual BarCamp suspects - there seemed to be a good few academics in the mix this time.

Session 1 - Accessibility
Jonathan Chetwynd

Current UK research tells us that 20-25% of the population suffer from “functional illiteracy”! The tools available for making sites all require significant literacy skills. So it is difficult for low-literacy people to access/make sites themselves.

JobCentre Plus - low literacy is strongly correlated with unemployment. The site for searching for jobs isn’t friendly for low literacy users - they encounter lots of check boxes and job titles.

GUI with graphics can be a better way of presenting things to low-literacy users. Currently, SVG not very supported by browsers at present and there is no easy accessible SVG authoring tool.

Another friend of mine, Antonia Hyde, is heavily involved with producing websites for people with learning disabilities over at United Response, and so this would have been a great session for her to attend.

Session 2 - Bringing Semantic Web to Bloggers
Jure Čuhalev

Jure demonstrated a product from Zemanta, a startup from Slovenia.  It empowers bloggers to write better posts. Plugin to Blogger etc - which gives you extra media content relevent to stuff as you write. Point and click on relevent article from list - gets added to bottom of code. Quick links for Technorati etc.

Focus is not on readers with widgets but authors with tools - via Firefox extensions or IE plugins (if Blogger etc does not support plugins). Free. Basic functions are free, upgraded functions for a small fee.

3rd party developers - get full API docs, support, promotion, it’s all open sourced stuff. Should be available from mid-March 2008.

Session 3 - hAvatar
Cristiano Betta

hAvatar - what is it? Instead of using 3rd party to host avatar, use a photo from your own site’s hCard. Made by Alper.nl as a plugin for WordPress. Goes and fetches the photo from your own site’s hCard to show as humbnails on comments etc.

Problems - if there’s multiple hCards on the provided URL, which to use? Can hack to see if any of the hCards have the URL specified which you’ve just looked at. Web service available at

http://alper.nl/cgi-bin/OpenAvatar.py?openid=http://yoursite.com/pictureurl

More info in Cristiano’s blog post, or download the plugin here.

Session 4 - Microformats “State of the Nation”
Ben Ward and Frances Berrmian.

A quick session from Ben and Frances about the current state of play with Microformats:

• Google - maps has hCard in the info bubble and sidebar stuff.
• The common formats have been widely adopted. Newer ones are being tested in the wild.
• hRecipes - marking up food!
• hAudio - development for over a year. Means of marking up music references. Could be used by last.fm and Songbird.
• Google Social Graph API - indexes XFN and hCards - give them a URL and it brings back a list of your XFN contacts

Then we decided to head for a curry before I eventually ended up in an extremely orange room at the easyHotel Kensington for the night.

I seem to have got out of the blogging habit, so I’m hoping to catch up on a few posts now. I’ll tweak the dates so they’re relevent to the events roughly as they happened (chronology? what’s that?!)

The first event I’d like to make a post about was the excellent -

Web Standards Group Meeting on Javascript

Some of us shy away from JavaScript (until recently, myself included) on the grounds that it’s not accessible. But these days, if it’s done right, it can be positively beneficial to accessibility.

Demystifying Screen Readers - Steve Faulkner
Steve is very knowledgable on screen readers and all their foibles, and is Director of the Web Accessibility Tools Consortium. This talk mainly centred around Jaws (65%) and Window Eyes (35%). The bracketed figures are from a US National Federation of the Blind market share survey - it’s obvious these are the two big players.

The key issues revolve around:

• Dynamic updates - user initiated and independent
  Can the user access the updated content?
  Is the user aware that the content has been updated?
• Rich Internet Applications (RIA)
  Can the user understand the role of the control?
  Can the user successfully interact with the control?
  Is the user able to access information about the current state of the control?

He then explained the differences in screen reader modes:

• Browse Mode (virtual buffer) - the user can navigate page content via paragraphs, headings, links, lists etc. They can also activate links and some form controls. But text characters can’t be input into form fields, or interact with select elements in this mode.
• Forms Mode (browse mode off) - the user may only navigate through a document to focusable elements via the TAB key. Text access is limited to “read all” functionality. Most of advanced content navigation is unavailable.

The crucial question we have to consider is, when and how does content become available to the user after it’s been updated in the browser?

[Steve Faulkner and the Latency Issue]

Latency is a problem because the virtual buffer does not update and the user doesn’t know anything has changed. However, JAWS v7.1 started “listening” for virtual buffer updates in response to things like:

• window.setInverval()
• object.innerText (for IE)
• object.textContent and object.appendChild (in Firefox)
• changes in form control values
• And other stuff like ALT or TITLE attribute value changes.

Jez Lemon has an excellent article on Improving Ajax Applications For JAWS Users on his webiste. Steve summed up with some recommendations:

• Do not code to accommodate the poor support shown by JAWS and Window Eyes.
• Use unobtrusive methods where available and appropriate, to help screen readers along.
• Don’t use the excuse that JavaScript / Ajax is not accessible for screen readers to not bother to design for accessibility.
• Start developing interface elements that use WAI-ARIA specs, which will provide some benefits now and many more in the future.

Steve’s thought-provoking presentation was followed by a turn from Christian Heilmann entitled Seven Reasons For Code Bloat

[Christain's been on the beanz again]

His notes are available for download from his blog, so I won’t repeat them verbatim. Needless to say, it was a fun presentation and contained the obligatory photo of a kitten ;-). Meanwhile, he’s thinking of this as the title of his next book:

[Christian's Next Book?]

PubStandards XVIII
Of course, the next item on the social agenda was the PubStandards gathering. Lots of fun and revelry as usual, here’s one photo, but you can see more on Flickr.

[Patrick & Ashe go head-to-head, while Ross butts in the middle]