Text Transcript of Real World Accessibility from SXSW 09

Great, Thanks, so I'm Becky Gibson, I work for IBM but I also work on Dojo doing accessibility. And, so I now have a captive audience to be able to tell you all about accessibility. Before I started i just want to give a little plug - Dojo 1.3 is out as the release candidate one. So we've done a lot, a lot of updating, massive stabilization, bug fixing, we've done a lot of work on the docs so check that out.

And I don't quite have time for a top ten reasons why people don't implement accessibility but I figured I'd at least do a top three. So one of the things I hear from people - number three, "hey my site is accessible it's up twenty four seven - I don't have to worry about this stuff - I'm all done!"

That's like, no, sorry that's not what we mean. The other one I hear is, "oh, people with disabilities don't use my site," and I'm like well, that's like saying left handed people don't use your site or blue eyed people don't use your site! The, the internet has made the world, broadened the world for people with disabilities that often needed help to perform certain tasks or they were homebound and now with the web it has opened them up. So, that excuse fails too, sorry.

Now the number one thing that I hear, "adding accessibility is way too hard and you're gonna ruin my design. I'm not going to use form controls and I'm not going to just use standard old HTML!"

Well, sorry that's well, that one's busted too, now because...
Dojo's doing it
jQuery UI is doing it
YUI's doing it
All these other companies are doing it and what are they doing? They are implementing ARIA -accessible rich internet applications.

And you're like, "okay, I've heard that somewhere maybe what is it?"

So, it's a spec going through the W3C process ah just like HTML, CSS. I'm surprised I didn't hear the groan when i said it was a W3C spec so that's good! It's going through it's actually reached last call status. It's going through the Protocol and Formats working group which is part of the Web Accessibility Initiative at WAI at W3C. It's implemented in Firefox, it's happening as as well as in IE the Opera and Safari are all working on implementing ARIA and it's gaining as we see is getting support from those browsers. The tool kits that I mentioned are using it and the assistive technologies like the screen readers and the magnifiers.

So, what it basically does is it lets you add role semantics into your scripted UI elements. So everybody now knows, everybody wants tab panels, they want menu bars, they want drop down menus they want tree controls. And in the browser there's no way in HTML to say to a screen reader, "hey, this is a tree control."

To the screen it looks like a bunch of divs or spans potentially or a list item. So, what ARIA does it is lets us add those semantics into my mark up or via scripting, to tell, to be able to communicate to the screen reader that this is a tree control. And also, you have all sorts of properties if you're a tab panel. You have a selected panel or, if you're a tree control, you have a tree item that's selected and it may be expanded or collapsed. So you have to add that state information and update it as you go.

Now, the other thing that is key is in order for our screen reader to be able to speak this information you have to make it focusable. So we all know about the tab index attribute to be able to set focus to things. And it's pretty much being implemented by all the browsers now. And with that you also have to add the key events. So, it's fine to add an onclick to an image tag and a tabindex to make it focusable but if you don't have the key handler that tells what to do when a person presses the enter key because they don't have a mouse so you need to add all the keyboard events. And what we want is to mimic the behavior of your rich client UI So if you have a tree control you normally you tab into that tree control. Once you have focused in the tree control you use the arrow keys. So you use the right key to expand a left key to collapse and you arrow up and down through it. So, now we removed the excessive tabbing that we see on the internet because only form controls and links by default are in the tab order. So we use the keyboard.

We can add live regions and now when we're using XHR to update our page. Previously a screen reader user or somebody using the magnafier had no clue that you were changing something on the page - it wasn't announced to them. So we have a way now to mark things as live regions. We can also have landmarks to help you navigate.

So, this just shows you how you might add that type of information into a tree. So we have a tree control here and so your container would get a role=tree and then the items within it would be marked as a treeitem. So if we see the Africa item is expanded right now, that gets a role of treeitem and it gets a a a property called expanded=true. Now we look down the next item Egypt, that's the selected item. It's also a tree item it gets the role it gets um a property of selected=true. There is no expanded because it has no children. So, that's how I indicate there's nothing to expand. And then likewise you look at Australia which is a closed node. It's got the role and it has expanded=false indicating it has children but it's not open yet. And a screen reader will give all of this information and the level information to the user as they navigate through this using the arrow keys.

I'm not going to go through them, I mentioned a lot of the roles already. There's roles for all pretty much any control you can want to create.

There's properties.

Um so I'll take a little bit more time with landmark roles. They basically mimic the XHTML landmark roles. I've listed them here.

And how you might use those is take an example - this page. I might have add a banner so I would mark the top spot as a banner. The left side is my tree control with doing for navigation. I have the main content and i have the content info. So a screenreader user could very quickly come in and find those different parts of the page and navigate to them. And then we're hoping the browsers will also implement keyboard navigation to those roles that you put in.

And this is a code. This is, I built this with DojO so this is using Dojo's dijit ContentPane. And all I really have to do is add those extra role attributes either into my mark up or you can do it via script. Because this is a Bordercontainer and Dojo can't know which pieces of your BorderContainer are navigation or which are your main. So you need to add that particular information in.

Live regions. Again they're sections of the page that get updated usually via ajax / XHR. And you can now mark those and say this region is going to get updated so you can, you give it a role of region. And then you give it a property of live to say whether you want the changes announced in a polite manner, an assertive manner or in a rude manner. So, polite will wait until the screen readers done talking and then it'll announce updates. Assertive might wait for a pause while the screen reader is reading. Rude means, "hey were taking the sever down in thirty seconds you better log off," so it will speak that immediately.

And then you can say, you can mark the region as atomic. Do I want the entire region is being updated and everything that's being updated is important, or only the changes will be announced. So again I can add that really easily.

An example would be, this is a picture of the Dojo sample mail application but you can see a mail application would be a perfect example. Where i have an inbox listing and i'm navigating through the inbox and i pick one of the messages and in my preview pane, in the lower part of the screen,it brings up my my message. Now, a scream reader user would have to navigate down there and find out what that message said. But, if I mark that as a live region it will, the screen it will speak those contents as soon as they get updated so the ser can pick a message and then hear what what is in there.

And that again this is a digit ContentPane so I add the role - I say it's a region on that preview area area. I put in aria-live is assertive so I want it to speak it very soon and I want the entire change to be spoken. So the summary is that you know the tool kits are implementing ARIA so use them! I mean all you know, Dojo all the core dojo widgets which are found in the dijit directory are fully accessible to keyboard as well as low vision as well as a screen reader user. jQuery UI is working on it. YUI is adding it. So ARIA helps make ajax accessible and you guys do all this JavaScript stuff you use the tool kits you know about all these you know regular expressions and prototype and all sorts of things - you can figure out this ARIA stuff it's not it's not that hard! So we want you to make your websites dynamic and accessible! And I also want to say I don't have time in ten minutes to do live demos but there's a talk tomorrow at eleven thirty in this room that's ah Ajax Accessibility - an ARIA dDuet. And we'll actually doing real demos so you can see some of this in action tomorrow.

And I do want to leave you with a... So just think however Quaint it may have been where would ah where would Scotty have been .. Oh, never mind sorry we don't have audio if you all remember the clip You know where would scotty have been when he went to the computer and he wanted to speak to it. He needed a different mode of input

John, you can totally act out the voices (laughter)

and where would Scotty have been

and he's speaking into the mouse...<./p>

thank you! So, any way without the keyboard he would not have gotten his transparent aluminum. So i want you to remember, you know that might be that your app is going to create the next transparent aluminum and you better make sure it's fully accessible!