Section D. Accessibility | ppk on JavaScript. Modern, Accessible, Unobtrusive JavaScript Explained by Means of Eight Real-World Example Scripts2006

D. Accessibility

Complicated, script-heavy, XMLHttpRequesting applications have a problem when it comes to accessibility. Making such an application accessible without JavaScript is definitely a tough job. However, it's something that simply has to be done. The main problem is that many application developers refuse to consider the issue, which of course makes finding answers even more difficult.

Unfortunately, the definitive guide on XMLHttpRequest and accessibility has not yet been written. I try to provide some hints in this section, but you should always temper the guidelines below with common sense; chances are that you'll find yourself in a situation in which none of them apply.

Accessibility with HTML

One (and only one) format is accessible in and of itself, and that's HTML. Anyone who surfs the Web has a program that is able to interpret HTML. Therefore, working with HTML files is the key to keeping an XMLHttpRequest application accessible.

Let's start with a simple example: you want to import a bit of data and paste it into your page as is, without modifying it or searching for specific data. As we saw in 10C, the HTML response format is best suited for this.

So let's create a link list with a JavaScript hook, and an element to hold the returned data:

<ul >     <li><a href="data.html">Data</a></li>     <li><a href="moredata.html">More data</a></li>     <li><a href="stillmoredata.html">Still more data</a></li> </ul> <div ></div>

These simple links will work in any HTML-capable user agent. Your application is accessible.

Hijax

The methodology I describe here was developed by Jeremy Keith, who calls it Hijax. Read about it at http://domscripting.com/blog/display/41.

If a browser happens to support XMLHttpRequest, you can enhance these links. You could do the following (using the createXMLHTTPObject() and sendRequest() functions we already discussed):

var XHRsupport = createXMLHTTPObject(); window.onload = function () {     if (!XHRsupport) return;     var linkList = document.getElementById('xmlhttp');     var links = linkList.getElementsByTagName('a');     for (var i=0;i<links.length;i++) {             x[i].onclick = getPage;     } } function getPage() {     sendRequest(this.href,showPage); } function showPage(req) {     var HTMLPage = req.responseText;     // paste HTML into page }

Now whenever the user clicks on a link, the getPage() function kicks in and fetches the required HTML page through XMLHttpRequest.

However, if the browser supports the advanced interface, you don't want to receive the entire HTML page, but only the part of it that contains the actual content. After all, you may not paste a second <html>, <head>, or <body> tag into your page, and besides you probably don't want to show the site navigation and other overhead, either.

Instead, you want to show only the actual content of the HTML page you're importing. The first step is to mark up this content:

// data.html <html> <head>[...]</head> <body> <ul >[...]</ul> <div >     <h2>Page content</h2>     [...] </div> </body> </html>

Now the problem becomes one of importing or showing only <div >, without the rest of the HTML. One solution would be a server-side script that extracts this <div> from the requested HTML page and sends it and its content back to the browser:

function getPage() {     sendRequest('extractScript.php?page=' + this.href,showPage); } function showPage(req) {     var newData = req.responseText;     document.getElementById('writeroot').innerHTML = newData; }

Of course, you could also use the reverse solution: create HTML snippet files on your server to import with XMLHttpRequest, and also create a template file that's used to give these snippets a "coating" of overhead HTML in case the browser requests the pages without XMLHttpRequest. In this case you can distinguish between XMLHttp and non-XMLHttp requests by checking if the User-Agent header is 'XMLHTTP'.

If a server-side solution is not possible, the simplest client-side solution is to use an iframe, and load the HTML pages into that iframe:

<iframe ></iframe> function getPage() {     document.getElementById('writeroot').src = this.href; }

Accessibility with other response formats

Unfortunately, XML, JSON, and CSV files are not accessible by themselves, so as soon as you use one of these response formats, accessibility gets more complicated. There are two ways to reconcile non-HTML responses and accessibility, but sometimes neither can be used.

The first way is simply to make sure that any XMLHttpRequested content consists of nice extras. That leaves the basic functionality in the HTML page accessible to anyone. While the requested extra bits should make your page more usable, they shouldn't contain any essential elements. Choose this solution if you can, since it keeps things simple. Often, however, it is not a viable alternative.

The second way is to create two server-side programs: one to deliver the XML (or JSON or CSV) to the XMLHttpRequest, and another to deliver plain HTML pages to older browsers. These programs must make a distinction between XMLHttpRequest and normal requests; they could do so by checking whether or not the User-Agent header is 'XMLHTTP'.

The disadvantage to this method is that the server-side programmers have to create and maintain two applications instead of one, which of course makes the project more complex and expensive.

Unfortunately, I have no other accessibility hints for XMLHttpRequest applications that do not work with HTML snippets. This only goes to show that we've barely scratched the surface of this complicated topic, and that more research is necessary.

If you build a data-retrieval application, please take an hour to think about accessibility. Especially when you don't work with HTML, chances are that you won't find a solution, but I have the secret hope that somebody (maybe you!) will think of a viable approach that will take us one step nearer to accessible XMLHttpRequest applications.