1

WAI-ARIAReal world Examples and Solutions

September 2009

Techshare

Speaker

Artur Ortega

Accessibility Evangelist

Yahoo!

2

Who is Artur Ortega?

Blind Software Engineer

Real world examples

m.www.yahoo.com

(sneak preview at http://uk.yahoo.com/trynew )

www.ysearch.com

Why WAI ARIA?

How did we implement it?

Yahoo! WAI ARIA Demo

m.www.yahoo.com

www.ysearch.com

Javascript

WAI ARIA

Creating the own

WAI ARIA

JavaScript service

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",

[...]

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 :

Focus Management

focusable: function(node, enable){

node.tabIndex = enable ? 0 : -1;

}

Check for WAI ARIA enabled browsers

supported = (

Y.UA.ie >= 8 ||

Y.UA.gecko >= 1.9 ||

Y.UA.webkit >= 530);

Setting the state

setState: function(node, state){

node.setAttribute(ARIA_PREFIX + state, true);

}

Setting a role

setRole: function(node, role){

return node.setAttribute("role", role);

}

Clearing Roles

clearState: function(node, state){

return node.removeAttribute(ARIA_PREFIX + state);

}

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;

}

};

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

Conclusion

- Implementation

- Tests

20

Artur Ortega

Accessibility EvangelistYahoo! Europe Ltd

125 Shaftesbury AvenueLondon WC2H 8AD

United Kingdomortega@yahoo-inc.com