“head first” style aria

I attempted to give a Head First style speech at the Toastmasters humorous speech competition. As a moderator at JavaRanch, it seemed fitting to put a transcript of one iteration online. While it changes a bit each time I give it, this is the idea.. Shown here with a bit of organization.

This was given to a largely non-technical audience.   For the more technical readers here, ARIA actually has four levels: off, polite, assertive and rude.  This article on ARIA is an excellent read.  My audience tells me the concepts were memorable and the speech was funny.  So I guess I accomplished my goal.  I did win at my club and get to go on to the next level.  Which gives me the chance to give this speech in front of people I don’t know.

You no longer have to imagine the sock puppets :).  I had two – one for the browser and one (with glasses) for the screenreader.
screenreader puppet

Anyway, here we go:


Introduction
Me: When you think of technology, do you think of humor?  I do.  My goal is to teach you about a technical topic called ARIA – Accessible Rich Internet Applications.  Boring?  Just you wait.  I brought sock puppets.

Welcome the characters
Me: We all know what a browser is.  We use it every day to browse the web.  I’ll let you imagine that this sock puppet is IE 7.  You may not know what a screenreader is.  Imagine you can’t see the screen.  What does our browser friend here look like?  Well, the screenreader reads the words in the browser to you.  The glasses remind us of reading so it will be easy to remember that this guy is the screenreader.  Lets listen in on how things worked up until now.

Scenario 1 – Before ARIA
Browser: I’m IE 7.  Who are you?
Screenreader: I’m a screenreader product called Jaws.
Browser: Ah!  A shark!  And I can’t see my users!  A shark ate my users!
Screenreader: Stop being so dramatic.  Your user is write here – safe and sound.  I help your user.
Browser: My user is just find without your help.
Screenreader: Want to be IE 7?  Watch what happens when a blind or vision impaired users tries to fill out a form without a standard called ARIA.
Browser: I’ll set the scene.  It was a dark and stormy night.
Screenreader: Get on with it.  I can’t read to the user until you get around to rendering the page.
Browser: Fine.  Here’s your page.
Screenreader: Ok.  User? I’ve got some questions on a form for you.  <hum as they go back and forth>
Browser: Uh oh.  The user entered a bad country.  I know because I checked with the website while the user was filling out the form.  I know!  I’ll put a big red message on the screen.  Surely the user will see that.
Screenreader: <back to humming>.  Submit.  My masterpiece.  All done now – time for a nap.
Browser: Wait a minute!  The country is still invalid.  Jaws – can sharks swim with their eyes close?  You’re falling asleep on the job.  I told you there was a message.
Screenreader: Did not!  You place a secret message and didn’t tell me it was there.  That’s like putting a note in a dictionary in a basement in Europe and claiming I should have seen it.
Browser/ Screenreader: Did not!  Did too!  Did not!  Did too!

Me: All right guys. Break it up.  Luckily this is a thing of the past.  Let’s upgrade to IE 8 and see how it looks now.  Ready IE 8?

Scenario 2 – Urgent Message with ARIA
Browser: Yes!  I’m all bright, shiny, new and upgraded.  My father was IE 7.  Parents are so backwards!  I’ll set the scene.  It was a dark and stormy night.
Screenreader: Just like you father.  Get on with it.
Browser: Where’s the fire?  Here’s your page.
Screenreader: <hum to user while fill out form>
Browser:  Uh oh.  The website says we can’t ship a book to North Korea.  I know!  I’ll set the rude ARIA property to tell the user.
Screenreader: I see the rube property is set.  The sky is falling!  The sky is falling!  I must tell the king, I mean the user.  User – Abort!  Abort! Urgent message – no books can go to North Korea.
Screenreader: Browser, that was a close one.  But we save the day – and the user – thanks to ARIA.  Remember what that stands for?
Browser: Yeah.  Accessible rich internet applications.  Accessible.  That would be you screenreader – reading to the user.  Internet Application.  That’s a website where we can fill out forms.  And rich.  That must mean the website has a pot o’gold.
Screenreader: Not quite.  Rich means dynamic and interactive.  Like gmail.  You can do things without reloading the whole page.

Interlude
Me: As you can see, IE 8 support is much better than IE 7.  But does this mean we have to interrupt the user for ever little thing.  Seems distracting.  T-O-P- Wait!  I have something unimportant to tell you. !  Let’s watch.  Browser?

Scenario 3 – Informational Message with ARIA
Browser: I’ll set the scene.  It was a dark and stormy night.
Screenreader:Oh for crying out loud!  Can’t we skip that prt?
Browser: Fine.  Here’s your page already.
Screenreader: <hum while fill out form>
Browser: Hmm.  The website says that city and zip code don’t match.  Probably a typo, but I should tell the user.  I’ll set the polite ARIA property.
Screenreader: Interesting.  I see the polite property has a message.  I’ll wait for a good time to tell the user.  <hum more>.  Perfect.  User, while you are between fields, can you check this?  Oh, it’s wrong?  I see.  Good, we get to fix our mistake.
Browser: That was nice and polite of you.

Conclusion
You came to hear  a funny speech.  You learned what ARIA – accessible rich internet applications are all about.  Without even feeling like you were learning.  My motivation for doing this was the Head First series of books which often teaches through humor, dialog and personification.  Remember ARIA may be rude or polite, but always helpful.  Just like Head First.

[edited to add sock puppet picture]