Today I went again to help out AbilityNet with one of their workshops talking to a small group of developers and project managers about the problems with Ajax and Accessibility and general Web2.0 concerns. Instead of giving a lot of technical details I tried to point the audience to good resources and get them to find out more for themselves. I hope I succeeded.

[slideshare id=514640&doc=ajaxandaccessibilityredux-1216171321459432-9&w=425]

For the first time I also successfully recorded the talk in mp3 format using the mac powerbook. GarageBand is great for recording, but the editing features suck, good old Audacity came to the rescue. Bear in mind I had 4 hours sleep and a day of presentations behind me when I did this one, and it is more fun to see me explain some of the pauses with gestures :)

• Download the audio of the talk Again with the Ajax Accessibility – MP3 34.5MB
• Download the PDF of the talk Again with the Ajax Accessibility – PDF 4MB

It is quite interesting to see that several products right now try to crowdsource accessibility. IBM released their social accessibility project and another project caused quite a stir in the accessibility world: WebVisum.com.

The latter is a Firefox3 extension that ties in with Screen Readers to allow users to enhance pages they have problems with by adding the correct meta data while surfing the page. The more controversial feature of WebVisum though is that they also provide a CAPTCHA recognition service in the tool.

I’ve caught up with Marc Dohnal from WebVisum and asked him a few questions about the product:

• Interview with WebVisum.com

Nate Skulic just emailed me about CSSPP, a CSS preprocessor inspired by my CSS wishlist and CSS constants article.

Nate’s done a great job writing a CSS preprocessor that could be handled by mod_rewrite and allows for:

• constants in CSS (define a colour or setting and call it by name)
• variables in CSS (define a setting and override it with URL parameters – I got to check if this is safely filtering out XSS nasties)
• inheritance (nesting selectors)

I especially like that he allows for classes to be added to the parent selector or applied as a child by using a single or double full stop:

body {
..blue {
background:blue;
}
..red {
background:red;
}
.box {
background:green;
}
h1 {
font-size:1.6em;
}
h2 {
font-size:1.4em;
}
}

Produces the following:

body.blue {
background:blue;
}
body.red {
background:red;
}
body .box {
background:green;
}
body h1 {
font-size:1.6em;
}
body h2 {
font-size:1.4em;
}

Top to off the usefulness the systems also comes with a smart caching system. Nice job!

It is scary how some obviously bad practices refuse to go away and developers jump through hoops to defend them and make them work rather than using simpler alternatives.

My pet peeve is the “chess rules” select box (you touched it, it needs to move):

Yahoo
B3TA
Google

Yahoo
B3TA
Google

This is the most evil permutation of this interface idea. A lesser evil version is part of a large form that will change the rest of the form or – if we venture back into more evil lairs – submits it to reflect these changes.

The arguments for this interface are not many:

• It saves the user one step of pressing a submit button
• The action is immediate

(Ok, these are actually the same argument, comment if you know some.)

The drawbacks of the solution are immense:

• People that use a keyboard will submit the form or leave the page without having selected the right option.
• People that are dependent on using a keyboard for web access will possibly know that you can press the Alt+Arrow Down keys simultaneously to expand the whole dropdown before selecting with arrow up and down and enter.
• Most people won’t know this though and a lot of people use keyboards and tabbing from field to field to fill out forms.
• Forms are a terrible annoyance of our times – nobody likes filling them in. Most of the time we won’t keep our eyes on the screen but actually look up information on papers, our credit card or read up the fine print that – of course – is not on the screen but only in the letter we got sent.
• I have no clue how something like that works with switch access or voice recognition – probably not
• It is scripting dependent – no JavaScript, no service

The latter is actually a reason for some companies for using this from time to time. Too many links on the same page are bad for SEO - Google considers your page not content but a sitemap and ranks it lower. That’s why some companies start offering the first two levels of navigation as links and the rest as a dropdown in this manner.

However, that still doesn’t make them a good solution, it just means that you offer far too many options to your users to begin with.

Here’s what people do to make this work: Aaron Cannon on the WebAim mailing list

A coworker and I recently devised a way to make a slightly more accessible version of the onchange dropdown navigation box. Basically, using javascript, we determine whether they are using their mouse or the keyboard to select each item in the list. If they used the mouse, it works as usual, immediately taking them to the selected page. If however the selection was made by the keyboard, we display a spinner and delay x number of seconds. If the user doesn’t make another selection within that time, they are taken to the page they selected. If they do, the clock is restarted.

I am not attacking Aaron here, he probably was asked to find a solution no matter what and did his best to find a technical way. The big scare in this for me is “determine whether they are using a mouse or keyboard”. My guess is they check for the event type, but assistive technology like voice recognition must simulate clicks without being a mouse. The other danger signal is the timer and the spinner – this complicates the interface even further (“Is this loading?”).

I simply don’t understand why we constantly try to make things work because this is what the design spec says or this is what we saw somewhere else. How about really testing it with users and see what happens then?

The last few months Chris Mills from Opera was busy gathering a lot of great web development experts around him (with a lot of pimping by yours truly) to assemble probably the most thorough and up-to-date web standards curriculum on the web: The Opera Web Standard Curriculum

Several dozen articles, all licensed with Creative Commons will be available to cover the tasks of web development: from understanding the principles of the web up to Ajax interaction. During the whole course the main focus is on usability, accessibility and writing maintainable code. We deliberately left out browser hacks and backward facing solutions and build on the ideas of progressive enhancement and unobtrusive JavaScript.

I wished this would’ve been out when I started, it’d have saved me a lot of time learning bad practices and un-learning them (which is always a painful process).

So, read it, use it and teach younglings the way of the standards Jedi: The Opera Web Standard Curriculum