Accessible AJAX Demonstration
Upcoming SlideShare
Loading in...5
×
 

Accessible AJAX Demonstration

on

  • 857 views

 

Statistics

Views

Total Views
857
Views on SlideShare
849
Embed Views
8

Actions

Likes
0
Downloads
1
Comments
0

2 Embeds 8

http://www.scoop.it 7
http://www.slideshare.net 1

Accessibility

Categories

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.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
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: http://tinyurl.com/CascadeList1 – Video: http://tinyurl.com/CascadeList1Video • 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: http://tinyurl.com/CascadeList2 – Video: http://tinyurl.com/CascadeList2Video • 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: http://tinyurl.com/CascadeList3 – Video: http://tinyurl.com/CascadeList3Video • 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: http://tinyurl.com/NormalDialogBox – Video: http://tinyurl.com/NormalDialogBoxVideo • 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: http://tinyurl.com/AriaDialogBox – Video: http://tinyurl.com/AriaDialogBoxVideo • 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 http://usability.msu.edu/conf/2009/AccessibleAJAXDemo/ • Additional ARIA demos can be found at the Illinois Center for Information Technology and Accessibility (iCITA): http://test.cita.uiuc.edu/aria/ • jQuery can be found at http://jquery.com. The jQuery UI which created the dialog box can be found at http://jqueryui.com/. Accessible AJAX Demonstration – 2009-11-12 16