[development] jquery 1.0 release imminent
Jonathan Chaffer
jchaffer at structureinteractive.com
Thu Aug 24 12:56:10 UTC 2006
On Aug 22, 2006, at 14:50 , Morbus Iff wrote:
>>> * JS events, such like <p onmouseover="tooltip_on('you're
>>> hovering!')"
>>> onmouseout="tooltip_off()">Whee!</p>. I tend to like this one
>>> (and
>>> implemented it in my game.module, not via jQuery though) the most
>>> because it a) doesn't pollute the DOM, b) don't harm screen
>>> readers,
>> Screen readers need to see the content you display on hover too.
>
> In my particular case, the information on hover was of little
> import - it was a foreshadowing of what they'd be clicking on, such
> that there was no loss of inaccessibility - someone could just
> click the link and get (even more) of what the hover was actually
> talking about.
>
> With that said, of the four options I described, you probably most
> like the the <div> one with IDs. But where would you put those?
> Putting them right next to the text ruins readability of the main
> text, and putting them at the end of the page removes any sort of
> context.
I'm a little late to this party, but I have to chime in to support a
nested DOM element solution.
There is no negative effect on screen readers. In fact, screen
readers will likely not read display:none text anyway[1], so unless
you specifically want the text read the behavior is probably already
what you want. To make sure, you can add speak:none to suppress
speech or speak:normal to enforce it. These rules can be in a
separate media="speech" stylesheet if you wish.
The benefits of the nested model are the same as when designing any
document structure for CSS layout. Maximizing the usefulness of the
cascade is a win for both CSS and jQuery, and for jQuery we also want
to exploit the implicit iteration as much as possible. It seems to me
the nicest model would be something like:
<div class="link-with-tip">
<a href="foo">bar</a>
<div class="tip">Arbitrary HTML to display on hover</div>
</div>
This model avoids text munging to match IDs with each other, which
harms readability of the code to some extent. Now we can do
$(document).ready(function() {
$('div.link-with-tip a').hover(function() {
$(this).parent().find('div.tip').show();
},function() {
$(this).parent().find('div.tip').hide();
});
});
And done. To my eyes this is nicer than anything involving a substr()
call.
[1] http://css-discuss.incutio.com/?page=ScreenreaderVisibility
--
Jonathan Chaffer
Algorithm Alchemist, Structure Interactive
(616) 364-7423 http://www.structureinteractive.com/
More information about the development
mailing list