References for Video 3

From CodeTalks

Further Material

Feedback from CBlouch

1/27/09 4:23EST

Glad to see you picked up on my axs library. I hope many folks will find your presentation helpful and implement more keyboard controls in web widgets.

Only a few nits I might note:

If you are not using args in your axs.keyreg call you can just leave it out rather than passing in a "" as shown in your video. The des parameter is also not needed if you don't plan to use the axs.keychart method. This is why I have the optional parameters passed in as a sparse array so you can leave out the bits you don't need. So in simplified form you could just do

axs.keyreg("left",toolbarCommands.Prev,{node:axs.id("customToolbar")});

The DHTML style guide also specifies some keys for media players, which your example is a part of

http://dev.aol.com/dhtml_style_guide#mediaplayer

In particular, if the media autostarts on pageload (as most do) you want a global shortcut to get the thing to stop. A screen reader user will have difficulty navigating to the pause/stop button somewhere on the page while the audio track is playing over top of their speech synthesizer.

You might also note that axs.id is just a shortcut for document.getElementById so folks don't think it's a special requirement for the use of the axs.keyreg method.

Glad to see you use the axs.ae method. Many libraries have something similar and it hides a lot of goofy complexity and bugs between different browsers when adding event handlers to objects. The axs.keyreg method itself would not have been possible without axs.ae.

Also, I was hoping the name would be pronounced like Access rather than A X S, but that seems to be a battle I'm losing on a number of fronts :)

Feedback from AaronLev

Do you want to provide a link to further materials, such as the style guide, the axs library, and the page on codetalks: http://wiki.codetalks.org/wiki/index.php/Docs/Keyboard_navigable_JS_w... I'm not sure how to best provide links in a video, but maybe each video needs a page of references to go along with it.

Speaking of the codetalks page, do you need to include any more of the authoring tips described there? http://wiki.codetalks.org/wiki/index.php/Docs/Keyboard_navigable_JS_w...

When mentioning Inspect, mention Accerciser and whatever the Mac tool is, and say where users can find them.

Tabindex summary: tabindex="-1" means also focusable via click

For the slide "Using tabindex on items (10:48 mark)" Set container tabindex="0" <-- this is false, only the currently active descendant should get a tabindex of 0, all other descendants get -1, and the container doesn't get one. As the focus moves, the new item gets tabindex="0" and the previous item gets tabindex="-1"

• Note that focusedChild.className+="" will not be necessary in IE8