Entries Tagged 'wd06' ↓

More bookshelf fodder coming our way…

When I was at Web Directions South last year, I had the privilege to introduce Jeremy Keith’s session on Hijax. The presentation was one of the highlights of the conference for me, in spite of - or in case because of - the love/hate struggle I’ve had with JavaScript over the years.

The Hijax approach builds on the idea of progressive enhancement. It involves creating accessible web application functionality without JavaScript, and then adding a JavaScript layer that “hijacks” particular clicks and replaces the standards HTTP requests with XMLHttpRequest calls and generally Ajaxy stuff. That way, if JavaScript is not available to the user agent, the application works as intended anyway. But more capable user agents get an enhanced user experience. And everyone is happy.
After Jeremy’s presentation I innocently asked the question “Where can I find more resources? Are you writing a book on this?”. After protesting that the question wasn’t staged, Jeremy revealed that he was - and that book, Bulletproof Ajax, is now finished.

It’s not actually out yet, but you can pre-order, and if you’re keen like me, check out the companion web site with downloadable code samples. The name “Bulletproof” puts the title in the same New Riders series as Dan Cedarholm’s Bulletproof Web Design, another title I own and love.

So congratulations on getting it finished, Jeremy - can’t wait to get my hands on a copy.

Day Two started early again, with breakfast with Molly Holzschlag speaking on the topic of “The new professionalism”.

Professionalism (and often, lack there of) is a topic Molly has explored previously on her blog, and in fact a post I wrote in response to one of her posts way back in November 05 is one of the most popular on my own site, indicating that a lot of people are interested in it. My involvement with Port80 and the new WIPA organisation that is being set up in Australia, as well as the Web Standards Group, mean that it’s something I’m especially interested in.

Coffee and bagels in place, Molly introduced the topic and let us know that she wanted the session to be a dialogue with the audience rather than a lecture. She talked about how the field of web development came about, and how that has resulted in some of the problems we face today - there’s no universal or even widespread nomenclature to describe what we do; there’s no emphasis on education, standards or best practices; there’s a large gap between what the educators teach and what the real world requires; there are many unethical practices upheld in the industry.

Next Molly asked for some input from the audience, and various people talked about the newly formed WIPA organisation, Port80, the WSG, and a Web Developer’s organisation of the wrong kind that was started in New Zealand. It’s encouraging to see that people are working towards solutions to the problems - but we still have a long way to go yet.

Finally, Molly asked for some input from the audience for personal philosophies for working on the web. My own is “make the web a better place” - I can examine anything I’m doing at any time and ask “does this make the web a better place”? Derek Featherstone offered a great one - “first, do no harm”. Others included “don’t abuse the trust of the online communities” and “don’t lock your client into coming back (with technology) - make them want to come back”. All great sentiments for working as a professional.

Port80 people doing what they do best: networking and community building. You thought I was going to say drinking, right?

We had about 22 people turn up at the Pumphouse in Darling Harbour on Wednesday 27th September. About 10 of those were Perth people in town for Web Directions 06. By a strange co-incidence, we ended up sitting out the front, on the right hand side of the venue (when facing the venue) - the same location that we stake out for Perth Port80 meetings.

Thanks to everyone who came along - I met some great new people and some very interesting conversations were held, including a long one on urinals (I can’t explain it either). I was also fortunate to meet Adam Schilling, who is not only helping organise a Web Standards Group in Adelaide, but a Port80 get-together as well.

Hopefully someone will take up the challenge and get Port80 Sydney up and running permanently. There’s a whole swag of benefits for everyone involved, not least of all that it’s great fun.

My Web Directions 2006 experience started on Thursday with a workshop: Accessibility 2.0 with the inimitable Derek Featherstone.

Derek used to be a high school teacher and I think he must have been a good one - he holds the attention of the audience very well and makes accessibility interesting, even to the fully-sighted, mouse-wielding power users that most web developers are.

Why Accessibility 2.0?

The web 2.0 phenomenon has led to a massive increase in smart and sexy web applications that use Ajax to provide a slick, responsive interface - the functional web rather than the traditional, document-based web. But as with all things, just because you can doesn’t necessarily mean you should, and in some cases accessibility is falling by the wayside. Fortunately, there are ways to make web applications available to users of assistive technology such a screen readers, voice recognition software and alternate input mechanisms. For the workshop, Derek focused on a number of common problems in web applications using real-world examples, and then showed some techniques to provide the same functionality in an accessible way.

