Accessible Context-sensitive Help with Unobtrusive DOM Scripting

This article demonstrates two methods of calling context-sensitive help in a web form, in an accessible manner, using unobtrusive DOM scripting.

( Read the article )

You should add live demo pages of the tutorials here on Dev.Opera. Really!

Originally posted by tdzark:

You should add live demo pages of the tutorials here on Dev.Opera. Really!

Done! See the new line in the introduction. Thanks for the suggestion.

Very nice, thanks a lot Keep doing that for future articles too

Nice article. It's a great idea to add contextual help in this way.

I think you could improve on the markup for the help links. Right now the semantics for having a 'help' image don't seem quite right: what does this image mean? It is really a link button. Maybe something like this:

<label for="email">Email (required) <a class="help" id="emailhelp" href="#emailhelptxt">Help</label>

In the markup, the various help text goes right at the bottom of the form.

If Javascript is not enabled, then clicking the help link will jump down the page to #emailhelptxt.

If Javascript is enabled, then all that help text is hidden, and the help text is inserted just below each label when the help link is clicked (like you have now).

And you style the help links using CSS:

a.help {
background: transparent url(help_small.gif) center center no-repeat;
display: block;
height: 16px; width: 16px;
text-indent: -999em;
}

Originally posted by chrismills:

See the new line in the introduction.

Some hint about having to be logged in for being able to look into the examples would be useful, M/B?