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