WAI-ARIA: Real world examples and Solutions - Artur Ortega, Yahoo!
-
Upload
artur-ortega -
Category
Technology
-
view
3.347 -
download
4
description
Transcript of WAI-ARIA: Real world examples and Solutions - Artur Ortega, Yahoo!
![Page 1: WAI-ARIA: Real world examples and Solutions - Artur Ortega, Yahoo!](https://reader033.fdocuments.us/reader033/viewer/2022061115/546426b4af795969338b47ed/html5/thumbnails/1.jpg)
1
WAI-ARIAReal world Examples and Solutions
September 2009
Techshare
![Page 2: WAI-ARIA: Real world examples and Solutions - Artur Ortega, Yahoo!](https://reader033.fdocuments.us/reader033/viewer/2022061115/546426b4af795969338b47ed/html5/thumbnails/2.jpg)
Speaker
Artur Ortega
Accessibility Evangelist
Yahoo!
2
![Page 3: WAI-ARIA: Real world examples and Solutions - Artur Ortega, Yahoo!](https://reader033.fdocuments.us/reader033/viewer/2022061115/546426b4af795969338b47ed/html5/thumbnails/3.jpg)
Who is Artur Ortega?
Blind Software Engineer
![Page 4: WAI-ARIA: Real world examples and Solutions - Artur Ortega, Yahoo!](https://reader033.fdocuments.us/reader033/viewer/2022061115/546426b4af795969338b47ed/html5/thumbnails/4.jpg)
Real world examples
m.www.yahoo.com
(sneak preview at http://uk.yahoo.com/trynew )
www.ysearch.com
![Page 5: WAI-ARIA: Real world examples and Solutions - Artur Ortega, Yahoo!](https://reader033.fdocuments.us/reader033/viewer/2022061115/546426b4af795969338b47ed/html5/thumbnails/5.jpg)
Why WAI ARIA?
![Page 6: WAI-ARIA: Real world examples and Solutions - Artur Ortega, Yahoo!](https://reader033.fdocuments.us/reader033/viewer/2022061115/546426b4af795969338b47ed/html5/thumbnails/6.jpg)
How did we implement it?
![Page 7: WAI-ARIA: Real world examples and Solutions - Artur Ortega, Yahoo!](https://reader033.fdocuments.us/reader033/viewer/2022061115/546426b4af795969338b47ed/html5/thumbnails/7.jpg)
Yahoo! WAI ARIA Demo
m.www.yahoo.com
www.ysearch.com
![Page 8: WAI-ARIA: Real world examples and Solutions - Artur Ortega, Yahoo!](https://reader033.fdocuments.us/reader033/viewer/2022061115/546426b4af795969338b47ed/html5/thumbnails/8.jpg)
Javascript
![Page 9: WAI-ARIA: Real world examples and Solutions - Artur Ortega, Yahoo!](https://reader033.fdocuments.us/reader033/viewer/2022061115/546426b4af795969338b47ed/html5/thumbnails/9.jpg)
WAI ARIA
Creating the own
WAI ARIA
JavaScript service
![Page 10: WAI-ARIA: Real world examples and Solutions - Artur Ortega, Yahoo!](https://reader033.fdocuments.us/reader033/viewer/2022061115/546426b4af795969338b47ed/html5/thumbnails/10.jpg)
The new Yahoo! Frontpage
Implemented ARIA service using YUI
[courier new schriftart für den block]
YUI.add("aria_service", function(Y){
var MP = Y.ModulePlatform,
SERVICES_NAMESPACE = "MPServices",
SERVICE_PROVIDER = "AriaProvider",
[...]
![Page 11: WAI-ARIA: Real world examples and Solutions - Artur Ortega, Yahoo!](https://reader033.fdocuments.us/reader033/viewer/2022061115/546426b4af795969338b47ed/html5/thumbnails/11.jpg)
Virtual buffer
update: function(){
if(!bufferUpdater){
bufferUpdater = document.createElement("input");
bufferUpdater.type = "hidden";
bufferUpdater.value = 1;
document.body.appendChild(bufferUpdater);
} bufferUpdater.value = (bufferUpdater.value ==
1 ? 0 :
![Page 12: WAI-ARIA: Real world examples and Solutions - Artur Ortega, Yahoo!](https://reader033.fdocuments.us/reader033/viewer/2022061115/546426b4af795969338b47ed/html5/thumbnails/12.jpg)
Focus Management
focusable: function(node, enable){
node.tabIndex = enable ? 0 : -1;
}
![Page 13: WAI-ARIA: Real world examples and Solutions - Artur Ortega, Yahoo!](https://reader033.fdocuments.us/reader033/viewer/2022061115/546426b4af795969338b47ed/html5/thumbnails/13.jpg)
Check for WAI ARIA enabled browsers
supported = (
Y.UA.ie >= 8 ||
Y.UA.gecko >= 1.9 ||
Y.UA.webkit >= 530);
![Page 14: WAI-ARIA: Real world examples and Solutions - Artur Ortega, Yahoo!](https://reader033.fdocuments.us/reader033/viewer/2022061115/546426b4af795969338b47ed/html5/thumbnails/14.jpg)
Setting the state
setState: function(node, state){
node.setAttribute(ARIA_PREFIX + state, true);
}
![Page 15: WAI-ARIA: Real world examples and Solutions - Artur Ortega, Yahoo!](https://reader033.fdocuments.us/reader033/viewer/2022061115/546426b4af795969338b47ed/html5/thumbnails/15.jpg)
Setting a role
setRole: function(node, role){
return node.setAttribute("role", role);
}
![Page 16: WAI-ARIA: Real world examples and Solutions - Artur Ortega, Yahoo!](https://reader033.fdocuments.us/reader033/viewer/2022061115/546426b4af795969338b47ed/html5/thumbnails/16.jpg)
Clearing Roles
clearState: function(node, state){
return node.removeAttribute(ARIA_PREFIX + state);
}
![Page 17: WAI-ARIA: Real world examples and Solutions - Artur Ortega, Yahoo!](https://reader033.fdocuments.us/reader033/viewer/2022061115/546426b4af795969338b47ed/html5/thumbnails/17.jpg)
Unit Tests
Storing the service provider on a global namespace
Easy access
for unit tests
Y.namespace(SERVICES_NAMESPACE);
Y[SERVICES_NAMESPACE][SERVICE_PROVIDER] = {
name: "aria",
getService : function(moduleplatform, id) {
return AriaService;
}
};
![Page 18: WAI-ARIA: Real world examples and Solutions - Artur Ortega, Yahoo!](https://reader033.fdocuments.us/reader033/viewer/2022061115/546426b4af795969338b47ed/html5/thumbnails/18.jpg)
Teststeps for ysearch
Using different screen readers
- speaks the “Search query” label
- speaks the “Use the..” description
- transition to the list of suggested terms is announced along with
- the full instructions
- the selected item
- each focus transition is properly announced and the highlighted item read
![Page 19: WAI-ARIA: Real world examples and Solutions - Artur Ortega, Yahoo!](https://reader033.fdocuments.us/reader033/viewer/2022061115/546426b4af795969338b47ed/html5/thumbnails/19.jpg)
Conclusion
- Implementation
- Tests
![Page 20: WAI-ARIA: Real world examples and Solutions - Artur Ortega, Yahoo!](https://reader033.fdocuments.us/reader033/viewer/2022061115/546426b4af795969338b47ed/html5/thumbnails/20.jpg)
20
![Page 21: WAI-ARIA: Real world examples and Solutions - Artur Ortega, Yahoo!](https://reader033.fdocuments.us/reader033/viewer/2022061115/546426b4af795969338b47ed/html5/thumbnails/21.jpg)
Artur Ortega
Accessibility EvangelistYahoo! Europe Ltd
125 Shaftesbury AvenueLondon WC2H 8AD
United [email protected]