The Basics: What is AJAX? What is Accessibility? PDF Print E-mail

Three people using a computerWhat is AJAX?

AJAX, which stands for "Asynchronous JavaScript and XML," is a collection of client-side Web development techniques which allow for seamless client and server interaction.  AJAX allows us to manipulate the DOM through JavaScript in order to dynamically change what a site visitor sees, without needing to manually refresh or load a new page every time. It also gives us the option to retrieve data asynchronously, often using XMLHttpRequest, without interfering with the user's current display. Despite the name, however, all data requests are not necessarily asynchronous, nor is XML always required.

What are the benefits of using AJAX?

  • Real-time Updates - With AJAX, there's no need to automatically refresh an entire Web sites containing e-mail, news or other RSS feeds.  Instead, using live regions, one can simply update the effected area, without forcing a user to loose their place within an article while the entire site refreshes periodically.
  • Continuous Look and Feel - AJAX allows Web applications to interact with users more like a standard desktop application would.  Forms, for example, may be validated as the user goes along, with no need to submit the form, wait for validation, and pray that all of your previously entered data wasn't wiped out in the refresh process.
  • GUI Tricks - AJAX allows developers more graphical freedom in designing their Web applications.  For example, A Web site which makes use of AJAX may allow their visitors to open, close, drag, and drop widgets and other content blocks around a Web page, allowing entire Web portals to be customized by the end-user, giving a truly personal Web experience.
  • Language Neutraility - Unlike Swing and other frameworks, AJAX is language neutral, which means that it doesn't matter what language the rest of your code is in (PHP, ASP, JSP, pure HTML...), AJAX will work just fine.
  • No Plug-ins or Special Software Required - Unlike Flash, AJAX does not require the end-user to install anything special on their computers in order for it to work.  As long as they have a relatively modern and fully functional browser such as IE or Firefox, everything should work just fine.

What is accessibility?

In general, Web accessibility is a term used to describe the ability for all persons to understand, use, and interact with any given Web site.  This term is often used in reference to people with disabilities, such as low vision, or no vision, however it can also be applied to the hearing impaired, the elderly, the young, those with poor motor coordination, and those who simply use Web browsers which may not be fully functional in terms of supporting various plug-ins (such as flash) and JavaScript (for GUI tricks).  In order to allow your Web site to be both viewed and enjoyed by the greatest number of people possible, it is important to make it both interesting and visually pleasing for those without disabilities or limited technology, while remaining fully functional for those with them.  Many Web standards have been written to give Web developers general guidelines regarding accessibility.  More information on these standards may be located in the tutorials section of this Web site.

What are the challenges in writing AJAX in an accessible fashion?

Since JavaScript is AJAX's middle name, one of the largest trouble spots is simply the case where a user's browser does not support it, often because someone is either using an older browser, or even a newer one on a mobile device such as their cell phone.  While it might seem simple enough to have two versions of your Web site, one which displays if JavaScript is enabled, and one which displays if it isn't, using the noscript tag, there is more to accessibility than just JavaScript support.

Another consideration is the interaction between people and your Web site.  If you use AJAX for content loading, those who do not have a whole lot of technical savvy might be confused in thinking that nothing is changing, simply because they don't expect to see new content before the entire Web page reloads.  Those with poor motor coordination might not be able to handle certain types of dynamic menus, and screen readers are often completely linear in nature - if the content updates dynamically, somewhere in the middle of the page, the visually impaired may never even know.

How can we overcome these challenges?

Without getting into all of the nitty gritty, which we discuss in further detail throughout our tutorials, it is possible to write AJAX in an accessible fashion.  Some key methods include writing your Web site in a well structured way, which helps clue in screen readers and other assistive technologies.  If AJAX is used for critical pieces of functionality, such as dynamically updating the screen's visible content, then document roles, as defined in WAI-ARIA, can be used to tell those screen readers which support it that a region of the Web site is not static, and that they should pay special attention in case it changes.  For those screen readers which do not support WAI-ARIA, and for those who do not have JavaScript enabled browsers, non-AJAX versions of the content should also be made available.