[development] jquery 1.0 release imminent

[Jonathan Chaffer]

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/