Max Kiesler - Designer
How to Make Your AJAX Applications Accessible - 40 Tutorials and Articles
SubscribeWednesday, June 28, 2006
AJAX is a great tool for creating rich internet applications, however, when improperly implemented it can cause huge accessibility issues. The good news is that most of these issues can be fixed so your websites are viewable by a much wider audience. Great resources on accessibility have been around for years, however, many web 2.0 and AJAX websites ignore all of the research that went into turning website accessibility into a movement followed by most professional web developers. Below you'll find a list of 40 best AJAX accessibility tutorials and articles that I have found on the web in the last year.
As always thanks to all of the developers and accessibility experts who made all of the information below available to us. Also, if you know of any other AJAX accessibility resources please add them to this post via my comments area.
3 Myths of Ajax and Accessibility
I've seen quite a few ideas and bits of policy writing about accessiblity that could probably do with some updating. These are the 3 most common.
Accessibility of AJAX Applications
AJAX will not work in all web browsers. As its name suggests, AJAX requires JavaScript. This alone means that AJAX applications will not work in web browsers and devices that do not support JavaScript. For this reason it is not accessible to many typical Web users. The Web Content Accessibility Guidelines also require that web applications function when JavaScript is disabled or not supported. AJAX also requires that XMLHttpRequest be supported, which many browsers do not.
Accessible DHTML
DHTML accessibility allows desktop-style widgets such as tree views, menu bars and spreadsheets which are accessible both with the keyboard and assistive technologies such as screen readers, screen magnifiers and alternative input devices.
Accessible JavaScript Guidelines
Use Javascript to enhance the usability features for the majority of users, without negatively affecting the accessibility for the minority of users. You can almost always fall back on a plain HTML or server-side solution for the benefit JavaScript provides.
Accessible Pop-up Links
Sometimes we have to use pop-ups -- so we might as well do them right. This article will show you how to make them more accessible and reliable while simplifying their implementation.
AJAX Accessibility Overview
Asynchronous JavaScript and XML (AJAX) is a hot new technology on the Internet that allows the incremental update of portions of a Web page without reloading the entire page. This has great performance benefits and provides a medium for developing rich Internet applications. Accessibility concerns have arisen with the increased use of JavaScript and AJAX on the Web. This article introduces AJAX and discusses some of the accessibility issues and best practices.
AJAX and Accessibility
In this article we will have a look at the implications for accessibility and usability when using Javascript to dynamically update a web page. I will also show how you can increase accessibility for AJAX-based forms
Ajax, accessibility and Assistive Technology
I've been worrying about Ajax accessibility for a while now, so I was delighted to read two very interesting items of research on Ajax accessibility which were published last week.
Ajax Accessibility Revisited
The incredible flexibility provided by Ajax technologies is a big frustration to the accessible design community. Speaking for myself, I'd LOVE to feel comfortable using these powerful tools to create accessible tools. But the situation continues to be limiting.
AJAX and Accessibility
With DOM Scripting and Remote Scripting making their way into standards-compliant web development, people are beginning to wonder what the effect of these techniques is in screenreaders and other assistive technologies. Kevin Leitch asked me and some others about AJAX and Accessibility.
AJAX and Screenreaders: When Can it Work?
We've all heard a great deal of buzz about AJAX in the last few months, and with this talk has come a legion of articles, tips, presentations and practical APIs designed to explore the possibilities and try to arrive at best-practice techniques. But, for all of the excitement and hype, still very little has been said on the subject of AJAX and accessibility.
Ajax, Hijax and accessibility
The main aim of Keith's Hijax methodology is a model of Web Standards "Progressive Enhancement" lovliness, which ensures the degradability of the web page/ web app (call it what you will). It is basically the principle of unobtrusive JavaScript applied to Ajax.
AJAX, JavaScript and accessibility
With the advent of mass-hype for building AJAX solutions, I find it necessary to shed some light of AJAX and JavaScript implementations and how they relate to and affect accessibility, and to explain how they can both co-exist; that one doesn't exclude the other.
AJAX: Usable Interactivity with Remote Scripting
This article aims to give you an introduction to the foundations of remote scripting, in particular, the emerging XMLHttpRequest protocol. We'll then walk through an example application that demonstrates how to implement that protocol, while creating a usable interface.
Ajaxessibility
Unfortunately for us, it's also inaccessible as all getout. Even in 2005, assistive technologies like screen readers get serious heartburn when it comes to just about anything we call "dynamic HTML." It doesn't know what of this asynchronous content crossing the transom is relevant to the user, and how to deliver it meaningfully to the user. Do they want to announce every line of a ticker script automatically, while the user is trying to read other content? Nope.
An important lesson learned about AJAX and accessibility
Yesterday I went to visit some fellow consultants at their assignment for a sub company/department of one of Sweden's largest banks. We had a talk about AJAX in general and different ways of how to implement it, and one of them opened his web browser to navigate to some AJAX-based web sites.
Build Half a Product: Is Ajax accessible? At all?
If you know about WCAG then you know that many parts of it are outdated. And you also know that a lot of people have developed expertise over the years in interpreting WCAG in contemporary ways.
Creating Accessible JavaScript
JavaScript allows developers to add increased interaction, information processing, and control in web-based content. However, JavaScript can also introduce accessibility issues.
Event Handler Accessibility
Only use onchange rarely and don't alert users of format errors until time for submission. For example, you may want to use it for slight formatting changes of input data. If a user has typed in (555)555-1212 for a phone number format instead of the requested format, you could change it to 555-555-1212 safely without alerting the user.
First Framework to Support Accessibility for AJAX and Web 2.0 Applications
MB Technologies, developers of Bindows, the leading development framework for AJAX and Web 2.0 applications, announced today the release of Bindows version 2.0 with enhanced support for Section 508 accessibility compliance, an industry first.
Fixing the Back Button and Enabling Bookmarking for AJAX Apps
Everyone's favourite AJAX technology app is Google Maps. Google have done a stunning job... But when I came to try to bookmark a page I had to hunt around for 'link to this page' over on the right hand side. Why have they broken such a basic function of the web?
Front-End Architecture: AJAX & DOM Scripting
The tipping point that really got me wondering about front-end architecture is AJAX. It's unique in that it really crosses the chasm between user experience and the deeper technical bits. On one hand, AJAX is important because it enables us to create exponentially richer user experiences. On the other hand however, its implementation can leave much to be desired if handled incorrectly, and to make matters worse, because of the way it straddles the line between the front and back-end, it's difficult to determine how it fits in with everything.
How do scripting languages affect accessibility?
Scripting languages are becoming increasingly popular on the web, because they can be used to make web pages more dynamic and interactive. There are two types of scripting languages: server-side and client-side.
Index of JavaScript tests
Some great information about javascript and accessibility
Javascript and Accessibility
Use of scripts such as Javascript may create barriers to access for some users of adaptive technology. For example, if a script generates content on the "mouseover" event handler, as in the case of "rollovers," anyone who relies on keyboard access will not be able create the event that will cause the browser to generate the text.
JavaScript Accessibility Examples
Use the event handlers on an anchor element rather than on the image element. An image cannot achieve keyboard focus so it would never be able to use the keyboard events.
JavaScript accessibility issues
JavaScript is a scripting language used to make HTML documents more dynamic. Oftentimes, user actions trigger scripts which modify the page. Users may not realize a page has changed or may not be ready for the page to change when it does. On the other hand, if done well, JavaScript can enhance the accessibility of pages by allowing users to customize them to their needs.
JavaScript and Accessibility
here are some pretty serious implications for the AJAX-ification of the web if we want to do it right. I'm a believer that AJAX is interesting, will become a popular way of building web based applications. I'm concerned that we're going to get people building AJAX type applications that simply won't work at all without JavaScript on.
Making Ajax Work with Screen Readers
The accessibility community is understandably concerned about the accessibility of client-side scripting, in particular using Asynchronous JavaScript and XML (Ajax) to produce Rich Internet Applications. Steve Faulkner of Vision Australia and founder member of the Web Accessibility Tools Consortium (WAT-C) and myself on behalf of The Paciello Group (TPG) have collaborated in an effort to come up with techniques to make Ajax and other client-side scripting techniques accessible to assistive technology.
Progressive enhancement with Ajax
It would be nice if Google Maps were accessible by non-JavaScript enabled user agents, but in practice this must be weighed up against market forces - is an acceptable proportion of your target market likely to have JavaScript enabled, or is your service so useful that people will go out of their way to acquire JavaScript capabilities to use it
Responsible Asynchronous Scripting
AJAX and its kin are empowering developers, but with great power comes great responsibility. Asynchronous or remote scripting has been lurking in the background of web app development for quite some time now.
Rich Accessibility
I think accessibility issues have always been an abstract concept to me. It usually was an afterthought, something that the usability folks dinged us for. You know the text wasn't dark enough or the font was too small. It seemed to me that every experience I had with accessibility was from the negative perspective.
Same Language, New Dialect
First, accessibility: Advanced interactions and behavior provided via JavaScript must be enhancements, not the sole way to accomplish a task. In desktop cut-and-paste, there are at least three ways: keyboard shortcuts; "Edit" menu options; and drag and drop. Accessibility isn't an optional characteristic of the Web.
The Hows and Whys of Degradable Ajax
While working on Particletree's shopping cart system for our magazine, we decided that we wanted to create a flawless user experience for all users without having to sacrifice the added user interface benefits provided by Ajax goodness. A lot of places will tell you that it is ok to use JavaScript and Ajax as long as it's not mission critical. Well, we don't think web apps have to be boring to be reliable.
Usable XMLHttpRequest in Practice
One of the great benefits of XMLHttpRequest is that you can use it to make complex WYSIWYG. This has previously been hard to do on the web. Take a "build your car" feature that you often find on sites of car manufacturers. This could be greatly enhanced by the use of XMLHttpRequest. When the buyer selects something, you can connect to the database, recalculate prices, change the image or change other options - without reloading the page, on the fly. This is great! But... remember the 4 points above. XMLHttpRequest do not support any of them by default, if you want to keep your web application usable - you have to reinvent them.
Usability and accessibility with Ajax
The Ajax express train rumbles on, threatening to crush anything in its path. Recent discussion has turned to those critical elements of good web development, usability and accessibility. Accessibility is a major issue with Ajax, mainly because anything that relies on JavaScript to function is inaccessible pretty much by default. There are two solutions: either provide a fall-back system where the site remains useful without its Ajax enhancements, or provide a whole separate interface that works without scripting.
XMLHttpRequest Usability Guidelines
XMLHttpRequest is becoming more and more popular, and many people are currently exploring what we could do with it. Unfortunately this also causes people to reinvent old and forgotten usability problems.
Web 2.0 and accessibility
Web 2.0 is the hottest buzzword since Ajax, and I'm glad to see that I'm not the only one worried about what thoughtless implementation of everything that fits in "Web 2.0" could mean for accessibility and device independence on the web.
Important Note:
The post that was here Why Ajax Sucks (Most of the Time) has been removed as it was not a legitimate article about AJAX. It was a fraud, and it was not written by Jakob Nielsen. Very sorry Jakob.
Why Ajax Sucks (Most of the Time)
With respect to the use of ajax by highly skilled Web designers, I have changed my opinion somewhat: people who really know what they are doing can sometimes use ajax to good effect, though even experienced designers are advised to use ajax as sparingly as possible.
You should've been @media
What we basically agreed on is that we need to get the word out. JavaScript is ready for its proper role in modern, standards based websites. During the conference we found plenty of evidence that there is much interest in JavaScript, if only people could get more help and more explanations.
Comments on this post
Dennis on 06/28 at 10:26 AM
I think IBM is doing some work on Accessible AJAX.
billy on 06/28 at 01:03 PM
i’ll take this seriously when the broken html fragments are removed.
okok on 06/28 at 01:24 PM
ohhh. close the break tag like this
</br> before speaking about AJAX.
DesignStage.Net on 06/28 at 02:29 PM
great resource...but what happened to the break tag??
MF Death on 06/28 at 02:42 PM
lol okok, he was closing it right he just forgot the “<”
Cromag on 06/28 at 02:49 PM
Also, either change the page encoding, use HTML entities for the apostrophes, or use just plain ascii apostrophes. If this were a client project, and I put this page out on into the wild, I would expect a long talk with my manager about proof reading before making a page live.
Glen on 06/28 at 03:10 PM
awesomebr>
riquock on 06/28 at 03:28 PM
To okok: it’s
or
. not </br>!!
audienceone on 06/28 at 07:56 PM
it’s <br/> ... <br><br>another great list of links! thanks for all the time spent.
audienceone on 06/28 at 07:57 PM
it’s <br/> ... <br><br>another great list of links! thanks for all the time spent.
D.J. de Groot on 06/29 at 02:12 AM
Great list of links,
Ajax needs to mature to overcome these problems (if possible at all).
come discuss ajax here: http://www.ajaxtalk.com
Regards, DJ
web design uk on 06/29 at 03:17 AM
as a web developer these will prove to be an excellent resource!
thanks for the links
Folkestone Gerald on 06/29 at 06:29 AM
A very helpful selection of links, thankyou
Paul on 06/29 at 04:54 PM
Wow - I was just getting ready to write an Ajax accessibility summary article, instead I may just link to this 
Isulong SEOPH on 06/29 at 06:54 PM
Very wonderful links. Thanks. Found this on digg!
Aaron on 07/01 at 09:37 AM
I really enjoyed reading this ! The links were awesome too.
netreporter on 07/08 at 02:44 AM
It seems, ajax can be applied even in a jokes site.
Check out ajax in action for jokes at
[url=http://www.apnajokes.com]http://www.apnajokes.com[/url].
Teddy on 08/08 at 08:04 PM
I’m a java developer.I used to create rich internet applications with applet ,but now I think I should switch to AJAX.
Jimy on 08/14 at 10:51 AM
Seriously, you’re the AJAX reference King. Thanks so much for another great list.
Dreamzsop on 10/19 at 02:38 PM
This one is very much interesting. Thnx for you nice contribution.
arcade on 11/15 at 05:44 AM
ajax can be used everywhere 
atlanta news on 11/15 at 01:45 PM
A very useful tool for working on the internet. Many applications are available for those interested in improving their knowledge.
games on 11/20 at 06:00 PM
thanks for the thoughts…
Shop Optimierung on 12/04 at 06:03 PM
A quite intresting idea is realized in this website! And a good and easy to handle design has been found too!
Brustvergrößerung Berlin on 12/04 at 06:09 PM
A very useful tool for working on the internet.
Plastische Chirurgie Frankfurt on 12/08 at 07:51 PM
Wow. Very impressive.
Supreme concept of a personalized web portal.
I look forward to using this as my browsers’ start page.
Keep up the good work!
eMule Forum on 12/10 at 05:14 PM
A very good article on the basics.
Cheers
John on 12/22 at 06:22 AM
\"AJAX, JavaScript and accessibility\” doesnt work ...
Marco on 12/22 at 06:22 AM
“AJAX, JavaScript and accessibility” doesnt work ...
Thermage on 02/22 at 12:22 PM
Great and excellent article ts realy helpful. Thanks again.
Meble on 02/26 at 02:49 AM
Very wonderful links. Thanks. Found this on digg! Greetings from Poland
Peter on 02/28 at 12:57 PM
er I stopped reading this when he said and I quote:
“Accessibility of AJAX Applications
AJAX will not work in all web browsers. As its name suggests, AJAX requires JavaScript. This alone means that AJAX applications will not work in web browsers and devices that do not support JavaScript. For this reason it is not accessible to many typical Web users.”
I have to ask, who the hell does not use JavaScript these days? Maybe behind a military firewall, but how in the world this person came up with “not accessible to many typical web users?” Does this guy even know what he is talking about? First understand the web, then start speaking about it. JavaScript is here to stay my friend and most “typical” users couldn’t care less to disable it, since its enabled by default.
MK on 05/07 at 03:45 PM
I digged this article, its a great resource for Ajaz programmers, like myself.
Search
Home | DesignDemo | VizList | mHub | About | Contact | News
Max Kiesler is an award-winning strategic designer and co-founder
and principal of Ideacodes.com, a web consultancy in San Francisco
focused on next generation websites. About Max...
This work is licensed under a Creative Commons Attribution 2.5 License