ajax y accesibilidad
TRANSCRIPT
![Page 1: Ajax Y Accesibilidad](https://reader037.vdocuments.site/reader037/viewer/2022110309/55845759d8b42adf748b50e3/html5/thumbnails/1.jpg)
IBM Emerging Technologies
© 2006 IBM Corporation
JavaScript and AJAX Accessibility
Becky GibsonWeb Accessibility Architect
![Page 2: Ajax Y Accesibilidad](https://reader037.vdocuments.site/reader037/viewer/2022110309/55845759d8b42adf748b50e3/html5/thumbnails/2.jpg)
IBM Emerging Technologies
© 2006 IBM Corporation
Agenda
What is AJAX and why do I care?
What are the Issues with AJAX?
How do I make my AJAX applications Accessible?
– Using HTML Techniques
– Using DHTML Accessibility Techniques
Demonstration of techniques
Summary
![Page 3: Ajax Y Accesibilidad](https://reader037.vdocuments.site/reader037/viewer/2022110309/55845759d8b42adf748b50e3/html5/thumbnails/3.jpg)
IBM Emerging Technologies
© 2006 IBM Corporation
What is AJAX?
AJAX = Asynchronous JavaScript and XML
Allows incremental update of Web pages.
Built using standard web technologies - HTTP, (X)HTML, CSS, JavaScript, Document Object Model (DOM), XML
Used by many popular internet companies.
Examples:
– Google Suggests, Google & Yahoo! Maps
– Amazon A9 Search
– Flickr, BaseCamp, Kayak
– Yahoo! AJAX Library
![Page 4: Ajax Y Accesibilidad](https://reader037.vdocuments.site/reader037/viewer/2022110309/55845759d8b42adf748b50e3/html5/thumbnails/4.jpg)
IBM Emerging Technologies
© 2006 IBM Corporation
Example – Yahoo! Sports
![Page 5: Ajax Y Accesibilidad](https://reader037.vdocuments.site/reader037/viewer/2022110309/55845759d8b42adf748b50e3/html5/thumbnails/5.jpg)
IBM Emerging Technologies
© 2006 IBM Corporation
Traditional Web Interaction
Client makes http request
Web serverServer returns a new page
![Page 6: Ajax Y Accesibilidad](https://reader037.vdocuments.site/reader037/viewer/2022110309/55845759d8b42adf748b50e3/html5/thumbnails/6.jpg)
IBM Emerging Technologies
© 2006 IBM Corporation
How AJAX works
Web server
Client makes http request for specific information
Server returns the requested information
Multiple requests are served
![Page 7: Ajax Y Accesibilidad](https://reader037.vdocuments.site/reader037/viewer/2022110309/55845759d8b42adf748b50e3/html5/thumbnails/7.jpg)
IBM Emerging Technologies
© 2006 IBM Corporation
Why Do I Care About AJAX?
Enables building Rich Internet Applications (RIA)
Allows dynamic interaction on the Web
Improves performance
Real-time updates
No plug-ins required
![Page 8: Ajax Y Accesibilidad](https://reader037.vdocuments.site/reader037/viewer/2022110309/55845759d8b42adf748b50e3/html5/thumbnails/8.jpg)
IBM Emerging Technologies
© 2006 IBM Corporation
What are the Issues with AJAX?
User does not know updates will occur.
User does not notice an update.
User can not find the updated information.
Unexpected changes in focus.
Loss of Back button functionality*.
URIs can not be bookmarked*.
*These issues will not be discussed as they are not specific to accessibility.
![Page 9: Ajax Y Accesibilidad](https://reader037.vdocuments.site/reader037/viewer/2022110309/55845759d8b42adf748b50e3/html5/thumbnails/9.jpg)
IBM Emerging Technologies
© 2006 IBM Corporation
Specific Accessibility Issues
Assistive Technology users are not aware of updates
– Updates occur on a different section of the page than the user is currently interacting with.
– Clicking a link updates a different section of the page.
– Auto-complete fields or generated options not available to assistive technology.
– User has no idea how to find new or updated content
– Changes in focus prohibit complete review of the page
– Changes in focus cause disorientation and additional navigation.
![Page 10: Ajax Y Accesibilidad](https://reader037.vdocuments.site/reader037/viewer/2022110309/55845759d8b42adf748b50e3/html5/thumbnails/10.jpg)
IBM Emerging Technologies
© 2006 IBM Corporation
Informing the User
Explain the interaction to the user
– Before accessing the AJAX enabled page
– Within the AJAX enabled page
Where possible, provide a manual update option
– Necessary for WCAG 2.0 Guideline 2.2
Save the user’s update preference
![Page 11: Ajax Y Accesibilidad](https://reader037.vdocuments.site/reader037/viewer/2022110309/55845759d8b42adf748b50e3/html5/thumbnails/11.jpg)
IBM Emerging Technologies
© 2006 IBM Corporation
Make updates Noticeable
Change the background color of updated data
– Use a subtle color
– Change only for a few seconds
– Best for small areas of the page
Briefly blink the updated data
– Blink for 3 seconds or less (WCAG 2.0 Guideline 2.2)
– Avoid the flash threshold (WCAG 2.0 Guideline 2.3)
![Page 12: Ajax Y Accesibilidad](https://reader037.vdocuments.site/reader037/viewer/2022110309/55845759d8b42adf748b50e3/html5/thumbnails/12.jpg)
IBM Emerging Technologies
© 2006 IBM Corporation
Help Users Find Updated Information
Provide option for updates via an Alert
Provide option to set focus to new data.
Use HTML header tags to mark sections with updated content.
Use DHTML Accessibility Alert role in conjunction with a floating pop-up box.
Use DHTML Accessibility Description role to describe new content.
![Page 13: Ajax Y Accesibilidad](https://reader037.vdocuments.site/reader037/viewer/2022110309/55845759d8b42adf748b50e3/html5/thumbnails/13.jpg)
IBM Emerging Technologies
© 2006 IBM Corporation
DHTML Accessibility Techniques and AJAX
DTHML Accessibility allows the creation of desktop style widgets on the web
Full keyboard navigation without excessive use of the tab key
Allows easy navigation from component to component and to updated content.
Allows non-intrusive notification of updated content via Alert
![Page 14: Ajax Y Accesibilidad](https://reader037.vdocuments.site/reader037/viewer/2022110309/55845759d8b42adf748b50e3/html5/thumbnails/14.jpg)
IBM Emerging Technologies
© 2006 IBM Corporation
DHTML Accessibility Overview
Add keyboard event handling
Add role and state information
Make items focusable via tabindex attribute
Update state information dynamically
![Page 15: Ajax Y Accesibilidad](https://reader037.vdocuments.site/reader037/viewer/2022110309/55845759d8b42adf748b50e3/html5/thumbnails/15.jpg)
IBM Emerging Technologies
© 2006 IBM Corporation
DHTML Accessibility Overview (continued)
Works in HTML or XHTML
– XHTML
• Uses XHTML 1.x role attribute • Uses namespaces to add state attributes
– HTML
• Embeds role and state information into class attribute• Accessibility Script library sets the role and state using DOM
apis
![Page 16: Ajax Y Accesibilidad](https://reader037.vdocuments.site/reader037/viewer/2022110309/55845759d8b42adf748b50e3/html5/thumbnails/16.jpg)
IBM Emerging Technologies
© 2006 IBM Corporation
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>
![Page 17: Ajax Y Accesibilidad](https://reader037.vdocuments.site/reader037/viewer/2022110309/55845759d8b42adf748b50e3/html5/thumbnails/17.jpg)
IBM Emerging Technologies
© 2006 IBM Corporation
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
![Page 18: Ajax Y Accesibilidad](https://reader037.vdocuments.site/reader037/viewer/2022110309/55845759d8b42adf748b50e3/html5/thumbnails/18.jpg)
IBM Emerging Technologies
© 2006 IBM Corporation
Summary
AJAX is a powerful technology for making dynamic web applications.
AJAX applications can present Accessibility barriers.
Simple changes to application design can make AJAX usable for all.
DHTML Accessibility Techniques fit well with AJAX
![Page 19: Ajax Y Accesibilidad](https://reader037.vdocuments.site/reader037/viewer/2022110309/55845759d8b42adf748b50e3/html5/thumbnails/19.jpg)
IBM Emerging Technologies
© 2006 IBM Corporation
Questions?
Further Discussion in
Marriott Executive Suite 1 (18th Floor)
3:30-4:00pm March 24 (today)
![Page 20: Ajax Y Accesibilidad](https://reader037.vdocuments.site/reader037/viewer/2022110309/55845759d8b42adf748b50e3/html5/thumbnails/20.jpg)
IBM Emerging Technologies
© 2006 IBM Corporation
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>