jquery accessibility option

Question

what do you guys think of this code to help with some lazy people out there :)

$('a').each(function (i,n){
    $title = $(n).attr('title');
    if(!$title){
        $(n).attr('title',$(n).html());
    }
});

Considering that most links have the same title as their text so... let me knwo if any of you out there like this?

So we can tell w3school one box ticked :)

Answer 1

it's unnecessary work for the browser. if you have a large number of links this code could slow down init time considerably.

However, if you want to speed it up, you could hide all your text (ie, take it out of the DOM) , apply this code, and then show it again. This may flash your text, though.

Also, just don't be lazy and put in a title :)

Answer 2

You should prefix your variable with a var statement to prevent it being an implied-global.

Your whole thing can be simplified to:

$('a:not([title])').attr('title', function () {
    return $(this).text();
});

(preferring text() over html()).

Answer 3

What is your end goal? Are you just trying to satisfy some arbritrary checklist? Or are you actually trying to make your site more accessible to users? Have you tried an accessible browser - have you confirmed that they don't just use the link text on links that don't have a title attribute set? If that is the case you haven't actually achieved anything, and have just made your site slower for everyone.

If you want to support accessibility, please do it properly and use a properly thought out title attribute.