Today’s AJAX and DHTML Best Practices
AJAX has taken off like greased lightning since Jesse James Garrett banged several things together and coined the term. Before that, we were pretty happy with the interactive capabilities of plain ole DHTML. As AJAX has risen, we have also read frequently that it’s not very accessible. We have a few choices: Shrug, don’t worry about it, and let people with disabilities cope with the current state of affairs. Accept the pronouncements that it’s not accessible and go back to our pre-AJAX methods (and let the world pass us by). Or, learn why some AJAX techniques are not accessible how we might make progress. If you’re interested in the third choice, keep reading.
Here we are at the start of a series of AJAX / DHTML best practices. This article builds a sturdy three legged stool which we can stand upon to see farther. Before getting started, I want to set the stage by defining a benchmark. Accessibility’s worst case scenarios are for blind people. The blind are the hardest to accommodate. Some might think that too much attention is paid the blind when there are so many other disabilities, let alone so many more people when the wide range is counted, but the facts are that the others are easier to accommodate. Ensuring good access for the blind is the hardest challenge and therefore the benchmark.
Leg one: Perhaps the single most enlightening current article that helps us understand the difficulties with AJAX is Gez Lemon’s “Making Ajax Work with Screen Readers.” That article is a must read for anyone who is really interested in why all the current fuss about AJAX accessibility. Bottom line, screen readers are not yet capable of reliably recognizing when dynamically updated content has changed. Very often, they will speak the old content instead of the new. Gez helps us understand why, how and when screen readers update their internal buffers, and why our AJAX induced changes might not make it to the listener. Digging into how screen readers work might not be something you ever wanted to do, but the read is well worth it if you want a good foundation for moving forward.
Leg two: Next on our reading list is James Edwards article “AJAX and Screenreaders: When Can it Work?” James, aka Brothercake, has invested a tremendous amount of hard work understanding how JavaScript and screen readers interact. His tests and results are posted right here on this blog. James investigates at a level of detail that would try the patience of most. His SitePoint article explores an how various approaches work and fail (too often) with a dizzying selection of screen readers. Combine Gez’s descriptions of how screen reading modes operate with his findings and with James’ findings, and you will have a deeper appreciation for the challenges of making AJAX and DHTML techniques accessible. By the way, James’ advice to avoid AJAX might be applicable for certain applications. Yet, knowing James, he probably won’t turn away from trying to improve the situation.
Leg three: One of my IBM colleagues, Becky Gibson, is hard at work on a longer term solution (more about that shortly). In the meantime she has published a compilation of general principles we can use now: “AJAX Accessibility Overview.” Becky offers a number of very reasonable ideas which improve the likelihood that the material will be discovered and handled by screen readers. Such as: Place dynamically updated material after the trigger event, later in the reading order. Write new material into an existing div instead of creating a new one. Tell the visitor what to expect, avoid surprises. … and more. The third leg of our sturdy stool and another must read article.
What about that longer term solution? Gez mentioned it in his article. Becky and a good number of other folks are working on it. One one hand, screen readers will slowly catch up with what we implement. On the other hand, work began some time ago under the auspices of the W3C to extend the rather feeble capabilities of existing HTML and XHTML. At the conceptual level, the plan is to use XML and DHTML to expose “roles” and “states” of the elements we use on web pages. Imagine a checkbox being able to report what it is and what state it has to a screen reader, and you’ve got the idea. We will begin to explore more of those ideas in the next article. Until then, there are two more references that you might want to read.
October 11th, 2006 at 9:31 am
What we need then, is some lovely big company to take on board the ideas we have and try to build a degradable system.
I can’t see inaccessible AJAX going away, so could an Accessible DHTML system be built on top of a traditional accessible application, perhaps degrading to inaccessible AJAX functionality if Accessible DHTML is not available (all but Firefox?)…
Even then, if AJAX sits on top of a traditional accessible application, then providing an option for users to switch off AJAX functionality should maintain accessibility.
October 11th, 2006 at 9:44 pm
Too scary… we obviously were reading minds, as we both posted on the same day on the same subject. I’ve “upped” you by 8 articles [grin] in: “10 “Must Read” articles on AJAX, Accessibility and Web 2 technology (Plus 3 more for some light at the end of the tunnel relief…)”: http://soap.stanford.edu/show.php?contentid=65
While I agree that access for the visually impaired user is effectively a good benchmark, readers should also consider that the absolute reliance on JavaScript creates an issue that can impact on all users, as the second cautionary article in my piece aptly illustrates.
I look forward to reading your suggestions and Best Practices in your up-coming series.
JF
October 12th, 2006 at 11:01 am
[…] Access Matters has wrapped up an article on Today’s AJAX and DHTML Best Practices: This article builds a sturdy three legged stool which we can stand upon to see farther. Before getting started, I want to set the stage by defining a benchmark. Accessibility’s worst case scenarios are for blind people. The blind are the hardest to accommodate. Some might think that too much attention is paid the blind when there are so many other disabilities, let alone so many more people when the wide range is counted, but the facts are that the others are easier to accommodate. Ensuring good access for the blind is the hardest challenge and therefore the benchmark. […]
October 13th, 2006 at 5:23 am
[…] Access Matters » Blog Archive » Today’s AJAX and DHTML Best Practices (tags: accessibility AJAX javascript webdesign) […]
October 13th, 2006 at 1:10 pm
I’d love to see this article on eioba.com
October 13th, 2006 at 6:06 pm
[…] http://www.access-matters.com/2006/10/09/todays-ajax-and-dhtml-best-practices/ […]
October 13th, 2006 at 11:12 pm
[…] Access Matters has wrapped up an article on Today’s AJAX and DHTML Best Practices: This article builds a sturdy three legged stool which we can stand upon to see farther. Before getting started, I want to set the stage by defining a benchmark. Accessibility’s worst case scenarios are for blind people. The blind are the hardest to accommodate. Some might think that too much attention is paid the blind when there are so many other disabilities, let alone so many more people when the wide range is counted, but the facts are that the others are easier to accommodate. Ensuring good access for the blind is the hardest challenge and therefore the benchmark. […]
October 17th, 2006 at 5:47 pm
This looks to be another interesting series of articles, although I am a bit wary of AJAX simply because people have shown such bad form with JavaScript all on its lonesome to date. A real estate portal recently posted about the wonders of AJAX in its upcoming new design with drag and drop this and that - which really, to my uneducated eye, sounded like reboxed DHTML done badly with the justification of a buzzword.
I think in the end we need to use the same criteria as always and if techniques can be developed to degrade well for non JS users, work on older screen readers (how many pensioners out there can afford the latest Jaws for example), then great stuff and I’ll look at using it in solutions.
Also, while the blind may be a benchmark, I’m not entirely sold on any solution which may benefit them at the expense of other groups. It will be interesting to follow the series and find ways around some of these issues though. Nice article, especially the Leg 3 part, while technologies are changing slowly its about getting things working now to make AJAX a viable accessible solution. Which is really common sense.
October 25th, 2006 at 7:40 am
[…] Three articles came to light in “Today’s AJAX and DHTML Best Practices.” Two of the articles went to some length to find ways to move focus as part of an AJAX event. They sought to take the visitor from the trigger event to the results in one smooth, easy move. For those of us who are sighted, we are all familiar with “the yellow fade” that catches our eye and focuses our attention on the element that has changed or is changing. Should we do the same for users of assistive technology? Should we try to get the screen readers to jump to the updated content? Both Gez and James attempted exactly that in their articles, with varying degrees of success. On the other hand, Becky advised against trying to move focus. Do not automatically shift focus on the page when an update occurs. Changing focus without warning can be distracting for some users, especially if there is no easy mechanism to return to the previous position. […]
July 8th, 2007 at 6:05 pm
Access Matters » Blog Archive » Today’s AJAX and DHTML Best Practices (tags: accessibility AJAX javascript webdesign)
October 16th, 2008 at 12:18 am
One of the strengths of javascript is the way it can be functional (think c) and object oriented (c++) at the same time. It also treats every object and its members as a key/value associative array (think hash or map). It is great to use in debugging, because you can iterate through all the members of an object.
A good example of that is this Drag and Drop DHTML Dialog. Its pretty cool. It is a total crowse-browser compatible drag and drop interface. An example is given with a simple dialog box. But it is written in object oriented javascript, which makes easy to reuse (namespace collisions etc).
—————————————————
October 21st, 2008 at 6:34 pm
blacklight,
You missed the point. This blog is about making things accessible for people with disabilities.
1.) How can a blind person use a drag and drop dialog? If you can’t see a mouse pointer, how do you use it?
2.) How can a person who is incapable of using a mouse operate a drag and drop dialog? Is there a keyboard interface to your wonderful script?
You probably didn’t THINK much before deciding to use this blog to advertise your work.
March 6th, 2010 at 9:51 am
Access Matters » Blog Archive » Today’s AJAX and DHTML Best Practices (tags: accessibility AJAX javascript webdesign)
August 21st, 2010 at 1:07 pm
website SEO is very very important if you want good rankings for your website. ~’-