![Agenda ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Ähnlich wie ajax
Ähnlich wie ajax (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
ajax
- 1. JavaScript and AJAX Accessibility Becky Gibson Web Accessibility Architect
- 4. Example – Yahoo! Sports
- 5. Traditional Web Interaction Client makes http request Web server Server returns a new page
- 6. How AJAX works Web server Client makes http request for specific information Server returns the requested information Multiple requests are served
- 16. Example using XHTML <html lang="en" xml:lang="en" xmlns="http://www.w3.org/TR/xhtml2" xmlns:wairole="http://www.w3.org/2005/01/wai-rdf/GUIRoleTaxonomy#" xmlns:waistate="http://www.w3.org/2005/07/aaa" > ……… .. <span id="slider" class="myslider myselector2" role="wairole:slider" waistate:valuemin="0" waistate:valuemax="50" waistate:valuenow="33" > </span>
- 17. Example Using HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" > <html lang="en"> <head> <script type="text/javascript" src="enable.js"></script> </head> ……………….. <span id="slider" tabindex="0" class="myslider myselector2 axs slider valuemin-0 valuemax-50 valuenow-33 " > </span> Technique described at: http://www.w3.org/WAI/PF/adaptable/HTML4/embedding-20060318.html
- 19. Questions? Further Discussion in Marriott Executive Suite 1 (18 th Floor) 3:30-4:00pm March 24 (today)
- 20. Sample Code for Changing Styles <style type="text/css"> .notice { background-color:#FFFFCC; } .roInput { border:none; background-color:#FFFFFF; } </style> <script type="text/javascript"> // get the element to hold updated data var priceLoc = document.getElementById('priceLoc"); // update the data in price loc priceLoc.value = "new data"; // set the style so change will be noticed priceLoc.className = "notice"; // create timer to call clearActive() with element id and style name setTimeout("clearActive('priceLoc','roInput');", 5000); function clearActive(activeId, resetStyle) { var curActive = document.getElementById(activeId); curActive.className = resetStyle; } </script>
Hinweis der Redaktion
- Flickr is a photo sharing application, BaseCamp is a project management application, Kayak is a airline flight search tool.
- This page contains two images showing the use AJAX on the Yahoo! Sports page from the 2006 Olympics. The first image shows the entry field for a query to find athletes and countries with “mi” entered into the field. Below the field is a drop down box with a list of possible athletes provided by Yahoo, The list includes Micheal Lundmark, Michael Greis, Michael Gruber, Michael Gufler and 11 other entries for athletes whose names are Michael. In addtion to the name, the list also include the country and sport for the athlete. The second image shows the same input field with an additional letter “l” added at the end of “mi”. The drop down list of choices now contains the following; Milaine Theriault, Milan Hejduk, Milan Hnilicka, Milan Jagnesak, and other athletes whose first of last name begins with the letters “mil”. Miller, Bode, the US Alpine Skier is also included in the list.
- This diagram shows a traditional web interaction. The user makes an http request which is processed by the server and a new page is returned. The idea is that each request returns an entire page to the browser.
- This diagram illustrates AJAX style interactions. In this case JavaScript is used to make an http request for specific information. The web server processes the request and returns the specific information. JavaScript on the page integrates that information into the current page. The idea is that rather than an entire page being returned, a piece of information is returned and integrated into the page. This can happen many times on each page.
- AJAX creates a new paradigm for the web and many people are not accustomed to it yet. Thus it is important to inform the user if the page is being incrementally updated. Some users may not notice that data on the page is changed. This is especially true for users of assistive technology such as screen readers and magnifiers. Due to assistive technology, cognitive, or other reasons, some users may be focused on only a single area of the page. These uses may not be able to easily locate new information on the page. Unexpected changes of focus can be very distracting for some users. It can be very time consuming and difficult for some users to return to the previous location on the page. Thus, changing focus to the updated content should be avoided unless the user has explicitly requested that mechanism of update notification. Also, note that WCAG 2.0 Success Criterion 3.2.5 states, “ Changes of context are initiated only by user request.” Loss of back button functionality and URIs that can not be bookmarked are also issues associated with AJAX but they will not be discussed in this presentation since they do not directly affect accessibity.
- WCAG 2.0 Success Criterion 2.2.5 states, “ Interruptions, such as updated content, can be postponed or suppressed by the user, except interruptions involving an emergency .”
- WCAG Level 2 success criterion 2.2.2 Content does not blink for more than 3 seconds, or a method is available to stop any blinking content in the delivery unit . WCAG level 1 success criterion 2.3.1 Content does not violate the general flash threshold or the red flash threshold.
- All of these techniques will be demonstrated. Updates via an alert or setting focus to new data can be very annoying or disorienting and thus should only be implemented at the user’s request. Most assistive technologies and some browsers provide a mechanism to navigate via HTML headers.
- In Firefox 1.5 and IE 5 and later, the tabindex attribute can be added to any element to give it keyboard focus. Tabindex=0 puts the element in the default tab order; tabindex >0 puts the element in the specific position in the tab order. Tabindex < 0 allows the element to receive focus programmatically.