Universal Design for Web Applications

Chapter 9. Ajax and WAI-ARIA

In the last chapter, we showed you how to add JavaScript to your HTML and CSS to make a web application. In this chapter, we discuss adding Accessible Rich Internet Application (WAI-ARIA, or ARIA for short) properties and other techniques for making JavaScript and Ajax accessible.

We have yet to realize the non-disability-specific benefits of ARIA, although we expect to see the mobile market take advantage of many of the ARIA features. For example, drag-and-drop is something that is not widely supported across mobile devices, even on the iPhone (as of late 2008).

A report from Informa Telecoms & Media (2007) predicts that 50% of the world’s population will have access to the Internet via a mobile device by 2010. Many of these devices will not support scripting or embedded objects. The majority of currently available mobile devices have a screen resolution of 240x320 pixels, and the iPhone isn’t much bigger at 480x320. Therefore, with smaller screen sizes, rich applications designed for desktop environments are not likely to fit entirely on the screen.

These similarities—constraints on viewport size and lack of a mouse—should cause mobile developers to take a look at WAI-ARIA and other accessibility APIs. The techniques you are looking for may already exist.

Taking Stock of Existing Code

Designing web applications without Ajax, while more complicated than our earlier exercises with simple HTML, is still pretty straightforward. In addition to what ...