Accessible AJAX

Jason Morningstar

UNC Chapel Hill | ITS Communications | Web Services

Goals

• Raise awareness of limitations
• Discuss nature and advantages of AJAX
• Address specific common issues
• Share best practices

What the Heck is AJAX?

• "Asynchronous JAvaScript and XML" - an amalgam

• XHTML and CSS for presentation.
• Document Object Model for dynamic display.
• XML and Extensible Stylesheet Language Transformations for data interchange.
• XMLHttpRequest for asynchronous client/server interaction.
• JavaScript to run commands client-side.

Where did it come from?

• Jesse James Garret coined the term way back in 2005.

• It builds on other technology groupings like DHTML

Best Practices

• AJAX isn't a given - we need to inform our users that we are employing it .

• More information in more forms is more better!
• Most of this information comes from Becky Gibson

Notify User of Required Scripting

• If scripting is required (and with AJAX, it is) tell your user .
• Alert your user that dynamic updates are going to occur .

Provide Manual Notification Option

• Automatic updates without user requests are common (think stock or news tickers).

• Allow user to disable automatic updates and to manually request updates.

• Save the user's update preferences, on the server or with a cookie

Alert User to Updates

• Give the user the option of receiving an alert when an update occurs.

• This is useful to assistive technology users - screen reader and magnifier users can miss automatic updates.

• This should be optional!

Alert Users to Focus Shifts

• Don't automatically shift focus on the page when an update occurs.

• Changing focus without warning can be distracting.

Highlight Updated Information

• Changes in color, font size, or weight need to be elective.

• Allow the user to choose a highlight option .

• When changing background color, it is best to use a subtle color and only change the background for 5-10 seconds.

Make Navigation Easy

• Provide links to portions of the page that are dynamically updated.

• If the site relies on the update of several areas of the page at different frequencies, provide a way to quickly navigate to each section. Think about usability.

• Proper use of semantic markup is critical with AJAX-enabled pages.

Update Rather than Create

• Update existing elements with new content rather than creating and adding new high-level elements to the page.

• If you must add elements, append them after the current focus point and make them a parent to an existing element rather than the document itself.

• For example, create a <div> element in the markup and use it as the parent element when you add new content to the page. Update the contents within that <div> but don't remove and recreate the parent <div> element itself.

Final Notes

• Adding navigable elements with explicit tabindex attribute values within the page may affect the tab order for assistive technology users.

• Test, test, test! Evaluate using assistive technology.

Handy Links

• Contact me at jason_morningstar@unc.edu
• The original AJAX article, still a great resource.
• Becky Gibson's AJAX best practices page, from which most of this presentation was pulled.
• AJAX and screen readers, from Juicy Studios
• The W3C Dynamic Accessible Web Content Road Map