The Accessibility/Usability Cross-over

The first topic covered in the workshop was the cross-over that exists between accessibility and usability. Many accessibility issues could also be called usability problems, and vice versa. Often, fixing an obvious accessibility problem also improves the usability of an application for all users.

An interesting and unexpected point Derek raised was that in certain cases, creating an alternate version of a particular feature of an application specifically for users of assistive technology is the only way to provide a great experience for all users.

A web standards approach facilitates accessible applications

While it’s not a magic bullet, using valid code and separation of markup, presentation and behaviour (the dubious-sounding “three-legged stool” of web standards) goes a long way towards facilitating accessible applications, and the same thing can be said for usability. At the very least, web standards provide a solid foundation with which work from. Of course, being a web standards-focused audience, this didn’t surprise anyone, but it’s a nice affirmation.

Myths about screenreaders

Many web developers believe that providing a version of an application that works without JavaScript equates to providing an accessible version. This is simply not true - screenreaders work with modern browsers - Internet Explorer and Firefox, primarily - and they are able to access content provided by JavaScript. Derek demonstrated a common Ajax technique for providing form validation, and the screenreader read out the validation messages.

Simple problems with simple solutions

Most of the examples presented in the workshop were simple problems with simple solutions, but pointed to what would become the mantra of the session: proper user testing with assistive technologies is critical to making an application accessible. Real people do things that no web developer will ever anticipate.

The Hijax technique was briefly discussed - and I learnt more about this on Friday at Jeremy Keith’s session. Essentially, it means first making a regular application which functions without JavaScript, then using progressive ehancement techniques to add a behaviour layer to “hijack” standard links, form submissions etc at particular points and substitute Ajax functionality. If an application used this approach from the beginning, the task of ensuring it was accessible would be a lot simpler.

Some of the examples covered:

• Forms for tables
  • Problem: screenreader has problems associating labels with inputs
  • Solution: add semantic labels, drop the tables, user correct source order then absolute positioning to adjust the visual layout

• Changing elements using JavaScript
  • Problem: a form input area had default text which was cleared when the input received focus, but when focus was removed and then returned to the element, the user-entered text was also cleared
  • Solution: only clear input if default text is detected

• Voice recognition and alt attributes
  • Problem: voice recognition software couldn’t activate a menu image link where the alt text was different from the visual representation of the word
  • Solution: Make the alt text match the image

• Non-semantic elements
  • Problem: keyboard navigation between links not working in Google maps
  • Solution: using a proper anchor element rather than a styled span with an onClick handler

• Using colour to indicate change
  • Problem: Basecamp-style colour flashes inaccessible to visually impaired and users simply not paying attention at the exact moment they occur
  • Solution: rather than relying on the colour change, also change some text or use some other permanent visual marker.

More complex Ajax problems

Not all accessibility problems posed by web applications are so easily fixed. A major issue is how to make sure that when the contents of the page is changed using JavaScript (the basis of most Ajax apps), screenreaders and other assistive technologies are aware of the change.

Derek ran through a few examples using Basecamp lists and a form validation sample, but the results were not consistent - essentially, the only way to know for sure if an application is truly accessible is to test it with assistive browsers. If a particular technique doesn’t work, try another - there’s plenty to choose from!

Finally, Derek ran through an inaccessible, complex multi-step form and discussed areas that he was changing to make it accessible.

Now go away and do this…

I wrote four notes at the end of the session:

• Planning
  • Plan for accessibility at the beginning of the process, rather than at the end

• Do the simple stuff right
  • Layout forms correctly, validate html and markup

• Semantic interaction
  • Use the right elements for the job - e.g. links should be anchors

• Provide “options”
  • Accessibility has the potential to help all users
• And always test test test

Derek’s workshop was informative and entertaining - it’s always a real privilege to listen to him speak. I learnt lots and have heaps of tips I can start using in my work right away.

7 sleeps to go until Web Directions (for me, anyway).

John Allsopp just announced Web Connections, a networking app for Web Directions attendees that’s got every possible web2.0 bell and whistle: microformats, tags, XFN, maps and flickr mashups, curves, gradients - you name it, it’s there!

Made by those clever little people Tim Lucas and Cameron Adams, it is seriously cool. If you’re going to Web Directions sign up and check it out.