The following are my panel notes from SXSW. As I am not the fastest typer I have paraphrased what was said. Should you notice any mistakes please do point them out in the comments for corrections.
Jeremy Keith Web Developer, Clearleft Ltd
Derek Featherstone Prawn Song Records Further ahead
Ajax Kung Fu - Jeremy Keith
Accessibility :
making site accessible for screenreaders
universality making sites accessible to all.
This doesn't mean everyone gets the same experience.
Progressive enhancement
Begin with content
you then structure it, heading paragraphs etc. No presentation at this point - HTML
Then apply presentation - CSS
Behaviour - AJAX
Your should still be able to get to your content if you remove any of the layers
Problem is a lot of Ajax apps have Ajax above all of the other layers. So to get to any of the other layers you need ajax.
What is Ajax.
Being able to update pages with content from the server without having to refresh the page.
Thin Client
The web is an example of a typical thin client.
Browser is the client. It's there to display the content.
Server does the processing.
Rich Client
Ajax sits between the browser and the server. That not technically true but that the way I like to conceptualise it.
The difference is that the Browser is needed to do the heavy lifting.
Hijax
Having a snappy buzzword is key to getting you everywhere in life!
Progressive enhancement
content, structure, presentation behaviour and then Ajax
Browsers send data to a server through clicking a link or filling in a form. It's been this way for years. The server receives the request and sends back a whole page.
When you introduce Ajax into the mix you still have the same links and forms. What you do is hijack the requests and then use XHR to send them to the server. Instead of creating a whole page we can send just one little piece of information. This gets sent back to the browser. I call this the deceptively rich client. To the user it looks like everything is happening within the browser. In this sense I see XHR as a dumb waiter. Bit like unix pipes. Doing one thing really well.
In this way if you don't have ajax/javascript you will still have the unsexy links and forms.
Paradox
You have to build a normal trad site from the beginning.
The rules to resolve this paradox means you have to plan for ajax from the start and implement it at the end.
Dodging Bullets
Don't use the javascript pseudo protocol - you're thinking about behaviour too soon.
Don't use onclick etc
Patterns
You click a link and the page comes back and only part of it has changed.
You submit a form and the page comes back and only part of it has changed.
Doing this without Ajax wastes resources when only small parts of a page have changed.
Star ratings
Registrations - why send back an entire page just to say that the username is taken
Comments
Shopping carts. - Add to cart
Bulletproof Ajax
Bulletproof - Dan Cederholm coined this term
Now you know Kung Fu
Accessibility Feng Shui - Derek Featherstone
Feng shui is about balance and harmony.
Feng Shui translates to wind and water. This a peace and harmony metaphor. Wind and water can have a lot of destructive power. This is true of a lot of Ajax apps out there.
Ajax Scripting and accessibility
In 1999 accessibile scripting meant that your site should work with and without scripting.
This comes into WCAG 1.0 checkpoint 6.3 - Pages should work with scripting on or off.
2004-5
Accessible scripting meant totally different things
We had a one dropdown built in Dreamweaver and Brother cake's ultimate dropdown for comparison.
We tried this in a screenreader In the first example the onclick was announced. In the second one there was no announcement. The screenreaders were looking for an inline on-click.
This was bad because we are trying to do things the right way.
Screenreaders will tell you that a page has changed at a particular line.
Then Jeremy started talking about Hijax. This is a real thing not just a concept.
A tagging field has a "what is this" link. when JS is on, a layer is displayed with help info. If js is off the link takes you to a page with the same content.
Why use Ajax in the first place.
But because this isn't a window would creating a new window actually be more accessible? So how would you get around this. I wouldn't use Ajax for this. I would have this content in the page and use CSS to hide it. The href could be an anchor that takes them to this content.
Q (Andy Budd) Doesn't this take them from what they were doing. They were on the form and clicking the link takes them to the bottom of the page.
My solution to that would be to have a link that take them back to the form.
Core Behaviours
There are core behaviours in HTML that we can make use of.
Example of a form.
<pre><code><div>
<label for="uname">
username
<em>must not contain spaces</em>
</label>
<input id="uname" &hellip; />
</div>
Using emphasis emphasises the warning. If you want to show an error messages you can use strong.
The really cool thing with doing this screenreaders with get this update because it's within the label. There are some caveats. in order to get the updated label you have to leave that field and go back to it. We can update the status bar. We can change the title and we can change legends. You can even add a label around the submit to say that something has gone wrong.
Demonstration of a test that shouldn't work that does. This illustrates that we need more test cases.
Where Next?
We can use href="#nextstop" and tabIndex="-1"
We can use the disabled and readonly attributes to your advantage. Disabled form fields are not focusable. Same with readonly. Totally scriptable. Semantic interaction functional state.
WAI-ARIA Accessible rich internet apps.
Mozilla and IBM are looking at allowing apps to talk to accessibilty apis but this is really hardcore geeky stuff.
Choose not to use Ajax? Maybe an non-ajax alternative is perfectly accessible.
<strong>A</strong>ccessibility is <strong>J</strong>ust <strong>A</strong> se<strong>X</strong>y (AJAX) (laughter)
Questions:
Q: How does drupal's modular nature work with progressive enhancement?
A: JK: The CMS you use is going to be a big part of that. If your CMS doesn't allow you to do this then you should get a new one. DF: It's something to consider at the beginning to se if you can get themes that support web standards etc.
Q (Glenda Sims): If I want to meld minds with you for hours how can we do this.
A: Go to the nobility booth. I'm doing a full day's workshop in Austin soon.