jquery - ColorBox - add ALT text to gallery images? -


is there way make colorbox place alt text on img tags generates? note not looking caption, text alternative screen readers can recognize , read aloud.

a basic colorbox gallery looks this:

<p><a class="group1" href="../content/ohoopee1.jpg" title="me , grandfather on ohoopee.">grouped photo 1</a></p> <p><a class="group1" href="../content/ohoopee2.jpg" title="on ohoopee child">grouped photo 2</a></p> <p><a class="group1" href="../content/ohoopee3.jpg" title="on ohoopee adult">grouped photo 3</a></p> 

and it's initialized js this:

$(".group1").colorbox({rel:'group1'}); 

the title attribute of element gets used descriptive caption.

but img elements in generated html lack alt attribute. here's sample:

<img     src="/_files/images/photos/primo-tour/tour1.png"     id="cboxphoto"     style="border: medium none; display: block; float: none; cursor: pointer; margin-left: auto; margin-right: auto;" /> 

because lacks alt attribute, screen readers jaws , nvda read src attribute aloud, annoying blind users. means if have image full of text needs repeated actual text blind listeners, caption gets big available space. thus:

a colorbox over-long caption.

note long caption @ bottom redundantly repeats text that's baked image.

suggestions?

you can copy title attributes alt attributes @ startup: (attempting clone anchor properties seems not work)

$(function(){     $('a.group1').each(function(){         $(this).attr('alt', this.title?this.title:'');     });     $(".group1").colorbox({rel:'group1'}); }); 

then colorbox copies alt attribute image tag automatically.

testing fiddle


Comments

Popular posts from this blog

jquery - How can I dynamically add a browser tab? -

node.js - Getting the socket id,user id pair of a logged in user(s) -

keyboard - C++ GetAsyncKeyState alternative -