Implementing Accessible Ajax

A Warm Welcome

Chris Blouch

AOL

Todo

• Crash Course
• Axs Library
• Manage Focus
• Provide Shortcuts
• Make them discoverable

Crash Course

Why you should care

Purpose

Accessibility for web sites is an attempt to remove barriers and reduce points of pain for users with various physical, sensory and cognative limitations.

Mmmmm

Part of a well balanced breakfast including I18N and SEO

Drivers - Demographics

Among adult computer users in the US

• 1 in 4 has a vision difficulty
• 1 in 4 has a dexterity difficulty
• 1 in 5 has a hearing difficulty
• Projected to be 70M users by 2010

http://www.microsoft.com/enable/research/

Drivers - Financial

• More pageviews, more impressions, more time on the site
• Removing someone's pain makes them very loyal - advocates
• Good publicity for a vocal group

Drivers - Regulatory

• Section 508
  • Applies to government sites
• Simship - products target a global market
  • Many countries already have laws on the books
• No specific US laws mandate accessible web sites today - but...
  • State civil rights laws and ADA have been used to file lawsuits
  • NFB v. Target class action suit
  • NY v. PriceLine and Ramada

AT - Assistive Technology

Hardware and/or software which enables access to mainstream content and applications.

• Screen Readers - Jaws, VoiceOver, WindowEyes
• Screen Magnifiers
• Captions for Audio or Video
• High Contrast Mode

Demos - Screen Reader

• Start with a screen reader and a page with some text
• Lincoln's Gettysburg Address

AT Limitations

• Relies on the underlying page code to be good
• Some design approaches require special attention
  • Ajax, Flash, Widgets
• Some extra meta data needs to be provided
• ALT tags, form labels, ARIA

Primary tasks

• Manage focus
• Provide shortcuts
• Make them discoverable
• Enter the Axs library

Axs - What is it

Axs is a small Javascript library which provides methods which make it easier for web developers to implement modern Web 2.0 sites with accessible feature

Axs - Attribtues

• Free
• Lightweight license
• Small - 5.5K uncompressed
• Documented
• http://dev.aol.com/axs
• Not on CDN

Dive into Code

The Construct

• Clean markup
• No inline JS
• Hidden SR hints

Axs Library

• Primary Functions
  • focus, keyreg, keychart, gdoc
• Secondary Functions
  • id, ids, r, ae, log

Axs Library - ae, log

• ae - Maps objects, events and actions
• log - realtime, no plugins, no alerts

Axs Library - gdoc

We're at an Ajax conference, so do some already

• gdoc - handles all the common Ajax behaviors
• Let's make a link that loads some new stuff

Get Nothing and Like It

Focus

• What an AT reads is what has focus
• Manage focus to control the context
• Get the AT's attention on the right spot

Focus Tricks

• axs.focus - handles messy stuff with tabindex
• Hidden header in updated content
• If you change something, drop a hint

Provide Shortcuts

• Wouldn't it be nice to not hunt for links
• Keyboard controls make web apps act like desktop apps
• AT users and keyboard users love it

Provide Shortcuts - Hard

• Messy cross browser issues
• Access keys have weak ties to JS at best
• axs.keyreg handles it for you

Axs Library - keyreg

• keyreg - Instrument key shortcuts which invoke your functions
• Simple to set up
• Let's add one for our link

Provide Shortcuts - Easy

• Specify JS Method or Function to call
• Specify key combination you want
• ???
• Profit

Provide Shortcuts - Easy

• Wouldn't it be nice if we could could update different boxes via shortcuts
• Want a single generalized loader
• axs.keyreg lets you pass a package along to the handler specified when you register

Provide Shortcuts - Easy

• Howsabout some nice shortcut keys for moving focus around
• Same general technique

Provide Shortcuts - Focus Issue

• If you update content of focused object SR will not notice
• Blur, do update, then refocus to trigger MSAA update

Provide Shortcuts - Using This

• Would be nice if we could just update the box that has focus
• axs.keyreg can tie shortcuts to DOM nodes and pass the node which had focus to your handler when triggered
• Allows you to implement contextually sensitive keyboard shortcuts

Provide Shortcuts - Done

• There's more like bubbling control and object overriding. See the docs.
• On to the last step

Discovery

• In a real web application you could end up with dozens of key combinations
• Need a way for keyboard and screen reader users to discover what's hidden
• axs.keyreg generates a hidden table and link for you.

Keyboard Table

• Link is ID axs_kl and table is axs_kt
• Injected at top of DOM when called
• Can call multiple times if you add more shortcuts
• All user-facing strings stored in axs.l10n

Some Gotchas

• Safari tabindex=-1 no go
• Keys already taken
• Frames
• Focus stealing ads

That's pretty much it

• Goto http://dev.aol.com/axs to download current rev
• Full docs, demo and commented code
• Take a peek at AOL Webmail Basic for a production example

Summary

• There is a large potentially loyal and litigious population which is yours for the losing
• Many of the accessibility problems we find are simply due to lack of awareness
• Promoting Best Practices will convert loyal users into advocates
• Following Accessibility requirements will reduce exposure to risk locally and internationally
• Like curb cuts, consistent keyboard controls make many users more productive

Q&A

What questions do you have?