Monday, March 12th @ 10:00 am
Jeremy Keith Web Developer, Clearleft Ltd
Derek Featherstone
Accessibility in AJAX
2 Kinds
Directed at custom people or technologies
General universal accessibility (best)
-a site that can adapt to anyone and any device using that site
Progressive Enhancement (order to do things)
1. Content
2. Structure it – what does this mean? – NOT how does this look?
3. Presentation – how does this look
4. Behavior – how does this work?
You should be able to strip away any of these w/out any problems
What you can use for these:
2. HTML (content)
3. CSS (structure)
4. AJAX (behavior)
Many times the AJAX comes first – this is bad.
What is AJAX?
Asynchronism is cool – don’t need to refresh page to get info from the server – not just pretty expand out boxes
Web = Thin Client
Browser
Display
Server
store
process
Web = Rich Client
Browser
display
**AJAX** use ajax to process – bad because AJAX is required
Server
store
HIJAX
progressive enhancement
content
structure
behavior
Browser (links/forms) -> Server (returns/serves whole page back no mater what the link/form)
Browser (links/forms) -> AJAX -> Server (just sends back via AJAX what is needed) -> Browser just shows the changed elements
Deceptively rich content – AJAX is just the dumb waiter. It just delivers the stuff between the browser and the server. If the AJAX layer is stripped out it is OK because you’re going back to the old way of the server delivering an entire page.
Paradox
plan for AJAX from the start but implement AJAX at the end
Watch for: <a href=”javascript:…”> or <a href=”#” onclick =…>
Patterns good for AJAX
rating things
register (user name is taken)
comments (more blogs should use this)
shopping carts
Feng Shui
Find a way where things can peacefully coexist.
Feng Shui means Wind & Water – Wind and water can be peaceful or very destructive
Accessible Scripting:
’99 – site works w/ or w/out javascript
’04-’05 – accessibility scripting something different
’06 – HIJAX (http://chapters.ca)
is AJAX pop-up worse than a real browser window pop up – a screen reader doesn’t see the AJAX pop up. Maybe better to keep on page w/anchor hidden w/css at bottom
Create a linear pathway through pages if one exists.
Examples
Form advisories
tables prevent screen readers to get them – not part of form
just style <em> to pus it to the side as part of form
if there is an error style a <strong> to indicate
Screen readers will see this as part of <label>
A <label> can also be added to submit bottom saying there is a problem
Where Next?
href=”#nextstop”
TabIndex = “-1”
Always an option not to use AJAX – consider alternatives or possibly make a “no ajax” preference
“Accessibility is just as seXy!”
Questions
How do you deal with this when using a CMS or server language that doesn’t handle this?
Maybe find something that does or build your own if accessibility is important to you
Where are screen readers headed and why are they so slow to keep up?
They are getting better, but they are slow, they have to stay backwards compatible. Standards bodies are helping in this. Just a wait and see thing.