Tutor: This is a demonstration of the Dojo open source widget set, using the screen reader and the Firefox web browser. 

What we have on the screen is a demo mail application, built with the Dojo widget set. The top screen is a tool bar; we have Get Mail, New Message options. Below that we have a tabbed panel, right now there is only one panel showing which is the inbox panel. That inbox is split into three different panes.

On the left is an accordion container which is currently displaying a folders view. There is also an address book option in the lower left. 

On the right hand side of the screen, taking up most of the screen is a split panel, at the top we have an inbox view and at the bottom we have a preview view. 

I am running Window Eyes screen reader 6.1 and Firefox 2. 
I am now going to tab into this application. 

Computer screen reader: Get mail button, click to download new mail.

Tutor: I tabbed into that toolbar, the focus is now on the Get Mail button. There is a tool tip associated with this button which says click to download new mail, which was read by the screen reader. It is also important to note that the Dojo tool tip is read on focus on a item, rather than just on mouse-over.

Now that I am in the toolbar I use the arrow keys to navigate, so I am going to right arrow.

Computer screen reader:  New Message, click to compose new message. 

Tutor: We have a new message button and we have an options button. I am going to tab to go from the tool bar control into the inbox panel. 

Computer screen reader: (inaudible)

Tutor: We are given the information so that we know that this is tab control and the title is read.
One more tab takes me into that accordion pane that I described. 
You will notice that the reader says "question mark, question mark," it's because we use an html entity character for the little down arrow and that will be address in a future release and the screen reader.

We are now in that accordion so if I down arrow, we treat the accordion pane like a tab panel so that the arrow keys move from pane to pane and only one pane is displayed at a time. So if I down arrow;

Computer screen reader: Question mark question mark address book; two of two.

Tutor: The address book is displayed I know it is two of two. I want to go back to the folders, I'm going to up arrow. 

Computer screen reader: question mark question mark folders; one of two.

Tutor: I going to tab, that takes me into the accordion page, I'm going to tab again.

Computer screen reader: Folders...one to one depth of tree view (inaudible)

Tutor: Notice that it told me all about that, this is a big key for a screen reader user, I am know I am in a tree view, I know I am in an expanded item of a tree view; I am at the top level, because it was one and it has three children. 

Now that I am in this component I am going to use the arrow keys to navigate. So we have eliminated the excessive tabbing and we follow the same formats that Windows File Explorer uses to navigate this tree view. 

So I am going to down arrow.

Computer screen reader: Inbox, one of three, depth two. 

Tutor: It tells me where I am, I'm in one of three, depth level two. I am going to down arrow two more times. 
	
Computer screen reader: Trash, Save, close three of three. 

Tutor: Notice that it tells me close, it tells me it is the third of three items. I use the right arrow to expand. 

Computer screen reader: Save, expanded two items, three of three. 

Tutor: I am told it is expanded; I can now down arrow. If I pick that it will update the folder contents in the other pane. 

Now let's try to create a new message. I am going to shift tab back out of the accordion pane, back to the inbox. One more tab gets me to the top control which is the toolbar. I am going to arrow over. 

Computer screen reader: Button click to compose new message. 

Tutor: I am going to arrow over to compose a new message. I am going to press enter. I am going to tab down out of the tool bar and into that new message pane. 

Computer screen reader: New message one, two of two tab control. 

Tutor: I'm in a tab control and it told me that it is new message one and that it is two of two. I'm going to tab into the message.

Computer screen reader: Combo box. 

Tutor: It is a combo box. I am going to press the down arrow and arrow down to hear the different options. Auto completion makes keyboard use easier as it remembers who I previously sent mail to. I am going to send the mail to Bob. I press enter to pick that option. 

Computer screen reader: Bob yahoo.com 

Tutor: I am going to tab down to the subject field. 

Computer screen reader: Combo box. (reader reads out letters as they are being typed. RIDE.)

Tutor: I need a ride home, I enter that as subject. I tab and that takes me to the tool bar. Tab again and I am now in the Rich Text editing area.
Computer screen reader: Edit area. 

Tutor:  I am going to type a quick message to Bob.

Computer screen reader: (voice reads out the letters as they are typed, not the words.)

What I typed is Hi Bob, I do need a ride home tonight what time are you leaving? Becky. 
This is a Rich Text editor, so if I hold down shift and then back arrow. 

Computer screen reader: YKCEB selected. 

Tutor: I get my name selected. I am going to shift back, back to the tool bar. 

Computer screen reader: A new button. 

Tutor: It is a toolbar so I use the arrow keys. 
I am going to arrow across and it will only pick up the enabled buttons. 

Computer screen reader: Copy button, paste button, bold button.

Tutor: I am want to make the selected text bold, so I press enter here.

Computer screen reader: Edit area. 

Tutor: My focus goes back to the edit area. I want to sent the message so I have to tab out of the Rich Text control. 
Because Firefox support tabbing within the control we had to over-ride that tab and put focus on the frame first, so you heard it tell me edit area frame. 

One more tab will get me to this button.

Computer screen reader: Send button. 

Tutor: I press enter and that mail is sent, that new tab is deleted and I am back in my inbox pane. 

So what we have seen here is an example of some of the Dojo widgets. 
We saw the tool bar. 
We saw the tool tips, which was displayed on Focus. 
We saw the tab panel. 
We saw the accordion pane, which works similar and is identified as a tab panel, because in Dojo an accordion can display one particular pane at a time. 
We saw the tree view. 
We saw the Rich Text editor and the combo box. 
All of these were working with keyboard as well as with the screen reader. 
This is a mock up application. We could have a server behind this and be showing the Ajax updates. Update to preview box, update to preview pane. In theory we could update the inbox as new folders are created. 
We could update that as well. 

So we are thrilled we are making great steps to provide full accessibility with the widgets of the Dojo open source toolkit. 

End of transcript. 
Screen reader demonstration.
Transcript for: Ben Fletcher. 
Ent: Annabel Eastwood. 
Date: 18-07-08

Screen reader demonstration.
Transcript for: Ben Fletcher. 
Ent: Annabel Eastwood. 
Date: 18-07-08

Page 4 of 4

Page 5 of 5