Web Access Centre Blog

Early in Spetember I presented at the Irish Design for All e-Accessibility Network on accessibility and AJAX. It was a great opportunity to meet people and discuss issues as well as a chance to listen to presentations given by Steve Faulkner from The Paciello Group, Joshue O’Conner from National Council for the Blind of Ireland and Des Traynor from iQcontent.

I was going to forward the presentation to the delegates and thought I may as well also post it here as well. Read the presentation on screen or get the full text transcript here.

1. Accessibility and AJAX

Accessibility is: making websites usable by people of all abilities and disabilities. This includes people with mobility, sight, cognitive and hearing impairments, users of older technologies, newer technologies and the elderly.

AJAX is: Asynchronous JavaScript and XML, a combination of several technologies that allow part or all of a page to receive new data without refreshing the entire page. Common examples include mapping applications (Google Maps), email applications (Yahoo! mail, Gmail, Hotmail), real time form validation / processing, live shopping carts…

Or is AJAX more like this:

Accessibility
Just
Aint
Exciting

One on the myths of accessibility is that it suppresses creativity and progress. People mistakenly think you can’t use innovative new technologies and your websites have to remain flat and boring. This is not the case as accessibility is one part of the design process and works alongside, not against, innovative design. The only difference is that you need to keep all users in mind and build to standards.

2. Web Content Accessibility Guidelines and AJAX

WCAG 1.0: a non-JavaScript alternative should be provided if the functionality being used is important i.e searches, form validations and links. Unimportant uses of JavaScript include visual effects and mouse overs, print and add to favourites functionality.

WCAG 2.0: : important functionality should be implemented in a way that is compatible with assistive technology (Accessibility Support of Web Technologies).

WAI ARIA: Accessible Rich Internet Applications Roadmap from the Web Accessibility Initiative. WAI ARIA defines how to make more advanced features of dynamic content and rich Internet applications accessible to people with disabilities.

3. Ajax and the user

Technical issues include:
• JavaScript support - not everyone has it, or wants it
• Relies on XMLHttpRequest object - not supported in all browsers

Note: screen readers can handle most uses of JavaScript but do have a problem with content generated at a point on the screen that has already been read for example a dynamically updating from. They may not detect the change.

Behavioural issues include:
• Context / change: users may be unaware of change and updates made in the page (including users with screen magnification, screen readers and users with cognitive impairments)
• Interaction: no keyboard access for non-mouse users, click and drag, drag and drop.
• Expectation: unfamiliar behaviour, back button (“where is it?”) and submit button (“why isn’t there one?”), confusion over book marking.

Remember the lessons we learnt with Flash. AJAX enhanced pages represent a significant change in how we browse. Traditionally we expect to interact with a page, click and refresh to see the changes. When pages dynamically update the back button wont take you back to your previous options. Equally you may not be aware that something has changed or will be busy looking for a submit button to activate a change when in fact there isn’t one as changes have already been made.

We saw similar problems with Flash. Not all users understood how to navigate in Flash which behaves differently from HTML. This was especially an issue for screen reader users when Flash MX 2004 came out. The technology was now possible to access but it’s behaviour was not what you’d expect.

4. AJAX in action: Kayak.co.uk

Below is an image of the search results page on www.Kayak.co.uk, a flights, hotels and cars search website. If you can access this site this is an example of how AJAX has boosted the browsing experience for the user by dramatically cutting down search time needed by having results dynamically update in the page according to your preferences.

You can select and deselect prefered airlines by using the lefthand checkboxes, use a click and drag to choose preferred take off and landing times, view details, remove results you don’t want, save results to favourites and much more all without refreshing the page.

If you are a screen reader user however you can use some of the functionality, for example checking and un-checking preferred airlines, but you have no way of knowing what has changed on the page. If you are a screen magnification user you will not see changes on the page either.

For many people the page is confusing as you don’t understand what is happening. This is especially so for people new to the Web and / or AJAX as well as people with learning difficulties or problems with perception.

Kayak.co.uk AJAX functionality includes:
• Click and drag
• View detail
• Print
• Send
• Save
• Delete
• Sift
• Navigate

