Accessible AJAX Demonstration
Upcoming SlideShare
Loading in...5

Accessible AJAX Demonstration






Total Views
Views on SlideShare
Embed Views



2 Embeds 8 7 1



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

Accessible AJAX Demonstration Accessible AJAX Demonstration Presentation Transcript

  • Accessible AJAX Demonstration Or: AJAX, ARIA, and JAWS, Oh My! Carl Bussema and Carl Raymond Information Technologists UOE Communication and Information Technology
  • Who we are • Communication and Information Technology is a sibling unit to the Usability and Accessibility Center • We build web sites supporting University Outreach and Engagement projects and for other University clients • Our stable of web sites currently numbers around 30, and continues to grow Accessible AJAX Demonstration – 2009-11-12 2
  • Why We Are Here • We take accessibility seriously • We know how to make static sites highly accessible • We’re still learning how to do AJAX well: – Improve usability – Don’t sacrifice accessibility • Clients want the sexy! Accessible AJAX Demonstration – 2009-11-12 3
  • What We Use • Server side: ASP.Net with AJAX Extensions • Client side: jQuery and jQuery UI Accessible AJAX Demonstration – 2009-11-12 4
  • Our Goals for Our Web Sites • Create a reusable library of accessible AJAX components for our server platform that we can use across many sites – Simplifies use by non-programmers. – A bug fix or enhancement to a library component gets applied to all sites. • Desired components: – Dialog box – Light box – Image rotator – Slider panels Accessible AJAX Demonstration – 2009-11-12 5
  • Overview • Two common uses studied: – Cascading drop-down lists (i.e., choices in the second list change based on the selection in the first) – Dialog box pop-over • For each application: – One or two inaccessible methods shown – Accessible method shown – Key HTML differences highlighted • Methods: – Use ARIA in markup to provide semantic information – Use tabindex attribute to allow elements to receive focus – Use scripting to explicitly set the focus Accessible AJAX Demonstration – 2009-11-12 6
  • Testing Platform • All tests performed on Windows XP, using Firefox 3.5.4 and JAWS 10 – Best support of any browser – IE8 support is partial • Due to the difficulty of turning JAWS on and off during a live presentation, demos were pre-recorded • Links to the interactive code examples are available, and you are encouraged to try them yourselves Accessible AJAX Demonstration – 2009-11-12 7
  • Cascading Lists—First version • No AJAX – Interactive: – Video: • Very simple HTML – the onchange event for the drop- down just submits the form, which reloads the page • Accessibility: Partial. – JAWS can reread the entire page (inefficient) – The user may know that the page has reloaded (JAWS setting) Accessible AJAX Demonstration – 2009-11-12 8
  • Cascading Lists—Second Version • Uses ASP.Net AJAX framework – Interactive: – Video: • On selection from the first list, the second list is updated via AJAX. Smoother experience for visual users. • Accessibility: Inaccessible. A big step backward. – JAWS does not read the new content after an AJAX update. – User unaware of any change on the page. Accessible AJAX Demonstration – 2009-11-12 9
  • Cascading Lists—Third Version • Uses ASP.Net AJAX framework with additional ARIA markup and a little extra hand-coded JavaScript – Interactive: – Video: • Functionally identical to the second version for sighted users • Accessibility: Very good – JAWS automatically read both the second list and the results paragraph with no additional prompting from the user Accessible AJAX Demonstration – 2009-11-12 10
  • Cascading Lists—Making it accessible • Added ARIA attributes to markup: – First list: – Has aria-controls attribute to indicate that when it changes, the second list is updated. (We reinforce this with scripting.) – Second list: – Has aria-controls attribute to indicate that when it changes, the result paragraph is updated. – Has aria-live="assertive" and aria-relevant="all" so that AT will begin reading as soon as the list is updated. – Result paragraph: – Has aria-live="assertive" and aria-relevant="additions text" so that AT will begin reading as soon as text is added or changed (but not deleted) – Has tabindex="0" so that it can receive focus via JavaScript • Used scripting to set focus after AJAX update of either list Accessible AJAX Demonstration – 2009-11-12 11
  • Dialog Box Goals • Use jQuery UI to produce a modal dialog box that AT treats as a dialog – If the dialog box is never opened, the AT should ignore it – When the dialog box is open, the AT should confine its attention to it, and not read content elsewhere on the page – Keyboard navigation such as TAB should confine itself to the dialog box while it is open, and ignore the dialog box while it is closed. Accessible AJAX Demonstration – 2009-11-12 12
  • Dialog Box—First Version • A jQuery UI modal dialog box can be opened either by client-side script, or as a result of an AJAX postback – Interactive: – Video: • Accessibility: Bad – JAWS does a poor job of reading the full contents of the dialog Accessible AJAX Demonstration – 2009-11-12 13
  • Dialog Box—Second Version • Functionality is identical to first version for sighted users. – Interactive: – Video: • Accessibility: Good – JAWS does a poor job of reading the full contents of the dialog Accessible AJAX Demonstration – 2009-11-12 14
  • Dialog Box—Making it Accessible • Added ARIA to markup. Dialog div has attribute role="alert" to notify the AT. – There is a role="alertdialog" in ARIA; however, testing did not produce good results with this role (yet?) • Emphasizes that ARIA is an emerging technology and support is not widespread yet. • Used tabindex="0" attribute on dialog content so focus can be set there. • When the user closed the dialog, JavaScript explicitly set focus to the control that opened it. – Requires that you "remember" where you came from • We save the ID of the button before we open the dialog – Uses the jQuery event when the dialog closes • Would require extra steps if you want to close the dialog server-side; jQuery doesn't fire then. Accessible AJAX Demonstration – 2009-11-12 15
  • References • All demos and videos can be found at • Additional ARIA demos can be found at the Illinois Center for Information Technology and Accessibility (iCITA): • jQuery can be found at The jQuery UI which created the dialog box can be found at Accessible AJAX Demonstration – 2009-11-12 16