“Looking at a page with a screen reader is a bit like reading it through a straw, or looking at the sky through a telescope. You only know about the parts that have already been viewed.”
Bim, screen magnification and screen reader user

5. Accessible calculator example: before and after

Ajax calculator: The page is made up of two text entry boxes and a submit button. Once the user has added numbers to the two form fields and clicks submit the total dynamically appears on the page above the submit button without the page refreshing. The form fails to work with JavaScript disabled.

Accessible Ajax calculator : Instructions have now been added to the top of the page explaining to the user that JavaScript is required. This is great however I would probably make the text more user friendly. The user is also informed that the page will update dynamically and where. This is important as knowing what will happen will save the user time and effort trying to retrace their steps. When the submit button is clicked a pop-up appears informing the user that the page has updated. This will be accessible to all users (including screen reader users). Colour is also used momentarily to highlight the area of the page it has updated.

(ref: Accessibility and AJAX, Standards Schmandards)

6. The solution

Ask yourself “Do I really need AJAX?”. If yes use progressive enhancement. This means build a standard application then overlay with AJAX i.e. HIJAX
Step 1: Content
Step 2: Mark up content semantically (X)HTML
Step 3: Add the presentation layer CSS
Step 4: Add the behaviour DOM Scripting

“Plan for AJAX from the start, implement at the end” Jeremy Keith, Progressive Enhancement and AJAX

7. The techniques

• Inform users JavaScript is needed
• Describe what to expect
• Provide alerts
• Allow for preferences and choice (alerts can also be distracting)
• On / off switches
• Highlight changes – temporary colour or font size changes
• Provide a heading structure, correctly coded lists and data tables

Above is the search page in Kayak.com with JavaScript enabled. Features include:

• Forms which dynamically predict destination names you are inputting
• Pop up date picker
• Options on the page update depending on if you select the Return, One-way, Multi-city or Weekend radio buttons
• Form validation

Above is the search page in Kayak.co.uk with JavaScript disabled:

• A warning is provided informing the user that JavaScript is required together with instructions. While this is good it does make the assumption that
• The JavaScript warning is given at the start of the page but could be presented better.
• Dates now not populated in the fields but at least you can manually implement them. Calendar fly outs don’t work so it’s frustrating to have them there. Could have had an HTML link to a pop-up calendar (with a new window warning)
• Can submit the form so you’re left with some hope

Above is the results page with JavaScript disabled. Rather than show results the page just stops at showing a progress message “We are searching many travel sites for the best prices…When the search is completed, click on a price to purchase from a provider site directly”. Not very useful!

“It’s like being in an adventure game maze where you stay in the same place but the terrain around you might change at any time.” Lynn, Programmer and screen reader user

8. Final thoughts

• Progressive enhancement is key.
• James Edwards (aka Brothercake): “Unless a way can be found to notify screen readers of updated content, Ajax techniques cannot be considered accessible”.
• Hugh Huddy: “Good design is about understanding user requirements, if you aren’t sure then user test, but if you pretend to be a screen reader user, you’ll get pretend results.”

9. Resources

• WAI ARIA - Some techniques for using these technologies to create accessible content are provided in the ARIA Techniques section of Techniques for WCAG 2.0. WAI-ARIA defines how to make more advanced features of dynamic content and rich Internet applications accessible to people with disabilities. A primary focus of WAI-ARIA is providing information about user interface controls—such as expanding navigation bars—to assistive technology.

• JavaScript Dojo - an Open Source DHTML toolkit written in JavaScript. Dojo allows you to easily build dynamic capabilities into web pages and any other environment that supports JavaScript sanely. You can use the components that Dojo provides to make your web sites more usable, responsive, and functional.

• AJAX & accessibility links and resources - resources about accessibility and AJAX from the writer of this presentation on del.icio.us.
• RNIB Web Access Consultancy
– Tel: 020 7391 2178
– Email: webaccess@rnib.org.uk
– Web: www.rnib.org.uk/webaccesscentre/